demo3用setInterval()方法做一个节日倒计时

最新推荐文章于 2023-04-09 17:38:26 发布

原创

最新推荐文章于 2023-04-09 17:38:26 发布 · 431 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#setInterval() #倒计时 #数字转图片

本文介绍如何利用JavaScript的setInterval()方法制作一个节日倒计时器，包括计算倒计时天数、小时、分钟和秒数，以及将时间显示为图片样式的方法。重点在于日期的正确表示和倒计时逻辑的实现。

周末研究了一下setInterval()方法，打算做一个倒计时器，今天早上感觉到位了，将定时器做出来了…

做这个倒计时一共需要解决三个问题：
1、倒计时距离2019-10-1国庆小长假还有多少天多少小时多少分多少秒？
（tip:两个日期可以相减结果是毫秒）
2、时间倒计时如何实现？
3、如何将时间换成图片样式？(这一步可做可不做，如果想让页面变得好看一点就可以做，图片可以在网上找)

下面开始解决第一个问题：
倒计时距离2019-10-1国庆小长假还有多少天多少小时多少分多少秒？
其中：var date2 = new Date(“2019-10-1”)；
这里日期写10-1和10-01，是有很大区别的，大家可以去浏览器跑程序试一下，设置时间写2019-10-1，获取的时间为2019-10-1 00:00:00 ；若写2019-10-01，获取的时间为2019-10-01 08:00:00；按照习惯，建议大家写2019-10-1；

var date1 = new Date();
var date2 = new Date("2019-10-1");
var count = parseInt((date2 - date1)/1000);//两个时间可以相减,减出来的时间为毫秒,将毫秒转化为秒
var newday = parseInt(count / 60 / 60 / 24); //计算天数
var newhour = parseInt(count / 60 / 60 % 24);
var newmin = parseInt(count / 60 / 60 % 24);
var newsec = parseInt(count % 60);