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
6. 10个 jQuery 插件用于在你的网站中实现数据可视化
7. bookblock:可帮助你生成翻页效果的jQuery插件
8. bookblock:可帮助你生成翻页效果的jQuery插件
9. CSS3教程:background-clip和background-origin
本文来源:https://www.51html5.com/a981.html
上一篇:CSS3切角选项卡tabs
下一篇:CSS3+jQuery实现文件夹选项卡