Page countdown

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 display
• Window.setInterval(): Used to refresh the displayed countdown data every second . This is the key to realize this countdown function
• elem.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 splicing

  let 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