JavaScript to achieve a simple page countdown

This article example shares the specific code of JavaScript to implement a simple page countdown for your reference. The specific content is as follows

Without further ado, just paste the code

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <style type="text/css">
  body
  {
   color:red;
   text-align: center;
  }
  .one{
   color:black;
   text-align:center;
  }
 </style>
</head>
<body>
<p>
 Date countdown<br>
 Please enter your target date and click the button to start the countdown to your target date!
</p>
<form name="form1">
 <input type="text" id="a" size=1 name="a">Year<input type="text" id="b" size=1 name="b">Month<input type="text" id="c" size=1 name="c">Day<input type="text" id="d" size=1 name="d">Hour<input type="text" id="e" size=1 name="e">Minute<input type="text" id="f" size=1 name="f">Second<br>

 <div id="time" value="time"></div> 
 <script>
  function getdate(clock){
   var now=new Date();
   var y = now.getFullYear()
   var m = now.getMonth()
   var d = now.getDate()

   var day = now.getDay()
   var h = now.getHours()
   var minu = now.getMinutes()
   var s = now.getSeconds()

   m+=1;
   var array = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
   var nowtime=y+"year"+m+"month"+d+"day"+array[day]+" "+h+"hour"+minu+"minute"+s+"second";
   clock.innerHTML="Current time: "+nowtime; 
  }
  window.onload = function(){  
  window.setInterval("getdate(time)",1000)
  }
 </script>

 <input type="button" value="Countdown" onclick="leftTime()">:
 There are still:
 <input type="text" id="cha" >
 <script> 
 var flag=1;var t;
 function leftTime(){ 

 if(flag==0){flag=1;}

 year=document.getElementById("a").value;
 month=document.getElementById("b").value;
 day=document.getElementById("c").value;
 hour=document.getElementById("d").value;
 minute=document.getElementById("e").value;
 second=document.getElementById("f").value;

 var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); 
 //Calculate the remaining milliseconds if(leftTime>0){
 var days = parseInt(leftTime/1000/60/60/24,10); //Calculate the remaining daysvar hours = parseInt(leftTime/1000/60/60%24,10); //Calculate the remaining hoursvar minutes = parseInt(leftTime/1000/60%60,10);//Calculate the remaining minutesvar seconds = parseInt(leftTime/1000%60,10);//Calculate the remaining secondsdocument.getElementById("cha").value=days+"天" + hours+"小时" + minutes+"分" + seconds+"秒";
 }
 else{
  document.getElementById("cha").value="0 days 0 hours 0 minutes 0 seconds";
  alert("Master, time is up!")
  flag=0;clearInterval(t);
 }
 if(flag==1){
 t=setInterval("leftTime()",1000);
 flag=2;
 }
 } 
 </script>
</form> 
</body>
</html>

When I finished writing the test for the first time, I found that the page kept popping up prompt boxes after the time was up. Later, I searched on Baidu and found that every time setInterval is called to periodically call the function, clearInterval must be set to close it, so I implemented it by setting a flag; the final code is shown above. The results are as follows:

Time is up:

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)

<<: How to install Zookeeper service on Linux system

>>: Detailed explanation of mysql basic operation statement commands