JavaScript实现时间倒影特效

  用JS+CSS方式实现的时间的倒影效果,代码如下,目前仅在IE9中测试成功,Firefox和chrome中测试还不成功,后续继续探究.先将实现的代码发布如下,也请路过的高手指点一二,不胜感激.

  
  
  
  
  1. <html> 
  2.  
  3. <head> 
  4. <!-- IE中可以执行结果,FireFox和chrome不能够执行该程序 --> 
  5. <title>时间倒影</title> 
  6. <style type="text/css"> 
  7.  .time{ 
  8.   font-family : Comic Sans MS ; 
  9.   font-size : 14px ; 
  10.   font-weight : bold ; 
  11.   color : #00008D ; 
  12.  } 
  13. </style> 
  14. </head> 
  15.  
  16. <body onLoad="init()"> 
  17. <center> 
  18. <h1>时间倒影特效JS实现</h1><hr><br> 
  19.   
  20.   <div id="tim1" style="position:absolute;width:10;height:10;top:100;left:100" class="time"></div> 
  21.   <div id="tim2" style="position:absolute;filter:flipv() alpha(opacity=20);font-style:italic" class="time"></div> 
  22.   
  23.   </center> 
  24.   <script language="javascript"> 
  25.    
  26.    var ctimer; 
  27.     
  28.    function init(){ 
  29.         
  30.        if(document.all){ 
  31.          tim2.style.left = tim1.style.posLeft; 
  32.          tim2.style.top = tim1.style.posTop + tim1.offsetHeight -6; 
  33.          settimes();      
  34.        } 
  35.       
  36.   }   
  37.        
  38.  
  39.    function settimes(){ 
  40.        
  41.       var time = new Date(); 
  42.       hours = time.getHours(); 
  43.       minutes = time.getMinutes(); 
  44.       seconds = time.getSeconds(); 
  45.        
  46.       if(hours<10){ 
  47.        hours = "0"+hours; 
  48.       } 
  49.        
  50.        if(minutes<10){ 
  51.         minutes = "0"+minutes; 
  52.        } 
  53.        if(seconds<10){ 
  54.         seconds = "0"+seconds; 
  55.        } 
  56.       
  57.       tim1.innerHTML = hours + ":" + minutes +":" +seconds 
  58.       tim2.innerHTML = hours + ":" + minutes +":" +seconds 
  59.       ctimer =setTimeout('settimes()',960); 
  60.        
  61.      } 
  62.       
  63.      
  64.   </script> 
  65.    
  66. </body> 
  67. </html> 

 可以直接copy程序,保存为html,htm等网页格式文件直接运行即可.效果图如下.

 

本文出自 “IvanTian” 博客,转载请与作者联系!

你可能感兴趣的:(JavaScript,时钟特效)