> 文档中心 > (web前端每日一练)用JS制作一个能够在桌面运行的倒计时插件

(web前端每日一练)用JS制作一个能够在桌面运行的倒计时插件


5月2日,(每日一练)倒计时插件

倒计时插件用于显示例如高考倒计时,国庆倒计时,母亲节倒计时等,本文将展现,如何使用JavaScript语言书写一个倒计时程序


每日一练要求:

  1. 天数小时,分钟, 秒准确计算
  2. 不得有分,小时,天数上的变更误差
  3. 倒计时可以动态更新并精确到每分每秒

题目难度容易,请在5分钟时间内作答并在浏览器中水平居中显示:

图例如下:

82cb6ddcde144ae798e176f03081ab98.png


使用定时器,每1000ms进行更新,合理使用new Date 日期对象

如:new Date(2022-10-01)或new Date(2022,9,1)

如何将时间戳转化为天数,分钟,小时,及秒数。(可使用多种方法)

示例如下:(本文将采用数学方法)

                Document    .center { text-align: center;    }    

2022年国庆节倒计时

//定时器更新时间 setInterval(function () { var nowTime = new Date(); var targetTime = new Date('2022-10-01'); //得到时间戳 var timeStamp = targetTime - nowTime; //方法一:数学方法 //天数 var day = parseInt(timeStamp / (1000 * 60 * 60 * 24)); //小时 var hour = parseInt(timeStamp % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)); //分钟 var minute = parseInt(timeStamp % (1000 * 60 * 60) / (1000 * 60)); //秒 var second = parseInt(timeStamp % (1000 * 60) / 1000); var date = document.getElementById('info'); //向info盒子中添加倒计时 date.innerText = ('还剩' + day + '天' + hour + '小时' + minute + '分钟' + second + '秒!'); }, 1000); window.onload = function() { Sticker.init('.sticker'); }

文章末尾————如何将JavaScript实现的插件在桌面上运行,其实是没有必要的,

如果想在桌面上运行,Python,Ruby,Lua等语言是更加合适的

Javascript是一门针对浏览器的语言,所以小伙伴们只需要学会如何在浏览器中正确显示即可!

每日一练结束语

如果在定时器,日期对象,JS面向对象等方面还有疑问的,欢迎大家私信向我留言讨论!

全民Javascript指日可待!

素描网