js to achieve interesting countdown effect

js interesting countdown case, for your reference, the specific content is as follows

Code:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    .wrap {
      overflow: hidden;
      width: 500px;
      height: 500px;
      background-color: #eeeeee;
      margin: 0 auto;
    }
    
    h2 {
      margin-top: 20px;
      text-align: center;
      color: #fff;
    }
    
    input {
      width: 70px;
    }
    
    .ipt {
      text-align: center;
      margin-top: 50px;
    }
    
    .run {
      width: 100px;
      height: 100px;
      background-color: #000;
      text-align: center;
      line-height: 100px;
      color: #fff;
      font-size: 30px;
      border-radius: 50%;
      margin: 30px auto 0;
    }
    
    .juli {
      text-align: center;
      margin-top: 30px;
    }
    
    .sytime {
      text-align: center;
      margin-top: 60px;
      font-size: 25px;
      color: #fff;
    }
    
    .sytime span {
      font-size: 30px;
      color: red;
    }
    
    .juli span {
      font-size: 18px;
      color: red;
    }
  </style>
</head>
 
<body>
  <div class="wrap">
    <h2>Countdown</h2>
    <!-- Form -->
    <div class="ipt">
      Please enter: <input type="text">year<input type="text">month<input type="text">day</div>
    <!-- Start button-->
    <div class="run">Start</div>
    <!-- Distance Time -->
    <p class="juli">Now the distance to -<span class="julitime">0000</span>- is:</p>
    <!-- Time remaining -->
    <div class="sytime">
      <span>00</span>days<span>00</span>hours<span>00</span>minutes<span>00</span>seconds</div>
  </div>
  <script>
    // Get elements // form var ipt = document.getElementsByTagName('input');
    //Button var btn = document.getElementsByClassName('run')[0];
    // Distance year var julitime = document.getElementsByClassName('julitime')[0];
    // Countdown var sytime = document.getElementsByClassName('sytime')[0];
    var time = sytime.getElementsByTagName('span');
    console.log(ipt, btn, julitime, time);
 
    var timerId = null;
    // Click event btn.onclick = function() {
      if (ipt[1].value > 12 || ipt[2].value > 30) {
        alert('Month must be less than 12 and day must be less than 30');
        return;
      } else if (ipt[0].value.trim() == '' || ipt[1].value.trim() == '' || ipt[2].value.trim() == '') {
        alert('Content cannot be empty');
        return;
      }
      timerId = setInterval(countTime, 1000);
 
    }
 
 
 
    function countTime() {
      // Get input year var ipty = ipt[0].value;
      // Get input month var iptm = ipt[1].value;
      // Get the input date var iptd = ipt[2].value;
      // console.log(ipty, iptm, iptd);
      var str = ipty + '-' + iptm + '-' + iptd;
      // console.log(str);
      // Assign value to distance time julitime.innerHTML = str;
      // Current distance 1970, 1,1 milliseconds var nowDate = +new Date();
      // Input time distance 1970,1,1 milliseconds var inputFr = +new Date(ipty + '-' + iptm + '-' + iptd)
        // Subtract the number of seconds from now in the future var times = (inputFr - nowDate) / 1000;
      var d = parseInt(times / 60 / 60 / 24) //days d = d < 10 ? '0' + d : d;
      var h = parseInt(times / 60 / 60 % 24) // when h = h < 10 ? '0' + h : h;
 
      var m = parseInt(times / 60 % 60); // points m = m < 10 ? '0' + m : m;
 
      var s = parseInt(times % 60); //seconds s = s < 10 ? '0' + s : s;
 
      // console.log(d, h, m, s);
      time[0].innerHTML = d;
      time[1].innerHTML = h;
      time[2].innerHTML = m;
      time[3].innerHTML = s;
    }
  </script>
</body>
 
</html>

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)

<<: MySQL 5.7.17 installation and configuration method graphic tutorial (Ubuntu 16.04)

>>: MySQL simple example of sorting Chinese characters by pinyin