您的位置：首页 > Web前端 > JavaScript

JavaScript一些实用代码记录1

2011-05-11 22:42 393 查看

代码1：表单中文本框的焦点的获取和移出

<form id="autoForm">

用户名：<input type="text" name="username" />

密码：<input type="text" name="password" />

<input type="submit" value="登陆" name="login"/>

</form>

</body>

<script>

var autoForm=document.getElementById('autoForm');

autoForm.username.onfocus=function(){

this.style.border='1px solid #287AE8';

}

autoForm.username.onblur=function(){

this.style.border='1px solid #A6FF4D';

}

</script>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

代码2：复选框的全选和不选

<body>

<form id="autoform">

全选/不选<input type="checkbox" id="selector" /><br/>

学习<input type="checkbox" /><br/>

娱乐<input type="checkbox" /><br/>

运动<input type="checkbox" /><br/>

</form>

</body>

<script>

var slector=document.getElementById("selector");

slector.onclick=function(){

for(var i=0;i<autoform.elements.length;i++){

autoform.elements[i].checked=this.checked;

}

}

</script>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

代码3：动态的创建元素：兼容IE和其他浏览器

<body>

</body>

<script>

var txt,btn;

try{

txt=document.createElement('<input type="text"/>');

btn=document.createElement('<input type="submit" vlaue="提交"/>');//IE专用

}catch(e){

txt=document.createElement("input");

btn=document.createElement("input"); //其他浏览器用

}

txt.type="text";

btn.type="submit";

btn.value="提交";

document.body.appendChild(txt);

document.body.appendChild(btn);

</script>

==================================================

代码4：单选框应用：

<body>

<form id="autoform">

性别：<input type="radio" name="sex" checked="checked" value="男"/>男

<input type="radio" name="sex" value="女"/>女

</form>

</body>

<script>

autoform.sex[0].onclick=function(){

alert('你选择的性别为男');

}

autoform.sex[1].onclick=function(){

alert('你选择的性别为女');

}

</script>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

代码5:震屏代码：

window.resizeTo(400,500);//改变窗口的大小

var loop=0;//震动次数

var timer;//定时器引用

var offX;

var offY;

var dir=1;//震动方向，1为正，－1为反

//震动特效

timer=setInterval(function(){

window.moveTo(500,180);//改变窗口的位置

if(loop>1000){

clearInterval(timer);

}//震动次数超过1000次就停止定时器

dir=Math.random()*10>5?1:-1;

offX=Math.random()*20*dir;

offY=Math.random()*20*dir-1;

window.moveBy(offX,offY);

loop++;

},10)//每隔10毫秒震动一次

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

代码6：阴影效果：

<style type="text/css">

div{

width:400px;

height:400px;

}

#layer1{

position:absolute;

left:30px;

top:30px;

background-color:#906;

opacity:0.4;/*css标准方式，IE以上的版本支持*/

filter:Alpha(Opacity='40');/*透明方式，ie6支持*/

}

#layer2{

background-color:#939;

}

</style>

</head>

<body>

<div id="layer1">ssss</div>

<div id="layer2">sssssssss</div>

</body>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

本文出自 “柯浩坚” 博客，请务必保留此出处http://gauyanm.blog.51cto.com/629619/563919

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航