Question

我想为不同的日期创建一个倒数计时器。

这里我插入一个日期输入，我从中选择未来日期

<body>
<form action="countDown.php">
 <td> Select date: <input type="date" name="d"></td>
 <tr> <td><input type="submit" value="Calculate"></td></tr>
</form>
</body>

以下是计算剩余时间的代码（来自网站的代码）

var CDown = function() {
    this.state=0;// if initialized
    this.counts=[];// array holding countdown date objects and id to print to {d:new Date(2013,11,18,18,54,36), id:"countbox1"}
    this.interval=null;// setInterval object
}

CDown.prototype = {
    init: function(){
        this.state=1;
        var self=this;
        this.interval=window.setInterval(function(){self.tick();}, 1000);
    },
    add: function(date,id){
        this.counts.push({d:date,id:id});
        this.tick();
        if(this.state==0) this.init();
    },
    expire: function(idxs){
        for(var x in idxs) {
            this.display(this.counts[idxs[x]], "Now!");
            this.counts.splice(idxs[x], 1);
        }
    },
    format: function(r){
        var out="";
        if(r.y != 0){out += r.y +" "+((r.y==1)?"year":"years")+", ";}
        if(r.w != 0){out += r.w +" "+((r.w==1)?"week":"weeks")+", ";}
        if(r.d != 0){out += r.d +" "+((r.d==1)?"day":"days")+", ";}
        if(r.h != 0){out += r.h +" "+((r.h==1)?"hour":"hours")+", ";}
        if(r.m != 0){out += (r.m<=9?'0':'')+r.m +" "+((r.m==1)?"min":"mins")+", ";}
        if(r.s != 0){out += (r.s<=9?'0':'')+r.s +" "+((r.s==1)?"sec":"secs")+", ";}

        return out.substr(0,out.length-2);
    },
    math: function(work){
        var y=w=d=h=m=s=ms=0;

        ms=(""+((work%1000)+1000)).substr(1,3);
        work=Math.floor(work/1000);//kill the "milliseconds" so just secs

        y=Math.floor(work/31536000);//years (no leapyear support)
        work=work%31536000;

        w=Math.floor(work/604800);//weeks
        work=work%604800;

        d=Math.floor(work/86400);//days
        work=work%86400;

        h=Math.floor(work/3600);//hours
        work=work%3600;

        m=Math.floor(work/60);//minutes
        work=work%60;

        s=Math.floor(work);//seconds

        return {y:y,w:w,d:d,h:h,m:m,s:s,ms:ms};
    },
    tick: function(){
        var now=(new Date()).getTime(),
            expired=[],cnt=0,amount=0;

        if(this.counts)
        for(var idx=0,n=this.counts.length; idx<n; ++idx){
            cnt=this.counts[idx];
            amount=cnt.d.getTime()-now;//calc milliseconds between dates

            // if time is already past
            if(amount<0){
                expired.push(idx);
            }
            // date is still good
            else{
                this.display(cnt, this.format(this.math(amount)));
            }
        }

        // deal with any expired
        if(expired.length>0) this.expire(expired);

        // if no active counts, stop updating
        if(this.counts.length==0) window.clearTimeout(this.interval);

    },
    display: function(cnt,msg){
        document.getElementById(cnt.id).innerHTML=msg;
    }
};

window.onload=function(){
    var cdown = new CDown();

    cdown.add(new Date(2016,8,4,13,30,30), "countbox1");//date(year, month,day, hour, minutes, seconds)
};
</script>
<div id="countbox1"></div>

我是编码新手，我不知道如何修改此代码以计算输入日期的当前日期。谢谢

Answer 1

当用户点击按钮时，您只需要执行以下行。

var cdown = new CDown();
cdown.add(/*new Date(2016,8,4,13,30,30) - you need to replace this in the date from the input*/, "countbox1");//date(year, month,day, hour, minutes, seconds);

这是一个有效的代码：

＆＃13;

var CDown = function() {
    this.state=0;// if initialized
    this.counts=[];// array holding countdown date objects and id to print to {d:new Date(2013,11,18,18,54,36), id:"countbox1"}
    this.interval=null;// setInterval object
}

CDown.prototype = {
    init: function(){
        this.state=1;
        var self=this;
        this.interval=window.setInterval(function(){self.tick();}, 1000);
    },
    add: function(date,id){
        this.counts.push({d:date,id:id});
        this.tick();
        if(this.state==0) this.init();
    },
    expire: function(idxs){
        for(var x in idxs) {
            this.display(this.counts[idxs[x]], "Now!");
            this.counts.splice(idxs[x], 1);
        }
    },
    format: function(r){
        var out="";
        if(r.y != 0){out += r.y +" "+((r.y==1)?"year":"years")+", ";}
        if(r.w != 0){out += r.w +" "+((r.w==1)?"week":"weeks")+", ";}
        if(r.d != 0){out += r.d +" "+((r.d==1)?"day":"days")+", ";}
        if(r.h != 0){out += r.h +" "+((r.h==1)?"hour":"hours")+", ";}
        if(r.m != 0){out += (r.m<=9?'0':'')+r.m +" "+((r.m==1)?"min":"mins")+", ";}
        if(r.s != 0){out += (r.s<=9?'0':'')+r.s +" "+((r.s==1)?"sec":"secs")+", ";}

        return out.substr(0,out.length-2);
    },
    math: function(work){
        var y=w=d=h=m=s=ms=0;

        ms=(""+((work%1000)+1000)).substr(1,3);
        work=Math.floor(work/1000);//kill the "milliseconds" so just secs

        y=Math.floor(work/31536000);//years (no leapyear support)
        work=work%31536000;

        w=Math.floor(work/604800);//weeks
        work=work%604800;

        d=Math.floor(work/86400);//days
        work=work%86400;

        h=Math.floor(work/3600);//hours
        work=work%3600;

        m=Math.floor(work/60);//minutes
        work=work%60;

        s=Math.floor(work);//seconds

        return {y:y,w:w,d:d,h:h,m:m,s:s,ms:ms};
    },
    tick: function(){
        var now=(new Date()).getTime(),
            expired=[],cnt=0,amount=0;

        if(this.counts)
        for(var idx=0,n=this.counts.length; idx<n; ++idx){
            cnt=this.counts[idx];
            amount=cnt.d.getTime()-now;//calc milliseconds between dates

            // if time is already past
            if(amount<0){
                expired.push(idx);
            }
            // date is still good
            else{
                this.display(cnt, this.format(this.math(amount)));
            }
        }

        // deal with any expired
        if(expired.length>0) this.expire(expired);

        // if no active counts, stop updating
        if(this.counts.length==0) window.clearTimeout(this.interval);

    },
    display: function(cnt,msg){
        document.getElementById(cnt.id).innerHTML=msg;
    }
};

function calulate(str) {
  var date = parseDate(str);
  window.cdown = new CDown();
  cdown.add(date, "countbox1");
}

function parseDate(s) {
  var b = s.split(/\D/);
  return new Date(b[0], --b[1], b[2]);
}

＆＃13;

<form action="countDown.php">
 <td> Select date: <input type="date" name="d"></td>
 <tr> <td><input type="submit" value="Calculate" onclick="calulate(this.form.d.value);return false;"></td></tr>
</form>
  <div id="countbox1"></div>

＆＃13;

html计算日期之间的差异

1 个答案: