This script is an example of countdown clock. You can set seconds and start countdown.

<html>
 
<head>
  <title>Countdown Clock</title>
 
  <script type="text/javascript">
  function convert(){
    var seconds = document.getElementById("inputted_seconds").value;
 
    if(isNaN(seconds)){
        alert("Please enter a valid number.");
    }else{
        document.getElementById("inputted_seconds").setAttribute("disabled","disabled");
        document.getElementById("start").setAttribute("disabled","disabled");
 
        var days = seconds/60/60/24;
        days = parseInt(days.toString());
 
        seconds = seconds - days*24*60*60;
 
        var hours = seconds/60/60;
        hours = parseInt(hours.toString());
 
        seconds = seconds - hours*60*60;
 
        var minutes = seconds/60;
        minutes = parseInt(minutes.toString());
 
        seconds = seconds - minutes*60;
 
        document.getElementById("countdown_clock").innerHTML = days+"d "+hours+"h "+minutes+"m "+seconds+"s";
 
 
        t = setTimeout("start_countdown("+days+","+hours+","+minutes+","+seconds+")",0);
    }
  }
 
  function start_countdown(days,hours,minutes,seconds){
        if(seconds==-1){
            minutes--;
            seconds = 59;
        }
        if(minutes==-1){
            hours--;
            minutes = 59;
 
        }
        if(hours==-1){
            if(days>0){
                days--;
                hours = 23;
            }
        }
 
        document.getElementById("countdown_clock").innerHTML = days+"d "+hours+"h "+minutes+"m "+seconds+"s";
 
        if(days==0 && hours==0 && minutes==0 && seconds==0){
            alert("Countdown is finished.");
            document.getElementById("inputted_seconds").removeAttribute("disabled");
            document.getElementById("start").removeAttribute("disabled");
            document.getElementById("countdown_clock").innerHTML = "Countdown is finished.";
        }else{
            seconds--;
            t = setTimeout("start_countdown("+days+","+hours+","+minutes+","+seconds+")",1000);
        }
  }
  </script>
</head>
 
<body>
 
<label for="inputted_seconds">Input Seconds</label> <input type="text" id="inputted_seconds" /> <input type="button" id="start" value="Start Countdown" onclick="convert();" />
 
<div id="countdown_clock"></div>
 
</body>
 
</html>
Share

Leave a Reply

Info