时钟 ：
所用到得图片 
：
开启定时器
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>
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>
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>
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>