JS实现倒计时功能

资料来源：网络整理时间：2023/2/17 15:10:55 共计：3614 浏览

本示例利用 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;  //返回倒计时的字符串
}

2) 使用定时器设计每秒钟调用倒计时函数一次。

var div = document.getElementById("showtime");
setInterval (function () {
    div.innerHTML = showtime();
}, 1000);  //反复执行函数本身

显示结果如下：

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：PyCharm下载和安装教程（包含配置Python解释器） | ·下一条：Java字符串拼接（连接）