jQuery+CSS3实现数字时钟Digital Clock


源码下载 在线演示 jQuery+CSS3实现数字时钟Digital Clock显示了日期、时、分、秒。 代码: <div class="clock"><div id="Date"></div> <ul> <li...

    源码下载     在线演示

      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>
标签:

相关资讯

CSS3切角选项卡tabs

CSS3切角选项卡tabs

源码下载 在线演示 今天你将学习如何创建使用CSS3渐变技术实现切角的选项卡tabs。 HTML <ul id="tabs"> <li><a href="#" title="tab1">One</a></li>

CSS3+jQuery实现文件夹选项卡

CSS3+jQuery实现文件夹选项卡

源码下载 在线演示 使用CSS3实现文件夹效果,结合jquery实现选项卡切换效果。 HTML <ul id="tabs"> <li><a href="#" name="tab1">One</a></li> <li

jQuery+CSS3动画的水平组合布局

jQuery+CSS3动画的水平组合布局

点击进入详细教程及源码下载 在线演示 今天在本教程中,我们要创建水平的组合布局网站酷悬停效果。使用CSS3动画和过渡效果,以及一些jQuery来复制图像平移

CSS伪类的动画和过渡效果应用

CSS伪类的动画和过渡效果应用

    本文中的在线演示很好的展示了CSS伪类来处理动画和过渡效果的独特之处,相信感兴趣的朋友肯定会觉得非常有趣的。   浏览器兼容: FirefoxIE10最新版本chrome   

jQuery+CSS3动画框架magic

jQuery+CSS3动画框架magic

源码下载 在线演示 Magic是一个有许多动画CSS3框架。简单易用,很多动画是跨浏览器兼容的。 代码: <link rel="stylesheet" href="yourpath/magic.css"> $('.

使用CSS3的褪色和动画效果构建消息提醒框

使用CSS3的褪色和动画效果构建消息提醒框

现代Web设计技术允许开发者快速实现大多数浏览器支持的动画。我想警告消息是很常见的,因为默认的JavaScript警告框的样式往往(与你自己设计的漂亮样式)很不协调很囧。

一个简单的CSS3文字动画插件textillate

一个简单的CSS3文字动画插件textillate

     Textillate.js 结合了强大的库提供了应用CSS3动画的任何文本的插件。 Textillate.js是可以非常简单固定头,以及令人惊讶的的强大animate.css 各 lettering.js库。

使用jQuery和CSS3创建Android导航

使用jQuery和CSS3创建Android导航

当玩Galaxy Tab的花哨Android的导航。点击箭头形象应用程序图标会弹出,这不仅仅是精美的动画图标也垂直旋转的3D风格。今天教程教大家如何使用jQuery和CSS3创建Andr

CSS3+jQuery制作灯箱画廊

CSS3+jQuery制作灯箱画廊

在线演示 在本教程中,我们将创建一个真棒图像画廊,利用最新的CSS3和jQuery技术。该脚本将能够扫描Web服务器上的一个文件夹中的图像,并围绕它建立一个完整的拖放li

方向感知CSS3和jQuery的悬停效果

方向感知CSS3和jQuery的悬停效果

     在今天的Tip中,我们将向您展示如何使用一些CSS3的特效和jQuery创建一个方向感知悬停效果。我们的想法是有一点点的覆盖顶部的一些缩略图的方向,我们就来用鼠标在幻