JavaScript implements front-end countdown effect

This article shares the specific code of JavaScript to achieve the front-end countdown effect for your reference. The specific content is as follows

Code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      padding: 10px;
      font-size: 100px;
    }
    
    p {
      float: left;
      width: 300px;
      height: 300px;
      border: 1px solid #000000;
      color: #ffffff;
      background-color: #333333;
      text-align: center;
      line-height: 300px;
    }
  </style>
</head>

<body>
  <div>
    <p class="hour">1</p>
    <p class="minute">2</p>
    <p class="second">3</p>
  </div>
  <script>
    window.addEventListener('load', function() {
      //Get elementsvar hour = document.querySelector('.hour'); //Black box for hoursvar minute = document.querySelector('.minute'); //Black box for minutesvar second = document.querySelector('.second'); //Black box for secondsvar inputTime = +new Date('2021-2-6 18:00:00'); //Returns the total number of milliseconds of the user input timecountDown(); //Call this function once to prevent the page from being blank when it is refreshed for the first time//Start the timersetInterval(countDown, 1000);

      function countDown() {
        var nowTime = +new Date(); //Returns the total number of milliseconds of the current time var times = (inputTime - nowTime) / 1000; //tiems is the total number of milliseconds of the remaining time var h = parseInt(times / 60 / 60 % 24); //h = h < 10 ? '0' + h : h;
        hour.innerHTML = h; //Give the remaining hours to the hour black box var m = parseInt(times / 60 % 60); //minutes m = m < 10 ? '0' + m : m;
        minute.innerHTML = m;
        var s = parseInt(times % 60); //Current seconds s = s < 10 ? '0' + s : s;
        second.innerHTML = s;
      }
    })
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS countdown implementation code (hours, minutes, seconds)
JS countdown (days, hours, minutes, seconds)
Simple and easy to use countdown js code
js code to realize the 60-second countdown when clicking the button
2 simple js countdown methods
Example of implementing a simple countdown function using native JS
js countdown jump example after a few seconds
A good js html page countdown can be accurate to seconds
js realizes the countdown effect of clicking to get the verification code
Javascript implements the countdown for product flash sales (time is synchronized with server time)

<<: View the frequently used SQL statements in MySQL (detailed explanation)

>>: SSH port forwarding, local port forwarding, remote port forwarding, dynamic port forwarding details