一秒换一张图 以及checkbox全选函数

类似效果:

setInterval(函数,时间间隔);时间间隔最小设置为1000,相当于一秒执行一次函数 2000=2s 依次类推 。

onfocus 得到光标  onblur失去光标或失去焦点。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.div1{ border: 1px solid #963; font-size:24px;}
.dis{ display:block;} //显示div
.disno{ display:none;}  //不显示div

</style>
<script type="text/javascript">
/*function update(){
	var a=document.getElementById("h1_t");
	var b=prompt("输入更改后的内容");
	a.innerHTML+=b;
	a.className="div1";
}*/

 function choseAll(){
	 var aihaos=document.getElementsByName("aihao");
	 	var chose=document.getElementsByName("choose");
	
		var xz=chose.item(chose.length-1);
	if(xz.checked==true){
	 for(var i=0; i<aihaos.length;i++){
	    var aihao=aihaos.item(i);
		aihao.checked=true;
	 }
	}
	if(xz.checked==false){
	 for(var i=0; i<aihaos.length;i++){
	    var aihao=aihaos.item(i);
		aihao.checked=false;
	 }
	}
 }
function choose(){
	var aihaos=document.getElementsByName("aihao");
    var a="";
	for(var i=0; i<aihaos.length;i++){
		var aihao=aihaos.item(i);
		if(aihao.checked==true){
		  a +=aihao.value;	
		}
	}
	alert("你的选择是"+ a +" ");
}
var t=0;
function display2(){
	for( var j=0;j<5;j++){

	    if(t<5){
		 var div1=document.getElementById("image_"+(t+1));
		    if(div1.className!="dis"){
			     div1.className="dis";
	                	for(var a=0;a<5;a++){
			               if(a!=t){
                                     var div2 =document.getElementById("image_"+(a+1));
                                      div2.className="disno";
									  
		                            }
		                     }
		                     if(t<5){
			                  t++; 
		                    }
		                else{
		                    	t=0;
		                    }
	                   	break;
	                }
	    t++;
		}
		else{
		t=0;
		}
	}	
}

 setInterval("display2()",2000);
  function display(a){
	for(var i=1;i<=5;i++){
        var div1 =document.getElementById("image_"+i);
         div1.className="disno";
		if(a==i){
			var div2=document.getElementById("image_"+i);
			div2.className="dis";
		}
	}
}

</script>

</head>

<body>
<!--<div id="h1_t"> 哈哈 </div>
<button onclick="update()">更改内容</button>-->
<div>
 爱好:<input type="checkbox" name="aihao"  value="篮球"/>篮球 
<input type="checkbox" name="aihao"  value="足球"/>足球 
<input type="checkbox" name="aihao"  value="排球"/>排球 <br />
<input type="checkbox" name="choose"  value="qaxuan" onclick="choseAll()"/> 全选&nbsp;&nbsp;
<button onclick="choose()">提交</button>
</div>
<div class="dis" id="image_1"><img src="lanqiu.jpg"  width="280px" height="180px"/></div>
<div class="disno" id="image_2"><img src="zuqiu.jpg" width="280px" height="180px"/></div>
<div class="disno" id="image_3"><img src="paiqiu.jpg" width="280px" height="180px"/></div>
<div class="disno" id="image_4"><img src="book.jpg" width="280px" height="180px"/></div>
<div class="disno" id="image_5"><img src="lol.jpg" width="280px" height="180px"/></div>

<button  onmouseover="display(1)"  >图片一</button><button onmouseover="display(2)" >图片二</button> <button onmouseover="display(3)" >图片三</button> 
<button onmouseover="display(4)" >图片四</button> <br /><br /><img src="lol.jpg"  width="45px" height="30px" onmouseover="display(5)"/>
</body>
</html>

 

猜你喜欢

转载自blog.csdn.net/liujucai/article/details/82154169