JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > jQuery+CSS3实现数字时钟Digital Clock

jQuery+CSS3实现数字时钟Digital Clock


    源码下载     在线演示

      jQuery+CSS3实现数字时钟Digital Clock显示了日期、时、分、秒。
代码:
<div class="clock"><div id="Date"></div>  <ul>      <li id="hours"></li>      <li id="point">:</li>      <li id="min"></li>      <li id="point">:</li>      <li id="sec"></li>  </ul></div> <script type="text/javascript">$(document).ready(function() {// Create two variable with the names of the months and days in an arrayvar monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"] // Create a newDate() objectvar newDate = new Date();// Extract the current date from Date objectnewDate.setDate(newDate.getDate());// Output the day, date, month and year$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear()); setInterval( function() {    // Create a newDate() object and extract the seconds of the current time on the visitor's    var seconds = new Date().getSeconds();    // Add a leading zero to seconds value    $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);    },1000); setInterval( function() {    // Create a newDate() object and extract the minutes of the current time on the visitor's    var minutes = new Date().getMinutes();    // Add a leading zero to the minutes value    $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);    },1000); setInterval( function() {    // Create a newDate() object and extract the hours of the current time on the visitor's    var hours = new Date().getHours();    // Add a leading zero to the hours value    $("#hours").html(( hours < 10 ? "0" : "" ) + hours);    }, 1000);});</script>

【jQuery+CSS3实现数字时钟Digital Clock】相关文章

1. jQuery+CSS3实现数字时钟Digital Clock

2. jQuery+CSS3实现数字时钟Digital Clock

3. 使用jQuery和CSS3实现一个数字时钟

4. 使用jQuery和CSS3实现一个数字时钟

5. 使用FlipClock.js 制作精美的定时器

6. 10个 jQuery 插件用于在你的网站中实现数据可视化

7. bookblock:可帮助你生成翻页效果的jQuery插件

8. bookblock:可帮助你生成翻页效果的jQuery插件

9. CSS3教程:background-clip和background-origin

10. CSS3+jQuery的一个丰富多彩时钟

本文来源:https://www.51html5.com/a1217.html

点击展开全部

﹝jQuery+CSS3实现数字时钟Digital Clock﹞相关内容

其它栏目

也许您还喜欢