JavaScript如何实现动态数字时钟

tangjin

作者

小编给大家分享一下JavaScript如何实现动态数字时钟，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

实现效果

代码实现

<!DOCTYPEhtml>
<htmllang="en">

<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;

}

#box{
width:1000px;
height:300px;
background-image:url(1.jpg);
line-height:300px;
text-align:center;
font-size:50px;
font-weight:500;
margin:100pxauto;

}
</style>

</head>

<body>
<divid="box"></div>
<script>
letbox=document.getElementById('box')

//不足十位补零
letaddZero=val=>val<10?'0'+val:val

//把阿拉伯数字的星期转化为中国汉字的星期//星期映射表
lettrans=val=>{
letobj={
0:'日',
1:'一',
2:'二',
3:'三',
4:'四',
5:'五',
6:'六'
}
returnobj[val]
}
setTime()
//获取时间的方法
functionsetTime(){
lettime=newDate();
letyear=time.getFullYear();//获取年
letmonth=time.getMonth()+1;//获取月（是从0到11，所以我们要给他加1）
letdate=time.getDate();//获取日
letday=time.getDay();//获取星期几(0是星期日)
lethour=time.getHours();//获取小时
letmin=time.getMinutes();//获取分钟
letsec=time.getSeconds();//获取秒

letvalue=year+'年'+addZero(month)+'月'+addZero(date)+'日星期'+trans(day)+''+addZero(hour)+
'时'+addZero(min)+'分'+addZero(sec)+'秒'
//把所有的时间拼接到一起
box.innerText=value
//console.log(value)
//把拼接好的时间插入到页面

}
//让定时器每间隔一秒就执行一次setTime这个方法（这是实现时钟的核心）
setInterval(setTime,1000)
</script>
</body>

</html>

素材