当前位置:网站首页>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
边栏推荐
- C4D simple cloth (version above R21)
- Unity and database
- Stm32cubemx (8): RTC and RTC wake-up interrupt
- UE 虚幻引擎,项目结构
- 2022 American College Students' mathematical modeling ABCDEF problem thinking /2022 American match ABCDEF problem analysis
- stm32Cubemx(8):RTC和RTC唤醒中断
- 【论文笔记】Multi-Goal Reinforcement Learning: Challenging Robotics Environments and Request for Research
- 2021 electrician Cup - high speed rail traction power supply system operation data analysis and equivalent modeling ideas + code
- 嵌入式数据库开发编程(零)
- Detailed introduction of OSPF header message
猜你喜欢
Understand encodefloatrgba and decodefloatrgba
Download and use of font icons
Rip notes [rip three timers, the role of horizontal segmentation, rip automatic summary, and the role of network]
Introduction to JVM principle and process
2021 higher education social cup mathematical modeling national tournament ABCD questions - problem solving ideas - Mathematical Modeling
C4D simple cloth (version above R21)
2022/7/2做题总结
Data is stored in the form of table
669. Prune binary search tree ●●
"Measuring curve length" of CAD dream drawing
随机推荐
cocos_ Lua loads the file generated by bmfont fnt
中国艾草行业研究与投资前景预测报告(2022版)
Listview pull-down loading function
2021 huashubei mathematical modeling idea + reference + paper
2022/7/1学习总结
AutoCAD - Center zoom
AutoCAD - Zoom previous
Understand encodefloatrgba and decodefloatrgba
2020-10-27
C4D simple cloth (version above R21)
Sqlserver stored procedures pass array parameters
Manually implement heap sorting -838 Heap sort
AutoCAD - window zoom
Chinese notes of unit particle system particle effect
UE fantasy engine, project structure
嵌入式数据库开发编程(六)——C API
Redis has four methods for checking big keys, which are necessary for optimization
Unity shot tracking object
3dsmax scanning function point connection drawing connection line
2022 / 7 / 1 Résumé de l'étude