标签:
HTML结构
<div id="clockdiv"> Days: <span class="days"></span><br> Hours: <span class="hours"></span><br> Minutes: <span class="minutes"></span><br> Seconds: <span class="seconds"></span> </div>
JS代码
// 给定一结束时间
var timeline = ‘Mon Aug 15 2016 19:09:18 GMT+0800‘;
// 获取时间函数 / Date.parse将时间转换成毫秒数
function getTime(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date()); //转换成毫秒
var second = Math.floor(t/1000 % 60); //转换成秒
var minutes = Math.floor(t/1000/60 % 60); //转换成分钟
var hours = Math.floor(t/1000/60/60 % 24); //转换成小时
var day = Math.floor(t/1000/60/60/24); //转换成天
return {
‘total‘: t,
‘second‘: second,
‘minutes‘: minutes,
‘hours‘: hours,
‘day‘: day
} //把时间全部返回
}
//时间显示成内容函数
function clockfn(id,endtime) {
function getHtml() {
var t = getTime(endtime); //活的时间函数中的时间
var clock = document.getElementById(id),
daySpan = clock.querySelector(‘.days‘),
hoursSpan = clock.querySelector(‘.hours‘),
minutesSpan = clock.querySelector(‘.minutes‘),
secondsSpan = clock.querySelector(‘.seconds‘);
//用时间赋值到倒计时内容
daySpan.innerHTML = t.day;
hoursSpan.innerHTML = t.hours;
minutesSpan.innerHTML = t.minutes;
secondsSpan.innerHTML = t.second;
//倒计时到, 清楚定时器
if(t.total <= 0) {
clock.innerHTML = ‘时间到‘;
timer = null;
}
}
//先云清一次内容 / 不然定时器要1秒钟才开始运行,才会显示内容
getHtml();
var timer = setInterval(getHtml, 1000);
}
clockfn(‘clockdiv‘,timeline); //运行
一个简单的倒计时, 简单的逻辑就是获得分/秒/等的时间 然后将里面的结构替换成获取的时间 用定时器控制其显示隐藏。
标签:
原文地址:http://www.cnblogs.com/htzan/p/5774091.html