Of Stack

JavaScript implementation of a countdown class

  • 2020-05-16 06:17:10
  • OfStack

When the user opens the page of rank 5, an remaintime (the remaining time from the end of the lottery period) will be sent from the server. Then, this time will be displayed to the user in the client side, so that the user can get the remaining time of the lottery period.

The implementation principle is quite simple, and I won't repeat it here. Run the following code to see demo: 


<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>index</title>
<style type="text/css">
em{color:#f00;}
</style>
</head>

<body>
<div id="remaintime"></div>
<script type="text/javascript">

var TheTime = function(){
 this.init.apply(this,arguments);
};

TheTime.prototype = {
 init: function(obj){
 var that = this;
 obj = that.buildParam(obj);
 that.callback = obj.callback;
 var container = that.container = document.getElementById(obj.container);
 container.innerHTML = '<em></em> hours <em></em> minutes <em></em> seconds ';
 var hourSpace = that.hourSpace = container.getElementsByTagName('em')[0];
 var minuteSpace = that.minuteSpace = container.getElementsByTagName('em')[1];
 var secondSpace = that.secondSpace = container.getElementsByTagName('em')[2];
 if(obj.remaintime==0){
  that.resetTime();
  return;
 }

 that.hours = Math.floor(obj.remaintime/3600);
 that._remainder1 = obj.remaintime % 3600;
 that.minutes = Math.floor(that._remainder1/60);
 that.seconds = that._remainder1 % 60;
 var timer = that.timer = setInterval(function(){
  that.renderTime.apply(that);
 },1000);
 },
 buildParam: function(obj){
 obj = {
  //container for dom The node's id
  container: obj.container || 'container',
  remaintime: Number(obj.remaintime) || 0,
  // A callback after the countdown is complete 
  callback: obj.callback || new Function
 };
 return obj;
 },
 resetTime: function(){
 var that = this;
 that.container.innerHTML = " Have as ";
 },
 // The refresh time 
 renderTime: function(){
 //debugger;
 var that = this;
 if(that.seconds>0){
  that.seconds--;
 }else{
  that.seconds = 59;
  if(that.minutes>0){
  that.minutes--;
  }else{
  that.minutes = 59;
  if(that.hours>0){
   that.hours--;
  }
  }
 }
 
 // Time to monitor 
 if(that.hours==0 && that.minutes==0 && that.seconds==0){
  // Implement the callback 
  that._callback();
 }
 var bitHandle = that.bitHandle;

 var _hour = bitHandle(that.hours);
 var _minute = bitHandle(that.minutes);
 var _second = bitHandle(that.seconds);
 that.hourSpace.innerHTML = _hour;
 that.minuteSpace.innerHTML = _minute;
 that.secondSpace.innerHTML = _second;
 },
 // For bit processing, be sure to return two bits 
 bitHandle: function(num){
 var str = num.toString();
 if(str.length<2){
  str = 0 + str;
 }
 return str;
 },
 _callback: function(){
 var that = this;
 clearInterval(that.timer);
 that.callback();
 }

};

new TheTime({
 // The container id
 container: 'remaintime',
 // The remaining time returned by the server, in seconds 
 remaintime: 10000,
 // A callback when the countdown is complete 
 callback: function(){
 document.getElementById('remaintime').innerHTML = ' Has as ';
 }
});
</script>
</body>
</html>
Related articles: