<style>
.time-item {
width: 430px;
height: 45px;
margin: 0 auto;
}
.time-item strong {
background: orange;
color: #fff;
line-height: 49px;
font-size: 36px;
font-family: Arial;
padding: 0 10px;
margin-right: 10px;
border-radius: 5px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
.time-item>span {
float: left;
line-height: 49px;
color: orange;
font-size: 32px;
margin: 0 10px;
font-family: Arial, Helvetica, sans-serif;
}
.title {
width: 260px;
height: 50px;
margin: 200px auto 50px auto;
}
</style>
<body>
<h1 class="title">距离圣诞节，还有</h1>
<div class="time-item">
<span><span id="day">00</span>天</span>
<strong><span id="hour">00</span>时</strong>
<strong><span id="minute">00</span>分</strong>
<strong><span id="second">00</span>秒</strong>
</div>
<script>
// 获取目标时间的时间戳
var endTime = (new Date('2019-12-25')).valueOf();
var spanDay = my$('day');
var spanHour = my$('hour');
var spanMinute = my$('minute');
var spanSecond = my$('second');
// 获取时间差
function getInterval(start, end) {
var interval = end - start;
interval /= 1000;
var day, hour, minute, second;
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
}
}
//先初始化执行一次
countdown();
// countdown 这里不能写成countdown(),这个是函数调用,会立即执行
var timeId = setInterval(countdown, 1000);
function countdown() {
// 获取当前时间的时间戳
var startTime = (new Date()).valueOf();
var interval = getInterval(startTime, endTime);
//处理innerText兼容
setInnerText(spanDay, interval.day);
setInnerText(spanHour, interval.hour);
setInnerText(spanMinute, interval.minute);
setInnerText(spanSecond, interval.second);
}
</script>
</body>
网友评论