热门关键字:
jquery > jquery教程 > javascript > 分享一款原生JS写的时间插件

分享一款原生JS写的时间插件

3364
作者:管理员
发布时间:2012/11/18 20:41:03
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=182
这款时间特效很实用,看起来就像一个挂历,时间不停的运动,改动也很方便,可根据自己的需求和改变成时间的显示格式,会JS的网友就可以随便的改动,没有任何的难度,支持显示年、月、日、星期、时、分、秒等数据。
 
效果如下:
 
 
代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分享一款原生JS写的时间插件</title>
<style type="text/css">
<!--
	#calendar{width:120px; height:100px; padding:20px 10px; font-size:16px; font-weight:bold; color:#990000; margin:200px auto; background:#000000; color:#fff; text-align:center; line-height:35px;}
-->
</style>
<script type="text/javascript" >
	function run() {
		setInterval("getCalendar()", 500);
	}

	function getCalendar() {
		//新建一个Date对象
		var today = new Date();

		//分別获得年月日
		var year = today.getFullYear();
		var month = today.getMonth() + 1;
		var day = today.getDate();

		//获得星期几
		var weekday = new Array(7);
		weekday[0] = "星期日";
		weekday[1] = "星期一";
		weekday[2] = "星期二";
		weekday[3] = "星期三";
		weekday[4] = "星期四";
		weekday[5] = "星期五";
		weekday[6] = "星期六";

		//获得时分秒
		var hour = today.getHours();
		hour = check(hour);
		var min = today.getMinutes();
		min = check(min);
		var sec = today.getSeconds();
		sec = check(sec);
		document.getElementById("calendar").innerHTML =  year + "年" + month + "月" + day + "日<br />" + "  " + weekday[today.getDay()] + "<br />" + hour + ":" + min + ":" + sec;

		//效果同run()方法
		//setTimeout("getCalendar()", 500);
	}

	function check(x) {
		if (x < 10) {
			x = "0" + x;
		}
		return x;
	}
</script>
</head>
<body onload="run()">
	<div id="calendar"></div>
</body>
</html>



如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:原生JS 时间插件
友荐云推荐