在网页上做一个时钟效果,动态时钟效果,每个一秒钟获取一次时间渲染到网页
一、css部分
div{
width: 400px;
height: 50px;
text-align: center;
margin: 0 auto;
padding-top: 30px;
background-color: olive;
color: aliceblue;
font-size: 17px;
border-radius: 100px;
}
二、body部分
<body>
<div id="cont" >
</div>
<script>
var timer=setInterval(()=>{
var now=new Date()
console.log(now.toLocaleString())
var year=now.getFullYear()
var month=now.getMonth()+1
var date=now.getDate()
var hours=now.getHours()
var minutes=now.getMinutes()
var seconds=now.getSeconds()
var str=`当前时间是:${
year}年${
month<10? '0'+month:month}月${
date<10?'0'+date:date}日 ${
hours}时:${
minutes}分:${
seconds}秒`
cont.innerHTML=str
},1000)
</script>
</body>