共计 1911 个字符,预计需要花费 5 分钟才能阅读完成。
很多场合用到倒计时,比方年会,生日,约会啊 … 废话不多说上代码
效果图:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{background-color: #2a3852;}
#box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 300px;
}
#box h1 {
letter-spacing: 3px;
font-weight: 500;
color: #fff;
}
#time {
display: flex;
flex-direction: row;
line-height: 50px;
}
#time span {
font-size: 20px;
color: #fff;
}
#time strong {
text-align: center;
margin-left: 20px;
background-color: #3f5174;
border-radius: 10px;
width: 70px;
height: 50px;
display: block;
}
</style>
</head>
<body>
<div id="box">
<h1> 间隔国庆节,还有 </h1>
<div id="time">
<span id="day">** 天 </span>
<strong><span id="hour">** 时 </span></strong>
<strong><span id="minute">** 分 </span></strong>
<strong><span id="second">** 秒 </span></strong>
</div>
</div>
<script src="common.js"></script>
<script>
var daySpan = my$('day');
var hourSpan = my$('hour');
var minuteSpan = my$('minute');
var secondSpan = my$('second');
TimeRow();
setInterval(TimeRow, 1000)
function TimeRow() {var end = new Date('2020-10-1 0:0:0');
var start = new Date();
var time = getInterval(start, end);
setInnerText(daySpan, time.day+'天');
setInnerText(hourSpan, time.hour+'时');
setInnerText(minuteSpan, time.minute+'分');
setInnerText(secondSpan, time.second+'秒');
}
</script>
</body>
</html>
common.js
function my$(id) {return document.getElementById(id);
}
// 解决 innerText 和 textContent 的兼容性问题
// 设置标签之间的内容
function setInnerText(element, content) {
// 判断以后浏览器是否反对 innerText
if (typeof element.innerText === 'string') {element.innerText = content;} else {element.textContent = content;}
}
function getInterval(start, end) {
// 两个日期对象,相差的毫秒数
var interval = end - start;
// 求 相差的天数 / 小时数 / 分钟数 / 秒数
var day, hour, minute, second;
// 两个日期对象,相差的秒数
// interval = interval / 1000;
interval /= 1000;
day = Math.round(interval / 60 / 60 / 24);
hour = Math.round(interval / 60 / 60 % 24);
minute = Math.round(interval / 60 % 60);
second = Math.round(interval % 60);
return {
day: day,
hour: hour,
minute: minute,
second: second
}
}
正文完
发表至: javascript
2020-09-12