Js page to achieve multiple date and time countdown effect (multiple group)

Js date countdown is more commonly used in daily projects, activities, group functions are the most common; First, analyze the best way to handle the date function, and then have multiple countdowns on a page; Take a look at the effect of pinduoduo’s single countdown:

<style> .mytime{ line-height: 40px; width: 300px; margin: 0 auto; } </style> <div class="mytime jsTime" data-time="The 2019-04-01 16:58:00"> time 1</div> <div class="mytime jsTime" data-time="The 2019-04-04 18:00:02"> time 2</div> <div class="mytime jsTime" data-time="The 2019-04-05 19:01:31"> time 3</div> <div class="mytime jsTime" data-time="The 2019-04-06 05:05:15"> time 4</div> <div class="mytime jsTime" data-time="The 2019-04-07 09:01:43"> time 5</div> <hr> <div class="mytime jsTime2" data-time="The 2019-04-08 16:30:05"> time 1</div> <div class="mytime jsTime2" data-time="The 2019-04-09 14:01:22"> time 2</div> <div class="mytime jsTime2" data-time="The 2019-04-10 18:06:25"> time 3</div> <div class="mytime jsTime2" data-time="The 2019-04-11 22:07:19"> time 4</div> <div class="mytime jsTime2" data-time="The 2019-04-12 23:12:38"5 > time < / div >Copy the code

<! Method -- 1 -- -- > < script > const countdown = {domList: document. QuerySelectorAll ('.jsTime'),
        formatNumber(n){
            // return n.toString().padStart(2, '0'); N = n.tostring ();return n[1] ? n : '0' + n;
        },
        setTime(dom){// get the set Time. Replace (/\-/g,'/');
            const leftTime = new Date(dom.getAttribute('data-time').replace(/\-/g, '/')) - new Date();
            if(leftTime >= 0) { const d = Math.floor(leftTime / 1000 / 60 / 60 / 24); const h = Math.floor(leftTime / 1000 / 60 / 60 % 24); const m = Math.floor(leftTime / 1000 / 60 % 60); const s = Math.floor(leftTime / 1000 % 60); Dom.innerhtml = 'remainder${ d > 0 ? D + 'day' : ''}${ [h, m, s].map(this.formatNumber).join(':') }`;
            } else {
                clearInterval(dom.$timer);
                dom.innerHTML = 'The group is over'; }},start(){
            this.domList.forEach((dom) => {
                this.setTime(dom);
                dom.$timer = setInterval(() => { this.setTime(dom); }, 1e3); }); }}; countdown.start(); </script>Copy the code

<! Const formatNumber = n => {n = n.tostring ();return n[1] ? n : '0'+ n; }; Const teamCountTime = (obj) => {var timer = null;function fnReplace (/\-/g, replace(/\-/g, replace(/\-/g,'/');
      var setTime = obj.getAttribute('data-time').replace(/\-/g, '/'); Var date = new date (), now = date.getTime(), endDate = new Date()setTime), end = endDate.getTime(); Var leftTime = end-now; Var d,h,m,s; var otime =' ';
      if (leftTime >= 0) {
        d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
        m = Math.floor(leftTime / 1000 / 60 % 60);
        s = Math.floor(leftTime / 1000 % 60);
        if (d <= 0) {
          otime = [h, m, s].map(formatNumber).join(':');
        } else {
          otime = d + 'day' + [h, m, s].map(formatNumber).join(':');
        }
        obj.innerHTML = 'rest' + otime;
        //
        timer = setTimeout(fn, 1e3);
      } else {
        clearTimeout(timer);
        obj.innerHTML = 'The group is over';
      }
    }
    fn();
  };
  let jsTimes = document.querySelectorAll('.jsTime2');
  jsTimes.forEach((obj) => {
    teamCountTime(obj);
  });
</script>
Copy the code

Specific code can access my github:github.com/xiexikang/j…