jQuery电子时钟显示效果

<style type="text/css">
body {
	background:#202020;
	font:bold 12px 'Microsoft Yahei',Helvetica,sans-serif;
	margin:0;
	padding:0;
	color:#bbbbbb;
}
a {
	text-decoration:none;
	color:#00c6ff;
}
/* clock */
.clock {
	width:800px;
	margin:0 auto;
	padding:30px;
	border:1px solid #333;
	color:#fff;
	margin-top:50px;
}
.clock #Date {
	font-family:'Microsoft Yahei',Arial,Helvetica,sans-serif;
	font-size:36px;
	text-align:center;
	text-shadow:0 0 5px #00c6ff;
}
.clock ul {
	width:800px;
	margin:0 auto;
	padding:0px;
	list-style:none;
	text-align:center;
}
.clock ul li {
	display:inline;
	font-size:10em;
	text-align:center;
	font-family:'Microsoft Yahei',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;
}
}
</style>
<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> 
$(document).ready(function() {

	// 创建两个变量,一个数组中的月和日的名称
	var monthNames = [ "1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月" ]; 
	var dayNames= ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]

	// 创建一个对象newDate()
	var newDate = new Date();
	// 提取当前的日期从日期对象
	newDate.setDate(newDate.getDate());
	//输出的日子,日期,月和年
	$('#Date').html(newDate.getFullYear() + " 年 " + monthNames[newDate.getMonth()] + ' ' + newDate.getDate() + ' 日 ' + dayNames[newDate.getDay()]);

	setInterval( function() {
		// 创建一个对象,并提取newDate()在访问者的当前时间的秒
		var seconds = new Date().getSeconds();
		//添加前导零秒值
		$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
	},1000);
	
	setInterval( function() {
		// 创建一个对象,并提取newDate()在访问者的当前时间的分钟
		var minutes = new Date().getMinutes();
		// 添加前导零的分钟值
		$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
    },1000);
	
	setInterval( function() {
		// 创建一个对象,并提取newDate()在访问者的当前时间的小时
		var hours = new Date().getHours();
		// 添加前导零的小时值
		$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
    }, 1000);
	
}); 
</script>
© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发

请登录后发表评论