(web前端每日一练)用JS制作一个能够在桌面运行的倒计时插件
5月2日,(每日一练)倒计时插件
倒计时插件用于显示例如高考倒计时,国庆倒计时,母亲节倒计时等,本文将展现,如何使用JavaScript语言书写一个倒计时程序
每日一练要求:
题目难度容易,请在5分钟时间内作答并在浏览器中水平居中显示:
图例如下:
使用定时器,每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指日可待!