JavaScript to achieve a simple page countdown

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

Recommend

Videojs+swiper realizes Taobao product details carousel

This article shares the specific code of videojs+...

SpringBoot integrates Activiti7 implementation code

After the official release of Activiti7, it has f...

Solve the problems encountered during the installation of Mysql 8.0.17 winx64 version

1. Manually create and add my.ini file # CLIENT S...

VMware virtual machine to establish HTTP service steps analysis

1. Use xshell to connect to the virtual machine, ...

Solve the problem of secure_file_priv null

Add secure_file_priv = ' '； then run cmd ...

MySQL DeadLock troubleshooting full process record

【author】 Liu Bo: Senior Database Manager at Ctrip...

Navicat imports csv data into mysql

This article shares with you how to use Navicat t...

Example of how to reference environment variables in Docker Compose

In a project, you often need to use environment v...

How to install jupyter in docker on centos and open ports

Table of contents Install jupyter Docker port map...

jQuery achieves seamless scrolling of tables

This article example shares the specific code of ...

Example of how nginx implements dynamic and static separation

Table of contents Deploy nginx on server1 Deploy ...

Dynamically edit data in Layui table row

Table of contents Preface Style Function Descript...

Implementation of mounting NFS shared directory in Docker container

Previously, https://www.jb51.net/article/205922.h...

Vue2.x responsiveness simple explanation and examples

1. Review Vue responsive usage​ Vue responsivenes...

Sublime / vscode quick implementation of generating HTML code

Table of contents Basic HTML structure Generate s...