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

Solution to the problem that crontab output redirection does not take effect in Linux

question In LINUX, periodic tasks are usually han...

Summary of commonly used tags in HTML (must read)

Content Detail Tags: <h1>~<h6>Title T...

JavaScript Dom implements the principle and example of carousel

If we want to make a carousel, we must first unde...

Example of using Nginx to implement port forwarding TCP proxy

Table of contents Demand Background Why use Nginx...

CentOS 6.5 installation mysql5.7 tutorial

1. New Features MySQL 5.7 is an exciting mileston...

js implements simple provincial, municipal and district three-level selection cascade

This article shares the specific code of js to re...

Some questions about hyperlinks

<br />I am very happy to participate in this...

HTML table markup tutorial (29): cell light border color attribute BORDERCOLORLIGHT

In cells, light border colors can be defined indi...

Two ways to clear table data in MySQL and their differences

There are two ways to delete data in MySQL: Trunc...

Mysql 5.7.17 winx64 installation tutorial on win7

Software version and platform: MySQL-5.7.17-winx6...

Complete steps to use samba to share folders in CentOS 7

Preface Samba is a free software that implements ...

Detailed explanation of the pitfalls of add_header in nginx configuration tutorial

Preface add_header is a directive defined in the ...

Specific use of useRef in React

I believe that people who have experience with Re...

Analysis of MySQL duplicate index and redundant index examples

This article uses examples to describe MySQL dupl...

Several important MySQL variables

There are many MySQL variables, some of which are...