当前位置:网站首页>Page countdown
Page countdown
2022-07-05 05:02:00 【Fierce chicken】
Make a simple web page countdown timer . This countdown can be counted down according to the entered deadline , The entered deadline data will be cached locally (“deadlineDate”)( See the end of the article for the source code )
Native is used here JS Write relevant web page logic , Mainly applied to API Yes
document.getElementById()
: Used to get DOM Element nodes , It is convenient to fill in data to the node and displayWindow.setInterval()
: Used to refresh the displayed countdown data every second . This is the key to realize this countdown functionelem.addEventListener()
: For binding events , Here is only the click event used to bind the reset button- Built-in objects
Date
: Used to get all time-related values
The whole web application is divided into two main parts : Countdown display part and countdown setting part
When you enter this page , If the deadline is not set , Then the default deadline is the time of entering the page , The countdown display part does not run . You need to input the date and time in the specified format according to the prompt in the input box , Can make the countdown run . but Here I don't have fault tolerance for date input , Unable to process user's wrong input
The maximum unit of countdown display is “ God ”, When the remaining time is less than 1 days , This unit will not appear
New content recognized in the coding process
In the face of Date Object to perform basic operations ( Except addition , This is string splicing , call toString()
) when Date Object will automatically call valueOf()
The number of milliseconds converted to integer
Date Object instances can change time directly by subtraction , Now with Date The integer that the object subtracts represents the number of milliseconds
such as :let deadlineDate = new Date(); console.log(deadlineDate); // The output is the date string deadlineDate -= 24 * 60 * 60 * 1000; // At this time, the date is reduced by one day console.log(deadlineDate); // The output is the number of milliseconds
In fact, you can also multiply 、 Operations such as division change the value , You can also use comparison operators to directly compare time ( This is the comparison of milliseconds ), The date object will automatically call
valueOf()
Convert to millisecond value . Except addition , Because at this time, it becomes string splicinglet deadlineDate = new Date(); console.log(deadlineDate + 24 * 60 * 60 * 1000); // Concatenation of date string and numeric value console.log(deadlineDate * 2); // Twice the original millisecond value
Date Object instances can be directly associated with Date Object instances are subtracted , It can also be directly related to the number of milliseconds ( Integers ) Subtracting the , At this time, it represents the subtraction of two milliseconds
such as :let deadlineDate = new Date("2021-6-26 17:00:00"); let deadlineMillis = +new Date(); let curTime = new Date(); console.log(deadlineDate - curTime); // At this time, the difference between the output milliseconds console.log(deadlineMillis - curTime); // At this time, the difference between the output milliseconds
In fact, it can also be other basic operations besides addition , Here, date objects are automatically converted into milliseconds for operation
Article source :https://gitee.com/thisismyaddress/bocheng-blogs/tree/master/ Web page effects / Web countdown
边栏推荐
- Personal required code
- UE 虚幻引擎,项目结构
- Pdf to DWG in CAD
- GameObject class and transform class of unity
- PostgreSQL surpasses mysql, and the salary of "the best programming language in the world" is low
- 54. 螺旋矩阵 & 59. 螺旋矩阵 II ●●
- Cocos create Jiugongge pictures
- UE4/UE5 虚幻引擎,材质篇,纹理,Compression and Memory压缩和内存
- AutoCAD - set layer
- 《动手学深度学习》学习笔记
猜你喜欢
How to choose a panoramic camera that suits you?
Autocad-- dynamic zoom
2022/7/2 question summary
2022 U.S. college students' mathematical modeling e problem ideas / 2022 U.S. game e problem analysis
669. Prune binary search tree ●●
Autocad-- Real Time zoom
Rip notes [rip message security authentication, increase of rip interface measurement]
Unity parallax infinite scrolling background
Ue4/ue5 illusory engine, material part (III), material optimization at different distances
【Leetcode】1352. Product of the last K numbers
随机推荐
Unity ugui source code graphic
2021-10-29
[ideas] 2021 may day mathematical modeling competition / May Day mathematical modeling ideas + references + codes
【Leetcode】1352. 最后 K 个数的乘积
UE fantasy engine, project structure
#775 Div.1 C. Tyler and Strings 组合数学
Dotween usage records ----- appendinterval, appendcallback
Sqlserver stored procedures pass array parameters
Cocos create Jiugongge pictures
Listview pull-down loading function
775 Div.1 C. Tyler and strings combinatorial mathematics
C iterator
PR first time
Cocos2dx Lua registers the touch event and detects whether the click coordinates are within the specified area
質量體系建設之路的分分合合
Panel panel of UI
Ue4/ue5 illusory engine, material part (III), material optimization at different distances
mysql審計日志歸檔
2021 huashubei mathematical modeling idea + reference + paper
中国溶聚丁苯橡胶(SSBR)行业研究与预测报告(2022版)