闲扯 Javascript 03 时钟和QQ延时框

时钟：

所用到得图片：

开启定时器

setInterval 间隔型

setTimeout 延时型

停止定时器

clearInterval

clearTimeout

效果思路

获取系统时间

Date对象

getHours、getMinutes、getSeconds

显示系统时间

字符串连接

空位补零

设置图片路径

charAt方法

 1 <body style="background:#000; color:#FFF; font-size:50px;">
 2 
 3 <div id="div1">
 4 <img src="images/0.png"/>
 5 <img src="images/0.png"/>
 6 :
 7 <img src="images/0.png"/>
 8 <img src="images/0.png"/>
 9 :
10 <img src="images/0.png"/>
11 <img src="images/0.png"/>
12 </div>
13 </body>

HTML

 1 <script>
 2    
 3     function ChangeString(n)
 4     {
 5         if(n<10)
 6         {
 7              return "0"+n;
 8             }
 9             else
10             {
11                   return ""+n;
12                 }
13         }
14    
15   window.onload=function ()
16   {
17       var oDiv=document.getElementById('div1');
18       var oImg=oDiv.getElementsByTagName('img');
19 
20       //var str="120343";
21       function hours(){  var date=new Date();
22       var str= ChangeString(date.getHours())+ ChangeString(date.getMinutes())+ ChangeString(date.getSeconds());
23       
24       for(var i=0;i<str.length;i++)
25       {
26            oImg[i].src='images/'+str[i]+'.png';
27           }
28       
29       
30               }
31             
32             setInterval(hours,1000);
33      hours();
34       }
35       
36 
37 </script>

QQ延时框：

1 <body>
2 
3 <div id="div1"></div>
4 
5 <div id="div2"></div>
6 </body>

HTML

1 <style>
2  div{ float:left; margin:10px;}
3  #div1{ background:#F00; width:60px; height:60px;}
4   #div2{ background:#666; width:160px; height:160px; display:none;}
5  
6 </style>

CSS

 1 <script>
 2     window.onload=function ()
 3     {
 4         var oDiv1=document.getElementById('div1');
 5         var oDiv2=document.getElementById('div2');
 6         
 7         oDiv1.onmouseover=function ()
 8         {
 9              oDiv2.style.display='block';
10               clearTimeout(time);//必须放下面
11               }
12         oDiv1.onmouseout=function ()
13         {
14             
15             
16              timer=setTimeout(function ()
17             {
18                  oDiv2.style.display='none';
19             },500);
20             
21             }
22         
23         
24         oDiv2.onmouseover=function ()
25         {
26             clearTimeout(timer);
27              oDiv2.style.display='block';
28             }
29             
30         oDiv2.onmouseout=function ()
31         {
32             time=setTimeout(function ()
33             {
34                 oDiv2.style.display='none';
35                 },500);
36                 }
37    }
38 
39 </script>