标签：方法 .class type document clear div width rri nbsp
setInterval(函数,毫秒) ------> 重复执行
<script type="text/javascript"> window.onload=function(){ var timer=null; i=0; function fn1(){ document.title=i; i++; if(i>=11){ clearInterval(timer); } } timer=setInterval(fn1,50); } </script>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定时器切换背景</title> <script type="text/javascript"> window.onload=function(){ var oInput=document.getElementsByTagName(‘input‘); var oBody=document.body; var timer=null; var num=0; var arrImg=[‘img/1.png‘,‘img/2.png‘,‘img/3.png‘,‘img/4.png‘]; oInput[0].onclick=function(){ clearInterval(timer); timer=setInterval(function(){ oBody.style.background=‘url(‘+arrImg[num]+‘)‘; num++; num%=arrImg.length; },1000); } oInput[1].onclick=function(){ clearInterval(timer); } } </script> </head> <body> <input type="button" value="更换背景"/> <input type="button" value="停止"/> </body> </html>
图片切换的例子加一个自动切换功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background-color: #333; } ul,p{ padding:0; margin:0; } li{ list-style: none; } #pic{ width: 400px; height:500px; position: relative; margin:0 auto; background: url(img/loader_ico.gif) center center no-repeat; } #pic img{ width:400px; height: 500px; } #pic ul{ width:40px; position:absolute; top:0; right:-50px; } #pic li{ width:40px; height:40px; margin-bottom: 4px; background-color: #666; } #pic .active{ background-color: #fc3; } #pic p, #pic span{ width:400px; height:30px; line-height: 30px; text-align: center; color:#fff; position: absolute; background-color: #333; } #pic p{ bottom:0; } #pic span{ top:0; } </style> <script type="text/javascript"> window.onload=function(){ var oPic=document.getElementById(‘pic‘); var oImg=oPic.getElementsByTagName(‘img‘)[0]; var oSpan=oPic.getElementsByTagName(‘span‘)[0]; var oP=oPic.getElementsByTagName(‘p‘)[0]; var oUl=oPic.getElementsByTagName(‘ul‘)[0]; var aLi=oUl.getElementsByTagName(‘li‘); var arrUrl=[‘img/1.png‘,‘img/2.png‘,‘img/3.png‘,‘img/4.png‘]; var arrText=[‘小宠物‘,‘图片二‘,‘图片三‘,‘面具‘]; var num=0; var oldLi=null; for(var i=0;i<arrUrl.length;i++){ oUl.innerHTML+=‘<li></li>‘; } oldLi=aLi[num]; //初始化 fTab(); function fTab(){ oImg.src=arrUrl[num]; oSpan.innerHTML=num+1+‘/‘+arrUrl.length; oP.innerHTML=arrText[num]; for( var i=0; i<aLi.length; i++ ){ aLi[i].className = ‘‘; } aLi[num].className = ‘active‘; } for(var i=0;i<aLi.length;i++){ aLi[i].index=i; aLi[i].onclick=function(){ num=this.index; fTab(); } } /**********************/ var timer=null; function autoPlay(){ timer=setInterval(function(){ num++; num%=arrText.length; fTab(); },1000); } autoPlay(); oPic.onmouseover=function(){ clearInterval(timer); } oPic.onmouseout=autoPlay; /**********************/ } </script> </head> <body> <div id="pic"> <img src="" alt="" /> <span>数量正在加载中...</span> <p>正在加载中...</p> <ul> </ul> </div> </body> </html>
QQ菜单延时的例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>QQ菜单延时</title> <style> #qq{ width:200px; height:400px; background-color: #f9c; } #title{ width:240px; height:180px; background-color: #fc6; position: absolute; left:220px; top:10px; display: none; } </style> <script type="text/javascript"> /*封装的方法*/ function $(v){ if(typeof v===‘function‘){ window.onload=v; }else if(typeof v===‘string‘){ return document.getElementById(v); }else if(typeof v===‘object‘){ return v; } } var timer=null; $(function(){ $(‘qq‘).onmouseover=show; $(‘qq‘).onmouseout=hide; $(‘title‘).onmouseover=show; $(‘title‘).onmouseout=hide; function show(){ clearInterval(timer); $(‘title‘).style.display=‘block‘; } function hide(){ timer=setInterval(function(){ $(‘title‘).style.display=‘none‘; },1000); } }); </script> </head> <body> <div id="qq"></div> <div id="title"></div> </body> </html>
标签：方法 .class type document clear div width rri nbsp
原文地址：http://www.cnblogs.com/web-Knowledge/p/7159746.html
