5月2日，（每日一练）倒计时插件

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

每日一练要求：

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

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

图例如下:

<每日一练分析>

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

如：new Date(2022-10-01)或new Date(2022，9，1)

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

示例如下：（本文将采用数学方法）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.center {text-align: center;}
</style><body><div class="center"><h1>2022年国庆节倒计时</h1><h2 id="info"></h2></div><script>//定时器更新时间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');}</script>
</body></html>

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

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

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

每日一练结束语

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

全民Javascript指日可待！

（web前端每日一练）用JS制作一个能够在桌面运行的倒计时插件相关推荐

好程序员web前端分享用CSS和JS打造一个简单的图片编辑器
本文主要是利用 CSS的 filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节. CSS filter 我们首先来探讨一下 filter. 首先来说 ...
Web前端——用CSS的常用样式制作一个炫酷的按钮
文章目录笔记:CSS的常用样式炫酷按钮效果实现笔记:CSS的常用样式边框以及弧度样式 border-width:边框的线条宽度. border-style:边框的样式,例如 solid实现 d ...
web前端学习中CSS，JS代码压缩
web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML负责结构,网页想要表达的内容由html书写. CSS负责样式,网 ...
用JS制作一个信息管理平台完整版
前言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
web前端知识集合——javascript基础篇之javascript背景历史和运行环境（一）
前言:温故而知新,可以为长也!万变不离其宗,无论是现在web前端技术衍生出多么优秀,好用的框架,插件,都离不开这门语言的基础知识.掌握各种优秀的框架,插件,只是"善用工具的人",深 ...
使用 Vue.js 制作一个简单的调查问卷平台
使用 Vue.js 制作一个简单的调查问卷平台原文 https://github.com/pramper/Demos/tree/master/Vue-Demos/Questionnaire 主题 ...
使用 ale.js 制作一个小而美的表格编辑器（2）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
使用 ale.js 制作一个小而美的表格编辑器（3）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
使用 ale.js 制作一个小而美的表格编辑器（1）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
使用 ale.js 制作一个小而美的表格编辑器（4）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...

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

5月2日，（每日一练）倒计时插件

每日一练结束语

（web前端每日一练）用JS制作一个能够在桌面运行的倒计时插件相关推荐

最新文章

热门文章