html рассчитать разницу между датами

Я хочу создать таймер обратного отсчета для разных дат.html рассчитать разницу между датами

Здесь я вставить ввод даты, с которой я выбрать будущую дату

<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>

Я m новое в кодировании, и я не знаю, как изменить этот код для расчета текущей даты с датой ввода. спасибо

источник

2015-09-01 Elena Ivan

Вам просто нужно сделать под строками, когда пользователь нажимает кнопку.

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);

Вот рабочий код:

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]); 
 
}

<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>

источник

2015-09-01 13:23:59

Это работает ..... спасибо много –

я не могу, говорит, что у меня нет репутации, но когда-то Я получу, я сделаю это –

Привет, можете ли вы принять ответ, чтобы он помог другим людям? Благодаря! –

html рассчитать разницу между датами

ответ

Смежные вопросы