您的位置：首页 > Web前端 > JavaScript

使用JavaScript实现制作动态时钟

2017-09-25 23:34 781 查看
1:clock.js

/**
*  动态显示当前时间
*/
function showDateTime(){
var sWeek=new Array("日","一","二","三","四","五","六");  //声明数组存储一周七天
var myDate=new Date(); //获取当天日期
var sYear=myDate.getFullYear(); //获取年
var sMonth=myDate.getMonth()+1; //获取月
var sDate=myDate.getDate(); //获取日
var sDay=sWeek[myDate.getDay()]; //根据得到的数字星期,利用数组转化为星期
var h=myDate.getHours(); //获取小时
var m=myDate.getMinutes(); //获取分钟
var s=myDate.getSeconds(); //获取秒
//输入日期和星期
document.getElementById("date").innerHTML=(sYear+"年"+sMonth+"月"+sDate+"日"+"星期"+sDay+"<br/>");
h = formatTwoDigits(h);  //格式化小时,如果不足两位在前面补0
m = formatTwoDigits(m); //格式化分钟,如果不足两位在前面补0
s = formatTwoDigits(s); //格式化秒钟后,如果不足两位在前面补0
//显示时间
document.getElementById("msg").innerHTML=(h+":"+m+":"+s+"<br/>");
setTimeout("showDateTime()",1000);//每秒执行一次showDateTime函数
}
window.onload=showDateTime;//在整个页面加载完成后执行此函数
//如果输入数是一位数,则在十位上补0
function formatTwoDigits(s) {
if (s<10)
return "0"+s;
else
        return s;
}


2:clock.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作动态时钟</title>
<script type="text/javascript" src="clock.js"></script>
</head>
<body>
<h1 id="date"></h1>
<span id="msg" style="font-size: 30px;background-color: greenyellow;"></span>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航