JS 倒计时功能实现 天 时 分 秒,可用于秒杀倒计时

Javascript 926 0 2022-10-26

JS 倒计时功能实现 天 时 分 秒,可用于秒杀倒计时

JavaScript 设计一个倒计时显示牌,实现方法:用结束时间减去现在时,获取时间差,再利用数学方法从时间差中分别获取日,时、分、秒等信息,最后通过定时器设置每秒执行一次,实现实时更新。

【操作步骤】

1) 使用 new Date() 获取当前时间,使用 new 调用一个带有参数的 Date 对象,定义结束的时间,endtime=new Date(2020/8/8)。使用 getTime() 方法获取现在时和结束时距离 1970 年 1 月 1 日的毫秒数。然后,求两个时间差。


把时间差转换为天数、小时数、分钟数和秒数显示。主要是用%取模运算。得到距离结束时间的毫秒数(剩余毫秒数),除以 1000 得到剩余秒数,再除以 60 得到剩余分钟数,再除以 60 得到剩余小时数。除以 24 得到剩余天数。剩余秒数 lefttime/1000 模 60 得到秒数,剩余分钟数 lefttime/(1000 * 60) 模 60 得到分钟数,剩余小时数 lefttime/(1000 * 60 * 60) 模 24 得到小时数。

代码如下:

var showtime = function () {
    var nowtime = new Date(),  //获取当前时间
        endtime = new Date("2020/8/8");  //定义结束时间
    var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
        leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
        lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
        leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
        lefts = Math.floor(lefttime/1000%60);  //计算秒数
    return leftd + "天" + lefth + ":" + leftm + ":" + lefts;  //返回倒计时的字符串
}


//使用定时器设计每秒钟调用倒计时函数一次。
var div = document.getElementById("showtime");
setInterval (function () {
    div.innerHTML = showtime();
}, 1000);  //反复执行函数本身

运行效果:

文章来源:http://c.biancheng.net/view/5798.html

上一篇:JS常用截取字符串相关函数slice/substring/substr/indexOf/lastIndexOf/split/join/concat/charAt

下一篇:js实现数字位数不足时补零,补左补右自己决定

讨论数量:1

天涯网魂 3 杠 5 星2022-11-01 09:46:10

如发现倒计时的在安卓是正常的,在 ios 却出现问题。。。

那可能是时间格式问题,因为yyyy-mm-dd hh:mm:ss 这种格式在苹果手机上无法识别,显示成NAN,所以需要转成yyyy/mm/dd hh:mm:ss 这种格式。

转换方法如下:

let endTime=new Date('2022-11-01 10:10:10'.replace(/-/g,'/')).getTime();

请先登录再发表讨论。 2024-11-24

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链