<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态时钟</title>
</head>
<body>
<section>
<section class="yeall" id="yeall">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
</section>
<section class="date" id="date">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
</section>
</section>
</body>
</html>
<script>
//获取装年月日的盒子
let yeall=document.getElementById('yeall');
//获取年月日的图片标签
let yallimg=yeall.getElementsByTagName('img');
//获取时分秒的盒子
let date=document.getElementById('date');
//获取时分秒的图片标签
let dateimg=date.getElementsByTagName('img');
let day=['日','一','二','三','四','五','六']
//小于10的时候在前面不0
function n(n) {
if(n<10){
return '0'+n
}else{
return ''+n
}
}
let Odate=new Date()
//获取星期
let days=Odate.getDay()
//创建h2
let h2=document.createElement('h2')
//获取的星期是阿拉伯数字数组的长度刚好等于
h2.innerText='星期'+day[days]
date.appendChild(h2)
function time() {
//时间对象
let Odate=new Date()
//获取年月日
let yallstr=Odate.getFullYear()+n(Odate.getMonth())+n(Odate.getDate());
console.log(yallstr)
//获取时分秒
let datestr=n(Odate.getHours())+n(Odate.getMinutes())+n(Odate.getSeconds())
console.log(datestr)
//遍历时间数组
for(let i=0;i<yallstr.length;i++){
//img路径等于时间
yallimg[i].src='./img/'+yallstr[i]+'.png'
}
for(let i=0;i<datestr.length;i++){
//img路径等于时间
dateimg[i].src='./img/'+datestr[i]+'.png'
}
}
time()
setInterval(time,1000)
</script>
1948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
