js学习-定时器的使用

2013.10.14 2211 人浏览 留言

定时器-js获取当前时间

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>定时器-js获取当前时间</title>  
  6.       
  7. <script>  
  8. window.onload=function()  
  9. {  
  10.     //个位数变十位数  
  11.     function toDouble(n)  
  12.     {  
  13.         if(n<10)  
  14.             {return '1'+n;}  
  15.         else  
  16.             {return ''+n;}  
  17.     };  
  18.   
  19.     var aSpan=document.getElementsByTagName('span');  
  20.   
  21.     function tick()  
  22.     {  
  23.         //获取当前时间  
  24.         var oDate=new Date();  
  25.         var str=toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds());  
  26.         for(var i=0;i<aSpan.length;i++)  
  27.         {  
  28.             //aSpan[i].innerHTML=str[i];//ie7不兼容  
  29.             //str[i]与str.charAt(i)的区别  
  30.             aSpan[i].innerHTML=str.charAt(i);  
  31.         }  
  32.     }  
  33.     //定时器  
  34.     setInterval(tick,1000)  
  35.     tick();//去掉延迟  
  36. };  
  37. </script>  
  38.   
  39. </head>  
  40.   
  41. <body>  
  42. <span>0</span><span>0</span>  
  43. :  
  44. <span>0</span><span>0</span>  
  45. :  
  46. <span>0</span><span>0</span>  
  47. </body>  
  48. </html>  

延时提示框

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>延时提示框</title>  
  6. <style>  
  7.     div{float: left;margin:10px;}  
  8.     #div1{width: 50px;height: 50px;background: red;}  
  9.     #div2{width: 250px;height: 180px;background: #ccc;display: none;}  
  10. </style>  
  11. <script>  
  12. window.onload=function()  
  13. {  
  14.     var oDiv1=document.getElementById('div1');  
  15.     var oDiv2=document.getElementById('div2');  
  16.     var timer=null;//全局应用  
  17.   
  18.     //合并 连等  
  19.     oDiv1.onmouseover=oDiv2.onmouseover=function()  
  20.     {  
  21.         clearTimeout(timer);//去除定时器效果  
  22.         oDiv2.style.display='block';  
  23.     };  
  24.   
  25.     oDiv1.onmouseout=oDiv2.onmouseout=function()  
  26.     {  
  27.         //延时  
  28.         timer=setTimeout(function(){  
  29.             oDiv2.style.display='none';  
  30.         },500);  
  31.     };  
  32. };  
  33. </script>  
  34.   
  35. </head>  
  36.   
  37. <body>  
  38. <div id="div1"></div>  
  39. <div id="div2"></div>  
  40. </body>  
  41. </html>  

文章地址：https://huilang.me/isay/js-learning-the-use-of-timers/

回复本文

您的电子邮箱地址不会被公开。 必填项已用 * 标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif