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

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

 

演示

 

 

XML/HTML Code

<div id="clock_hou" class="clock_container">
            <div class="lbl">Houston, TX, USAdiv>
            <div class="clockHolder">
                <div class="rotatingWrapper"><img class="hour" src="images/clock_hour.png" />div>
                <div class="rotatingWrapper"><img class="min" src="images/clock_min.png" />div>
                <div class="rotatingWrapper"><img class="sec" src="images/clock_sec.png" />div>
                <img class="clock" src="images/clock_face.png" />
            div>
            <div class="digital">
                <span class="hr">span><span class="minute">span> <span class="period">span>
            div>
        div>

        <div id="clock_dc" class="clock_container">
            <div class="lbl">Washington, DC, USAdiv>
            <div class="clockHolder">
                <div class="rotatingWrapper"><img class="hour" src="images/clock_hour.png" />div>
                <div class="rotatingWrapper"><img class="min" src="images/clock_min.png" />div>
                <div class="rotatingWrapper"><img class="sec" src="images/clock_sec.png" />div>
                <img class="clock" src="images/clock_face.png" />
            div>
            <div class="digital">
                <span class="hr">span><span class="minute">span> <span class="period">span>
            div>
        div>

        <div id="clock_beijing" class="clock_container">
            <div class="lbl">Beijingdiv>
            <div class="clockHolder">
                <div class="rotatingWrapper"><img class="hour" src="images/clock_hour.png" />div>
                <div class="rotatingWrapper"><img class="min" src="images/clock_min.png" />div>
                <div class="rotatingWrapper"><img class="sec" src="images/clock_sec.png" />div>
                <img class="clock" src="images/clock_face.png" />
            div>
            <div class="digital">
                <span class="hr">span><span class="minute">span> <span class="period">span>
            div>
        div>

 

JavaScript Code

  </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">    $(document).ready(<span class="keyword" style="color:#0000FF;font-weight:bold;">function</span><span>(){  </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">        $(<span class="string" style="color:#0000FF;">'#clock_hou'</span><span>).jClocksGMT({offset: </span><span class="string" style="color:#0000FF;">'-5'</span><span>, hour24: </span><span class="keyword" style="color:#0000FF;font-weight:bold;">true</span><span>});  </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">        $(<span class="string" style="color:#0000FF;">'#clock_dc'</span><span>).jClocksGMT({offset: </span><span class="string" style="color:#0000FF;">'-4'</span><span>, digital: </span><span class="keyword" style="color:#0000FF;font-weight:bold;">false</span><span>});  </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">        $(<span class="string" style="color:#0000FF;">'#clock_beijing'</span><span>).jClocksGMT({offset: </span><span class="string" style="color:#0000FF;">'+8'</span><span>});  </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">    });  </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">

 

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