倒计时写法

这是html 结构

<div style="margin: 0 auto" class="wrap" >
            <div class="timeinput">
                <span class="span1">
                    <input type="text" id="hour" placeholder="时">时
                </span>
                <span class="span2">
                    <input type="text" id="min" placeholder="分">分
                </span>
                <span class="span3">
                    <input type="text" id="sec" placeholder="秒">秒
                </span>
            </div>   
            <div class="btn">
                <button class="button1"  onclick="begin()">开始</button>
                <button class="button2"  onclick="timeout()">暂停</button>
                <button class="button3"  onclick="cancel()">取消</button>
            </div>
        </div>

这是js 结构

var sid;
const sidState = {
    1: 'run',
    2: 'pause',
    3: 'stop'
}
function timedecrease(){
    var hour=document.getElementById("hour").value;
    var min=document.getElementById("min").value;
    var sec=document.getElementById("sec").value;
    sec--;
    if(sec===-1){
        sec=59;
        min--;
    }
    if(min===-1){
        min=59;
        hour--;
    }
    if(hour===-1){       
        hour=sec=min=0;
    }
    document.getElementById("min").value=min;
    document.getElementById("hour").value=hour;
    document.getElementById("sec").value=sec;
    if(min===0){
        var mess="恭喜你过关了！\n\n  是否要重新开始？";
        if (confirm(mess)==true){
             clearInterval(sid);
             document.getElementById("min").value='';
             document.getElementById("hour").value='';
             document.getElementById("sec").value='';
        }else{
            window.close();
        }
    } 
    
 } 
function begin(){
    timedecrease();
    console.log(sid);
    clearInterval(sid);           //多次点击还是会加速，后续优化 "之前没有加上参数" 
    console.log(sid);
    sid=setInterval(timedecrease,1000); 
    // document.getElementsByClassName("button1").disabled=true; 
}
// function disableTest(element,val){
//     document.getElementsByClassName("button1").disabled=val;
// }
function timeout(){          //暂停
    console.log(sid);   //控制台查看周期次数
    clearInterval(sid);
}
function cancel(){
    var msg="您确定要取消倒计时吗？\n \n 请确认！";
    if (confirm(msg)==true){
         clearInterval(sid);
         document.getElementById("min").value='';
         document.getElementById("hour").value='';
         document.getElementById("sec").value='';
    }
    else{
        return false;
    }
}
// function changeState(){
//     let key = 1
 
//     switch (key) {
//         case 1:
//             begin();
//             break;
//         case 2:
//             timeout();
//             break;
//         default:
//             break;
//     }
// }

• 版本更新，面向对象写法

/**
 * 倒计时模块对象，四个方法为公共方法
 */
// window.onload
var sid = null
 
function timer() {
    function constructor() {
        return {
            hour: document.getElementById("hour").value,
            min: document.getElementById("min").value,
            sec: document.getElementById("sec").value
        }
    }
    document.getElementById("min").value=min;
    document.getElementById("hour").value=hour;
    document.getElementById("sec").value=sec;
    if(min===-1){
        var mess="恭喜你过关了！\n\n  是否要重新开始？";
        if (confirm(mess)==true){
             clearInterval(sid);
             document.getElementById("min").value='';
             document.getElementById("hour").value='';
             document.getElementById("sec").value='';
        }else{
            window.close();
    this.begin = function () {
        console.log("进入begin函数");
        clearInterval(sid); //多次点击还是会加速，后续优化 "之前没有加上参数" 
        console.log(sid);
        sid = setInterval(function () {
            console.log("进入timedecrease函数");
            var hour = document.getElementById("hour").value;
            var min = document.getElementById("min").value;
            var sec = document.getElementById("sec").value;
            sec--;
            if (sec === -1) {
                sec = 59;
                min--;
            }
            if (min === -1) {
                min = 59;
                hour--;
            }
            if (hour === -1) {
                hour = sec = min = 0;
            }
            document.getElementById("min").value = min;
            document.getElementById("hour").value = hour;
            document.getElementById("sec").value = sec;
            if (min === 0) {
                if (hour == 0) {
                    if (sec == 0) {
                        var mess = "恭喜你过关了！\n\n  是否要重新开始？";
                        if (confirm(mess) == true) {
                            clearInterval(sid);
                            document.getElementById("min").value = '';
                            document.getElementById("hour").value = '';
                            document.getElementById("sec").value = '';
                        } else {
                            window.close();
                        }
                    }
                }
            }
        }, 1000);
    };
    this.timeout = function () {
        console.log("进入timeout函数"); //控制台查看周期次数
        clearInterval(sid);
    };
    this.cancel = function () {
        console.log("进入cancel函数");
        var msg = "您确定要取消倒计时吗？\n \n 请确认！";
        if (confirm(msg) == true) {
            clearInterval(sid);
            document.getElementById("min").value = '';
            document.getElementById("hour").value = '';
            document.getElementById("sec").value = '';
        } else {
            return false;
        }
    };
 
}
var timer1 = new timer;
 
document.getElementsByClassName("button1")[0].onclick = timer1.begin;
 
document.getElementsByClassName("button2")[0].onclick = timer1.timeout;
 
document.getElementsByClassName("button3")[0].onclick = timer1.cancel;
 
 
 
//     document.getElementsByClassName("button2")[0].onclick=timer1.timeout();
//     document.getElementsByClassName("button3").onclick=timer1.cancel();
 
 
 
 
// document.getElementsByClassName("button1").disabled=true; 
// function disableTest(element,val){
//     document.getElementsByClassName("button1").disabled=val;
// }
 
// function changeState(){
//     let key = 1
 
//     switch (key) {
//         case 1:
//             begin();
//             break;
//         case 2:
//             timeout();
//             break;
//         default:
//             break;
//     }
// }

• 更进一步优化写法

/**
 * 倒计时模块对象，四个方法为公共方法
 */
// window.onload
var sid = null;
 
function timer() {
    function constructor() {
        return {
            hour: document.getElementById("hour").value,
            min: document.getElementById("min").value,
            sec: document.getElementById("sec").value,
        }
    }
    this.begin = function () {
        console.log("进入begin函数");
        clearInterval(sid); //多次点击还是会加速，后续优化 "之前没有加上参数" 
        console.log(sid);
        sid = setInterval(function () {
            console.log("进入timedecrease函数");
            var hour = document.getElementById("hour").value;
            var min = document.getElementById("min").value;
            var sec = document.getElementById("sec").value;
            sec--;
            if (sec === -1) {
                sec = 59;
                min--;
            }
            if (min === -1) {
                min = 59;
                hour--;
            }
            if (hour === -1) {
                hour = sec = min = 0;
            }
            document.getElementById("min").value = min;
            document.getElementById("hour").value = hour;
            document.getElementById("sec").value = sec;
            if (min === 0) {
                if (hour == 0) {
                    if (sec == 0) {
                        var mess = "恭喜你过关了！\n\n  是否要重新开始？";
                        if (confirm(mess) == true) {
                            clearInterval(sid);
                            document.getElementById("min").value = '';
                            document.getElementById("hour").value = '';
                            document.getElementById("sec").value = '';
                        } else {
                            window.close();
                        }
                    }
                }
            }
        }, 1000);
    };
    this.timeout = function () {
        console.log("进入timeout函数"); //控制台查看周期次数
        clearInterval(sid);
    };
    this.cancel = function () {
        console.log("进入cancel函数");
        var msg = "您确定要取消倒计时吗？\n \n 请确认！";
        if (confirm(msg) == true) {
            clearInterval(sid);
            document.getElementById("min").value = '';
            document.getElementById("hour").value = '';
            document.getElementById("sec").value = '';
        } else {
            return false;
        }
    };
 
        }
var timer1 = new timer;
 
document.getElementsByClassName("button1")[0].onclick = timer1.begin;
 
document.getElementsByClassName("button2")[0].onclick = timer1.timeout;
 
document.getElementsByClassName("button3")[0].onclick = timer1.cancel;
 
//     document.getElementsByClassName("button2")[0].onclick=timer1.timeout();
//     document.getElementsByClassName("button3").onclick=timer1.cancel();
 
 
 
 
// document.getElementsByClassName("button1").disabled=true; 
// function disableTest(element,val){
//     document.getElementsByClassName("button1").disabled=val;
// }
 
// function changeState(){
//     let key = 1
 
//     switch (key) {
//         case 1:
//             begin();
//             break;
//         case 2:
//             timeout();
//             break;
//         default:
//             break;

• 实现添加，并new 出一个实例

/**
 * 倒计时模块对象，四个方法为公共方法
 */
// window.onload
var sid = null;
var index=0;
 
var timer=function(id) {
    this.id = `${Date.parse(new Date())}${id}`;
    this.name='倒计时模块';
    this.html=`
    <div style="margin: 0 auto" class="wrap" id = 'countdown${id}' >
     <div class="timeinput">
        <span class="span1">
            <input type="text" class="hour" placeholder="时">时
        </span>
        <span class="span2">
            <input type="text" class="min" placeholder="分">分
        </span>
        <span class="span3">
            <input type="text" class="sec" placeholder="秒">秒
        </span>  
        <button class="delete" data-id='countdown${id}'> x</button>
     </div>   
     <div class="btn">
        <button class="button1"  >开始</button>
        <button class="button2"  >暂停</button>
        <button class="button3"  >取消</button>
     </div>
    </div> `;
    this.begin = function () {
        console.log("进入begin函数");
        clearInterval(sid); //多次点击还是会加速，后续优化 "之前没有加上参数" 
        console.log(sid);
        sid = setInterval(function () {
 
            console.log("进入timedecrease函数");
            var hour = document.getElementsByClassName("hour")[0].value;
            var min = document.getElementsByClassName("min")[0].value;
            var sec = document.getElementsByClassName("sec")[0].value;
            sec--;
            if (sec === -1) {
                sec = 59;
                min--;
            }
            if (min === -1) {
                min = 59;
                hour--;
            }
            if (hour === -1) {
                hour = sec = min = 0;
            }
            document.getElementsByClassName("min")[0].value = min;
            document.getElementsByClassName("hour")[0].value = hour;
            document.getElementsByClassName("sec")[0].value = sec;
            if (min === 0) {
                if (hour == 0) {
                    if (sec == 0) {
                        var mess = "恭喜你过关了！\n\n  是否要重新开始？";
                        if (confirm(mess) == true) {
                            clearInterval(sid);
                            document.getElementsByClassName("min")[0].value = '';
                            document.getElementsByClassName("hour")[0].value = '';
                            document.getElementsByClassName("sec")[0].value = '';
                        } else {
                            window.close();
                        }
                    }
                }
            }
        }, 1000);
    };
    this.timeout = function () {
        console.log("进入timeout函数"); //控制台查看周期次数
        clearInterval(sid);
    };
    this.cancel = function () {
        console.log("进入cancel函数");
        var msg = "您确定要取消倒计时吗？\n \n 请确认！";
        if (confirm(msg) == true) {
            clearInterval(sid);
            document.getElementById("min").value = '';
            document.getElementById("hour").value = '';
            document.getElementById("sec").value = '';
        } else {
            return false;
        }
    };
    this.box=null;
    this.init = (container)  => {
        // this.container=container;
        container.innerHTML += this.html;
        // this.box=document.getElementsByClassName("wrap")[0]
        container.onclick=function(ev){ 
            var ev=ev||window.event;
            var target=ev.target||ev.srcElement;
            if(target.nodeName.toLocaleLowerCase()=='button'){
                switch(target.className){
                    case'button1':
                        this.begin();
                        break;
                    case'button2':
                        this.timeout();
                        break;
                    case'button3':
                        this.cancel();
                        break;
                    case'delete':
                    target.parentNode.parentNode.remove();
                    // this.close(target.dataset.id)
                }
            }
        }.bind(this)
    }
    this.close = function(id) {
        document.getElementById(id).remove();
    }
}
    //    document.getElementById("delete").onclick=function(){
    //        console.log("删除函数");
    //        container.remove(container);
       
        
        // document.getElementsByClassName("button1")[0].addEventListener('begin',this.begin);
        // document.getElementsByClassName("button2")[0].addEventListener('timeout',this.timeout);
        // document.getElementsByClassName("button3")[0].addEventListener('cancel',this.cancel);    
    
     
var timer1 = new timer;
// document.getElementsByClassName("button1")[0].onclick = timer1.begin;
// document.getElementsByClassName("button2")[0].onclick = timer1.timeout;
// document.getElementsByClassName("button3")[0].onclick = timer1.cancel;
 
document.getElementsByClassName("add")[0].onclick=function add(){
    let container = document.getElementById('countdownbox');
    let a=new timer();
    a.init(container);
}
// document.getElementsByClassName("delete")[0].onclick= function () {
//     timer1.close();
// }
    // let b="timer2";
    // console.log("进入add函数！")
    // var c=document.getElementsByClassName("wrap")[0];
    // var d=document.createElement("div");                             //创建div新分支
    // var e=c.cloneNode(true);                                        //从wrap  div克隆节点
    // var f=document.getElementsByTagName("body")[0];                    //找到body
    // f.appendChild(d);                                               //向节点添加子节点
    // d.appendChild(e);
    // b.innerHTML=a.html;
    
 
 
    // var a=document.getElementsByClassName("wrap");
    // var b=document.createElement("div");
    // var c=document.getElementsByClassName("wrap").cloneNode(true);
    // var d=document.getElementsByTagName("body");
    // d.appendChild(b);
    // d.appendChild(c);
 
 
//     document.getElementsByClassName("button2")[0].onclick=timer1.timeout();
//     document.getElementsByClassName("button3").onclick=timer1.cancel();
/**
 * 
构造函数的继承：利用空对象做中介的函数封装
 */
// function extend(child,parent){
//     var F=function(){};
//     F.prototype=parent.prototype;
//     child.prototype=new F();
//     child.prototype.constructor=child;
//     child.uber=parent.prototype;  //为子对象创建一个Uber属性，这个属性直接指向父对象的prototype对象
    // }
/**
 * 直接拷贝实现对象的继承
 */
// function extend2(Child, Parent) {
 
// &emsp;&emsp;&emsp;&emsp;var p = Parent.prototype;
 
// &emsp;&emsp;&emsp;&emsp;var c = Child.prototype;
 
// &emsp;&emsp;&emsp;&emsp;for (var i in p) {
 
// &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;c[i] = p[i];
 
// &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;}
 
// &emsp;&emsp;&emsp;&emsp;c.uber = p;
 
// &emsp;&emsp;}
/**
//  * 浅拷贝
//  */
// function extendcopy(p){
//     var c={};
//     for (var i in p){
//         c[i]=p[i];
//     }
//     c.uber=p;
//     return c
// }
 
/**
 * 深拷贝
 * 递归调用浅拷贝
//  */
// function deepCopy(p, c) {
//     &emsp;&emsp;&emsp;&emsp;var c = c || {};  
//     &emsp;&emsp;&emsp;&emsp;for (var i in p) {   
//     &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;if (typeof p[i] === 'object') {    
//     &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;c[i] = (p[i].constructor === Array) ? [] : {};  
//     &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;deepCopy(p[i], c[i]); 
//     &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;} else { 
//     &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;c[i] = p[i]; 
//     &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;}
//     &emsp;&emsp;&emsp;&emsp;}
//     &emsp;&emsp;&emsp;&emsp;return c;
//     &emsp;&emsp;}
 
// document.getElementsByClassName("button1").disabled=true; 
// function disableTest(element,val){
//     document.getElementsByClassName("button1").disabled=val;
// }
 
// function changeState(){
//     let key = 1
 
//     switch (key) {
//         case 1:
//             begin();
//             break;
//         case 2:
//             timeout();
//             break;
//         default:
//             break;
 
 
// var timer = function() {
//     this.html = `
//         <div >
//             <button>
//         </div>
 
//     `;
//     this.clck =() => {
//         this.box
 
//     }
//     this.box = null;
//     this.init = (box)  => {
//         this.box = document.getElementById(box);
//         this.box.getElementById('btn').addEventListener('click', this.click);
//     }
// }
 
// let a =  new timer();
// let b = "timer1";
// b.innerHTML(a.html);
// a.init(b);