闲扯 Javascript 03 时钟和QQ延时框

时钟：

所用到得图片：

开启定时器

setInterval 间隔型

setTimeout 延时型

停止定时器

clearInterval

clearTimeout

效果思路

获取系统时间

Date对象

getHours、getMinutes、getSeconds

显示系统时间

字符串连接

空位补零

设置图片路径

charAt方法

 <body style="background:#000; color:#FFF; font-size:50px;">

 <div id="div1">

 <img src="data:images/0.png"/>

 <img src="data:images/0.png"/>

 :

 <img src="data:images/0.png"/>

 <img src="data:images/0.png"/>

 :

 <img src="data:images/0.png"/>

 <img src="data:images/0.png"/>

 </div>

 </body>

HTML

 <script>

     function ChangeString(n)

     {

         if(n<10)

         {

              return "0"+n;

             }

             else

             {

                   return ""+n;

                 }

         }

   window.onload=function ()

   {

       var oDiv=document.getElementById('div1');

       var oImg=oDiv.getElementsByTagName('img');

       //var str="120343";

       function hours(){  var date=new Date();

       var str= ChangeString(date.getHours())+ ChangeString(date.getMinutes())+ ChangeString(date.getSeconds());

       for(var i=0;i<str.length;i++)

       {

            oImg[i].src='images/'+str[i]+'.png';

           }

               }

             setInterval(hours,1000);

      hours();

       }

 </script>

QQ延时框：

 <body>

 <div id="div1"></div>

 <div id="div2"></div>

 </body>

HTML

 <style>

  div{ float:left; margin:10px;}

  #div1{ background:#F00; width:60px; height:60px;}

   #div2{ background:#666; width:160px; height:160px; display:none;}

 </style>

CSS

 <script>

     window.onload=function ()

     {

         var oDiv1=document.getElementById('div1');

         var oDiv2=document.getElementById('div2');

         oDiv1.onmouseover=function ()

         {

              oDiv2.style.display='block';

               clearTimeout(time);//必须放下面

               }

         oDiv1.onmouseout=function ()

         {

              timer=setTimeout(function ()

             {

                  oDiv2.style.display='none';

             },500);

             }

         oDiv2.onmouseover=function ()

         {

             clearTimeout(timer);

              oDiv2.style.display='block';

             }

         oDiv2.onmouseout=function ()

         {

             time=setTimeout(function ()

             {

                 oDiv2.style.display='none';

                 },500);

                 }

    }

 </script>

巴特西

闲扯 Javascript 03 时钟和QQ延时框

最新文章

热门文章