JS使用时间戳实现倒计时

2023-09-22 04:36| 来源: 网络整理| 查看: 265

JS使用时间戳实现倒计时

1、点击按钮开始倒计时

2、获取点击按钮

3、开启定时器，每一秒调用一次，显示实时动态倒计时

3.1 获取当前的时间戳

3.2设置截止的时间戳

3.3获取倒计时的时长

3.4 声明变量保存倒计时的几个时间

3.5如果倒计时小于10，则补'0'

3.6把倒计时渲染到页面

代码实现：

html部分

00天 00时 00分 00秒开始倒计时

js部分

// 获取倒计时按钮 let btn = document.querySelector('.btn') btn.addEventListener('click', function() { //开启定时器 let timeId=setInterval(function() { //获取当前时间戳 var now = +new Date(); //设置截止时间戳 var end = +new Date("2022/1/19 18:53:00"); //倒计时的时长 let time = end - now; //声明变量 d,h,m,s保存倒计时的时间 var d, h, m, s; d = parseInt(time / 1000 / 60 / 60 / 24); h = parseInt(time / 1000 / 60 / 60 % 24); m = parseInt(time / 1000 / 60 % 60); s = parseInt(time / 1000 % 60); // 补'0' d = d < 10 ? '0' + d : d h = h < 10 ? '0' + h : h m = m < 10 ? '0' + m : m s = s < 10 ? '0' + s : s // 将倒计时渲染到每一个span中 document.querySelector('#day').innerHTML = d + "天"; document.querySelector('#house').innerHTML = h + "时"; document.querySelector('#minutes').innerHTML = m + "分"; document.querySelector('#seconds').innerHTML = s + "秒"; if(time

【本文地址】

公司简介

联系我们