Share a js key code to implement countdown

This article mainly introduces the key code of js to realize the countdown in detail. It has a certain reference value. Interested friends can refer to it

We often refer to You can see flash sale countdowns and Double 11 countdowns on some e-commerce websites. In fact, the countdown effect is very simple to implement and not complicated.

First of all, you must clarify your ideas before you start writing. , it will be much easier to write. I will divide it into several steps below:

1. Get the current time and define the end time

2. Use it to find the future time and the current time time difference, and find the hours, minutes and seconds

3. Set the timer to make the time decrease every second

var p = document.getElementsByTagName("p")[0];
      var timer = setInterval(timers, 1000);
      function timers() {
        //获取现在的时间
        var now = new Date();
        //获取你想要的未来时间
        var future = new Date("2017/05/10");
        var time = future.getTime() - now.getTime();
        //获取距离的天数
        var day = parseInt(time / 24 / 60 / 60 / 1000);
        //获取距离的小时
        var hour = parseInt(time / 1000 / 60 / 60 % 24);
        //获取分
        var minute = parseInt(time / 1000 / 60 % 60);
        //获取秒
        var sec = parseInt(time / 1000 % 60);
        if(time < 0) {
          p.innerHTML = "距离苹果发布会还有00天00小时00分00秒000毫秒";
          clearInterval(timer);
          return;
        }
        //注意点:当时间小于10的时候,要在前面补0
        p.innerHTML = "距离结束时间还有" + (day < 10 ? ("0" + day) : day) + "天" + (hour < 10 ? ("0" + hour) : hour) + "小时" + (minute < 10 ? ("0" + minute) : minute) + "分" + (sec < 10 ? ("0" + sec) : sec) + "秒";
      }

[Related recommendations]

1. Free js online video tutorial

2. JavaScript Chinese Reference Manual

3. php.cn Dugu Jiujian (3)- JavaScript video tutorial

The above is the detailed content of Share a js key code to implement countdown. For more information, please follow other related articles on the PHP Chinese website!