使用原生JS完成倒计时功能(JS部分)
结构部分自己完成。上码
function getInterval(start, end) {
var day, hour, minute, second, interval;
//用后面的时间减去前面的时间,后将低单位转换为高单位
interval = end - start;
//毫秒转秒,1000毫秒=1秒
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
}
}
或者
$(function() {
var date1 = new Date(); //开始时间
var temper = "2021-11-1 22:00:00";
var date2 = new Date(temper.replace(/-/, "/")); //结束时间
var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
var intDiff = parseInt(date3 / 1000); //倒计时总秒数量
function timer(intDiff) {
window.setInterval(function() {
var day = 0,
hour = 0,
minute = 0,
second = 0; //时间默认值
if (intDiff > 0) {
day = Math.floor(intDiff / (60 * 60 * 24));
hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
}
if (minute <= 9) minute = '0' + minute;
if (second <= 9) second = '0' + second;
// 更改天、时、分、秒的数值
$('#day_show').html(day + "天");
$('#hour_show').html('<s id="h"></s>' + hour + '时');
$('#minute_show').html('<s></s>' + minute + '分');
$('#second_show').html('<s></s>' + second + '秒');
intDiff--;
}, 1000);
}
$(function() {
timer(intDiff);
});
});
思路:
1、获取到当前的时间;
2、获取倒计时的截止时间;
3,用截止时间减去当前时间;
4、将得到的差值由毫秒数转换为秒、分、时、日
(1000毫秒=1秒)
5、最后return的到时分秒即可;
PS:计算机获取到的时间是以毫秒为单位的,所以一定要注意转换。