倒计时计数器，用户可以在其中输入结束日期答案

【问题标题】：countdown counter where the user can enter the ending date倒计时计数器，用户可以在其中输入结束日期
【发布时间】：2015-07-06 18:54:32
【问题描述】：

我正在尝试创建一个倒计时，用户可以在 HTML 页面中输入结束日期，但下面的代码只允许用户在代码中输入日期。此处计数器由 window.onload 事件开始，但我希望计数器在用户单击按钮时开始。

<head>
<title>JavaScript CountDown Timer</title>
<script type="text/javascript">
var ct = new Date(document.getElementById("endd").value);

function CountDown(initDate, id){
this.endDate = new Date(initDate);
this.countainer = document.getElementById(id);
this.numOfDays = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
this.borrowed = 0, this.years = 0, this.months = 0, this.days = 0;
this.hours = 0, this.minutes = 0, this.seconds = 0;
this.updateNumOfDays();
this.updateCounter();
}

CountDown.prototype.updateNumOfDays=function(){
var dateNow = new Date();
var currYear = dateNow.getFullYear();
if ( (currYear % 4 == 0 && currYear % 100 != 0 ) || currYear % 400 == 0 ) {
    this.numOfDays[1] = 29;
}
var self = this;
setTimeout(function(){self.updateNumOfDays();}, (new Date((currYear+1), 1, 2) - dateNow));
}

CountDown.prototype.datePartDiff=function(then, now, MAX){
var diff = now - then - this.borrowed;
this.borrowed = 0;
if ( diff > -1 ) return diff;
this.borrowed = 1;
return (MAX + diff);
}

CountDown.prototype.calculate=function(){
var futureDate = this.endDate;
var currDate = new Date();
this.seconds = this.datePartDiff(currDate.getSeconds(),  futureDate.getSeconds(), 60);
this.minutes = this.datePartDiff(currDate.getMinutes(), futureDate.getMinutes(), 60);
this.hours = this.datePartDiff(currDate.getHours(), futureDate.getHours(), 24);
this.days = this.datePartDiff(currDate.getDate(), futureDate.getDate(), this.numOfDays[futureDate.getMonth()]);
this.months = this.datePartDiff(currDate.getMonth(), futureDate.getMonth(), 12);
this.years = this.datePartDiff(currDate.getFullYear(), futureDate.getFullYear(),0);
}

CountDown.prototype.addLeadingZero=function(value){
return value < 10 ? ("0" + value) : value;
}

CountDown.prototype.formatTime=function(){
this.seconds = this.addLeadingZero(this.seconds);
this.minutes = this.addLeadingZero(this.minutes);
this.hours = this.addLeadingZero(this.hours);
}

CountDown.prototype.updateCounter=function(){
this.calculate();
this.formatTime();
this.countainer.innerHTML ="<strong>" + this.years + "</strong> <small>" +  (this.years == 1? "year" : "years") + "</small>" +
   " <strong>" + this.months + "</strong> <small>" + (this.months == 1? "month" : "months") + "</small>" +
   " <strong>" + this.days + "</strong> <small>" + (this.days == 1? "day" : "days") + "</small>" +
   " <strong>" + this.hours + "</strong> <small>" + (this.hours == 1? "hour" : "hours") + "</small>" +
   " <strong>" + this.minutes + "</strong> <small>" + (this.minutes == 1? "minute" : "minutes") + "</small>" +
   " <strong>" + this.seconds + "</strong> <small>" + (this.seconds == 1? "second" : "seconds") + "</small>";
if ( this.endDate > (new Date()) ) {
    var self = this;
    setTimeout(function(){self.updateCounter();}, 1000);
}
}
var ct= "09/30/2015";
window.onload=function(){ new CountDown( ct, 'counter'); } 

</script>
</head>
<body>
<input type = "text" id="endd">
<div id="counter">Contents of this DIV will be replaced by Count Down</div>
</body>

【问题讨论】：

你能用你的代码创建小提琴吗？下面是什么代码？您当然只需要根据按钮上的单击处理程序调用开始计数器的函数
我现在发布了代码..

标签： javascript html

【解决方案1】：

我认为您需要做的就是删除window.onload=function()...，添加一个html 按钮，然后使用Javascript 将onclick listener 附加到该按钮，当事件触发时调用new Countdown(...)，就像您已经在做的那样。

jQuery 倾向于让这种事情变得更容易，但你可以在你这里拥有的 vanilla JS 中做同样的事情。

【讨论】：

是的，我试过了，但是计数器没有显示，然后它只是显示
这个 DIV 的内容将被倒计时替换
您希望在单击按钮时显示倒数计时器，还是希望它默认显示而不启动？假设后者为真，那么您不能在构造函数中触发计时器 - 相反，您将离开 onload 函数并让按钮事件侦听器成为启动计时器本身倒计时的触发器
我希望计数器在我单击按钮时启动。