首页>>Jquery文字>>同时显示世界各地时间的会走动的时钟(2013-12-20)

同时显示世界各地时间的会走动的时钟

同时显示世界各地时间的会走动的时钟
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="clock_hou" class="clock_container">  
  2.             <div class="lbl">Houston, TX, USA</div>  
  3.             <div class="clockHolder">  
  4.                 <div class="rotatingWrapper"><img class="hour" src="images/clock_hour.png" /></div>  
  5.                 <div class="rotatingWrapper"><img class="min" src="images/clock_min.png" /></div>  
  6.                 <div class="rotatingWrapper"><img class="sec" src="images/clock_sec.png" /></div>  
  7.                 <img class="clock" src="images/clock_face.png" />  
  8.             </div>  
  9.             <div class="digital">  
  10.                 <span class="hr"></span><span class="minute"></span> <span class="period"></span>  
  11.             </div>  
  12.         </div>  
  13.           
  14.         <div id="clock_dc" class="clock_container">  
  15.             <div class="lbl">Washington, DC, USA</div>  
  16.             <div class="clockHolder">  
  17.                 <div class="rotatingWrapper"><img class="hour" src="images/clock_hour.png" /></div>  
  18.                 <div class="rotatingWrapper"><img class="min" src="images/clock_min.png" /></div>  
  19.                 <div class="rotatingWrapper"><img class="sec" src="images/clock_sec.png" /></div>  
  20.                 <img class="clock" src="images/clock_face.png" />  
  21.             </div>   
  22.             <div class="digital">  
  23.                 <span class="hr"></span><span class="minute"></span> <span class="period"></span>  
  24.             </div>  
  25.         </div>  
  26.           
  27.         <div id="clock_beijing" class="clock_container">  
  28.             <div class="lbl">Beijing</div>  
  29.             <div class="clockHolder">  
  30.                 <div class="rotatingWrapper"><img class="hour" src="images/clock_hour.png" /></div>  
  31.                 <div class="rotatingWrapper"><img class="min" src="images/clock_min.png" /></div>  
  32.                 <div class="rotatingWrapper"><img class="sec" src="images/clock_sec.png" /></div>  
  33.                 <img class="clock" src="images/clock_face.png" />  
  34.             </div>   
  35.             <div class="digital">  
  36.                 <span class="hr"></span><span class="minute"></span> <span class="period"></span>  
  37.             </div>  
  38.         </div>  

 

JavaScript Code
  1. <script>  
  2.     $(document).ready(function(){  
  3.         $('#clock_hou').jClocksGMT({offset: '-5', hour24: true});  
  4.         $('#clock_dc').jClocksGMT({offset: '-4', digital: false});  
  5.         $('#clock_beijing').jClocksGMT({offset: '+8'});  
  6.     });  
  7. </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_184.html