Examples of how to implement multiple js countdown in milliseconds _ javascript tips-js tutorial

This article mainly uses examples to explain how multiple js countdown tasks can be performed at the same time. If you are interested, you can refer to the example in this article to explain how js countdown works at the same time, the content is as follows:

:

Function: Call a function to input the id of the html element and the end time (unix timestamp) to print the countdown to the current end time in the html element, accurate to milliseconds;

As follows:

      
     
             Millisecond countdown
    
    
    
Script var addTimer = function () {var list = [], interval; return function (id, timeStamp) {if (! Interval) {interval = setInterval (go, 1);} list. push ({ele: document. getElementById (id), time: timeStamp});} function go () {for (var I = 0; I <list. length; I ++) {list [I]. ele. innerHTML = changeTimeStamp (list [I]. time); if (! List [I]. time) list. splice (I --, 1) ;}// input the unix timeStamp to obtain the countdown function changeTimeStamp (timeStamp) {var distancetime = new Date (timeStamp * 1000 ). getTime ()-new Date (). getTime (); if (distancetime> 0) {// if it is greater than 0. description has not reached the deadline var MS = Math. floor (distancetime %1000); var sec = Math. floor (distancetime/1000% 60); var min = Math. floor (distancetime/1000/60% 60); var hour = Math. floor (distancetime/1000/60/60% 24); if (ms <1 00) {MS = "0" + MS;} if (sec <10) {sec = "0" + sec;} if (min <10) {min = "0" + min;} if (hour <10) {hour = "0" + hour;} return hour + ":" + min + ": "+ sec +": "+ ms;} else {// if not, return has expired! "}}} (); AddTimer (" timer1 ", 1451923200); // At on January 1, January 5, the unix timestamp should be set to Baidu, and some addTimer (" timer2 ", 1451926800); // addTimer ("timer3", 1451930400) at on January 1, 1452020400; // addTimer ("timer4",) at on January 1,; // script

How to use this function?

AddTimer ("# id", timestamp int );

PS:

In fact, this function has a small problem: it does not show the end days; because the boss said that our countdown time is at most a few hours, so in judging the countdown hours and days, I am too lazy to write so much. Therefore, if the input timestamp is more than one day ago. Then you will see the result: 02: 11: 32: 874 ~~ There are only two hours left! Obviously not, right?

So, there are two solutions here:

Method 1:Change var hour = Math. floor (distancetime/1000/60/60% 24) to var hour = Math. floor (distancetime/1000/60/60 );

If the end time is more than one day, the hour position will display a number greater than 24; for example: 36: 45: 22: 888

Method 2:You can write another variable to calculate the number of days;

The above is all the content of this article, hoping to help you learn.