元旦倒计时（JS计时器） |
您所在的位置：网站首页 › 新年钟声倒计时和时间的关系 › 元旦倒计时（JS计时器） |
元旦倒计时（JS计时器）
|
通过js编写一个距离2022年元旦还剩多少天的计时器 首先我们计算出2022-1-1日距离今天还有多少天 代码如下 var nowTimer = +new Date(); //现在时间的毫秒数 var valueTimer = +new Date("2022-1-1 12:00"); //用户输入时间毫秒数 var timer = (valueTimer - nowTimer) / 1000; //倒计时秒数 var d = parseInt(timer / 60 / 60 / 24); d = d < 10 ? "0" + d : d;//天数少于十天前面加0（优化页面） var h = parseInt(timer / 60 / 60 % 24); h = h < 10 ? "0" + h : h;//小时少于十前面加0 var m = parseInt(timer / 60 % 60); m = m < 10 ? "0" + m : m;//分钟少于十前面加0 var s = parseInt(timer % 60); s = s < 10 ? "0" + s : s;//秒数少于十前面加0 document.write(d + "天" + h + "时" + m + "分" + s + "秒");接着将他封装到函数里面，并添加定时器，让它进行倒计时 完整代码如下 function countDown() { document.body.innerHTML = '';//清空页面内容 var nowTimer = +new Date(); //现在时间的毫秒数 var valueTimer = +new Date("2022-1-1 12:00"); //用户输入时间毫秒数 var timer = (valueTimer - nowTimer) / 1000; //倒计时秒数 var d = parseInt(timer / 60 / 60 / 24); d = d < 10 ? "0" + d : d;//天数少于十天前面加0（优化页面） var h = parseInt(timer / 60 / 60 % 24); h = h < 10 ? "0" + h : h;//小时少于十前面加0 var m = parseInt(timer / 60 % 60); m = m < 10 ? "0" + m : m;//分钟少于十前面加0 var s = parseInt(timer % 60); s = s < 10 ? "0" + s : s;//秒数少于十前面加0 document.write(d + "天" + h + "时" + m + "分" + s + "秒"); } countDown(); setInterval(countDown, 1000);效果如下
当然可以进行页面优化，这里只是告诉大家一个实现原理。 如有错误之处，敬请指正！ |
【本文地址】
今日新闻 |
推荐新闻 |