注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery+CSS3实现数字时钟

jQuery插件 fishcity 1977浏览

这是用jqueryCSS3制作的简单数字时钟,代码简练,使用性强,兼容主流浏览器,请注意这是需要html5支持的,本代码在IE10,火狐,搜狗,谷歌下测试通过,IE10以下的引入html5的支持,理论上是可以的,但具体以实际情况为准。下面我们来看下如何使用这款美丽简洁的数字时钟。

引入核心JS

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<!--[if IE]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

上面的html5.js请在head部分引入,这是为了使IE支持html5而特别加入的。

创建html

<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>

创建CSS

.container {width: 960px; margin: 0 auto; overflow: hidden;}
.clock {width:800px; margin:0 auto; padding:30px; border:1px solid #333; color:#fff; }
#Date { font-family:Arial, Helvetica, sans-serif;font-size:36px; text-align:center; text-shadow:0 0 5px #00c6ff; }
ul { width:800px; margin:0 auto; padding:0px; list-style:none; text-align:center; }
ul li { display:inline; font-size:10em; text-align:center; font-family: Arial, Helvetica, sans-serif; text-shadow:0 0 5px #00c6ff; }
#point { position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padding-left:10px; padding-right:10px; }
@-webkit-keyframes mymove 
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }	
}
@-moz-keyframes mymove 
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }	
}

以上的CSS可以自行修改,以适用于自己的设计样式。#point后面的CSS为CSS3的新属性,主要功能是实现两个时中冒号的淡入淡出效果。

写入JS,实现时钟

$(document).ready(function() {
// 建立月份与星期的数组,便于调用
var monthNames = [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" ]; 
var dayNames= ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]

// 创建一个日期对象
var newDate = new Date();
// 根据日期对象延申出当前时间
newDate.setDate(newDate.getDate());
// 输出年月日
$('#Date').html( newDate.getFullYear()+ "年 " +  monthNames[newDate.getMonth()] + ' ' +newDate.getDate() + '日 '  + dayNames[newDate.getDay()] );

setInterval( function() {
	//创建时间对象,并取得当前时间的秒数值
	var seconds = new Date().getSeconds();
	// 如果秒为个位数则在前面加个0
	$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
	},1000);
	
setInterval( function() {
	// 取得当前时间的分钟数值
	var minutes = new Date().getMinutes();
	// 分钟数小于10则在前面加上0
	$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
    },1000);
	
setInterval( function() {
	// 妈得当前时间的小时数值
	var hours = new Date().getHours();
	// 如果小时数值小于10则在前面加个0
	$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
    }, 1000);
	
});

至此,一个简单而实用的时钟就完成了,更加具体请参考实例。

转载请注明:jQ酷 » jquery+CSS3实现数字时钟

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。