JavaScript一些实用代码记录1

来源：互联网发布：c语言文件加密编辑：程序博客网时间：2024/06/01 22:48

代码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