<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="background: black;color: white;font-size: 30px;">
<span id="year">00</span>
年
<span id="month">00</span>
月
<span id="date">00</span>
日
星期
<span id="day">0</span>
<span id="hours">00</span>
:
<span id="minutes" >00</span>
:
<span id="seconds" >00</span>
<script>
//1)获取到盒子的id
var year = document.getElementById("year");
month = document.getElementById("month");
date = document.getElementById("date");
day = document.getElementById("day");
hours = document.getElementById("hours");
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
//2)改变盒子内的文本
function fn(){
var date=new Date();
year.innerHTML = time(date.getFullYear());
month.innerHTML = time(date.getMonth()+1);
date.innerHTML = time(date.getDate());
day.innerHTML = time(date.getDay());
hours.innerHTML = time(date.getHours());
minutes.innerHTML = time(date.getMinutes());
seconds.innerHTML = time(date.getSeconds());
}
//3)因为有动的效果,所以写入定时器操作(改变)
setInterval(function() {
fn();
}, 1000)
//4)>如果时间是1,2,3....应该变为01,02,03
function time(str){
if(str<10) {
return "0" +str;
}else{
return str;
}
}
//5)刷新页面,出现00:00:00是定时器的原因,因为定时器是1000毫秒
//才会改变文本内容,所以在一刷新页面时就要调用fn函数来解决此问题
fn();
</script>
</body>
</html>
JavaScript日期对象——【小案例】钟表案例
最新推荐文章于 2022-09-29 20:38:13 发布