这款
时间特效很实用,看起来就像一个挂历,时间不停的运动,改动也很方便,可根据自己的需求和改变成时间的显示格式,会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 时间插件