JavaScript一些实用代码记录1

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

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

 

 

 

你可能感兴趣的:(JavaScript,js,记录,休闲,实用代码)