复杂倒计时的实现

秒速五厘米 2022-09-14 02:59 122阅读 0赞

**需求**：点击开始按钮 清除上一次遗留定时器 开启定时器 计算 当前时间 到输入框中时间的倒计时

1.1 点击完成后 清除上一次遗留的定时器

1.2 如果只输入 不点击开始 不能计算新的倒计时

**css:**

**html:**

**js: **

// 1. 获取元素
            var inps = document.getElementsByTagName('input');
            var btn = document.getElementsByTagName('button')[0];
            var ps = document.getElementsByTagName('p');
            var spans = document.getElementsByTagName('span');
            console.log(inps, btn, ps, spans);
            // 4.唯一标识
            var t = null;
    
            // 2. 点击开始按钮
            btn.onclick = function () {
                // 3.清除上一次遗留的定时器
                clearInterval(t);
                // 5.2.1获取输入框的值
                var year = inps[0].value;
                var month = inps[1].value;
                var riqi = inps[2].value;
    
                // 解决1s延迟
                auto();
               
                // 5.开启定时器
                t = setInterval(auto, 1000);
                function auto() {
                    // 5.1创建当前时间
                    var cur = new Date();
                    // 5.2创建未来时间
                    console.log(year,month,riqi);
                    var fur = new Date('' + year + ',' + month + ',' + riqi + ',0:0:0');
                    console.log(cur,fur);
                    // 计算差
                    var cha = fur - cur;
    
                    // 秒
                    var ss = parseInt(cha / 1000);
    
                    // 分
                    var mm = parseInt(cha / 1000 / 60 % 60);
    
                    // 时
                    var hh = parseInt(cha / 1000 / 60 / 60 % 24);
    
                    // 天
                    var dd = parseInt(cha / 1000 / 60 / 60 /24)
                    console.log(ss,mm,hh,dd);
    
                    // 赋值到页面
                    spans[0].innerHTML = year +'年'+month+'月'+riqi+'日'
                    spans[1].innerHTML = dd;
                    spans[2].innerHTML = hh;
                    spans[3].innerHTML = mm;
                    spans[4].innerHTML = ss;
                }
    
    
            }

**效果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/bbae1d38a0674b55a06ec0cfb95fa112.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/b7347bfa939f415aab5aa0999bda9a4c.png