倒计时小时和分钟

时间:2015-10-29 18:13:17

标签: javascript jquery

我今天有时间价值。我需要倒计时显示到那时剩下的小时数和分钟数。当用户在页面上时,我需要这个倒计时来更新分钟。

我做了一个快速搜索并看到了很多插件,但我知道如果没有额外的脚本,这可能非常简单。

Time left <span class="remainingTime"></span>

var day = new Date(),
    now = d.getHours() + ":" + d.getMinutes(),
    end = '23:00';

我想我需要某种转换,也许需要几毫秒才能显示初始时间,然后可能是setTimeout并减少60000?

2 个答案:

答案 0 :(得分:1)

这个怎么样?小而简单。

&#13;
&#13;
function SetTimer(hours, minutes){

    var end = new Date();
    end.setHours(hours);
    end.setMinutes(minutes);

    var secondsLeft = (end - new Date()) / 60000;
    var hoursLeft = Math.floor(secondsLeft / 60);
    var minutesLeft = Math.round(secondsLeft % 60);
    
    $('.remainingTime').text(hoursLeft + ' : ' + minutesLeft);
}

SetTimer(23, 59);

setInterval(function(){
    SetTimer(23, 59);
}, 1000);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Time left <span class="remainingTime"></span>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

有一百万个Google结果显示Javascript小时/分钟倒计时脚本。我在10秒内找到了这个脚本,并在30秒内完成了它。在下次询问之前你应该做更多的研究。这是来自第一个结果之一的脚本:

function DaysHMSCounter(initDate, id){
    this.counterDate = new Date(initDate);
    this.container = document.getElementById(id);
    this.update();
}

DaysHMSCounter.prototype.calculateUnit=function(secDiff, unitSeconds){
    var tmp = Math.abs((tmp = secDiff/unitSeconds)) < 1? 0 : tmp;
    return Math.abs(tmp < 0 ? Math.ceil(tmp) : Math.floor(tmp));
}

DaysHMSCounter.prototype.calculate=function(){
    var secDiff = Math.abs(Math.round(((new Date()) - this.counterDate)/1000));
    this.days = this.calculateUnit(secDiff,86400);
    this.hours = this.calculateUnit((secDiff-(this.days*86400)),3600);
    this.mins = this.calculateUnit((secDiff-(this.days*86400)-(this.hours*3600)),60);
    this.secs = this.calculateUnit((secDiff-(this.days*86400)-(this.hours*3600)-(this.mins*60)),1);
}

DaysHMSCounter.prototype.update=function(){ 
    this.calculate();
    this.container.innerHTML =
        " <strong>" + this.days + "</strong> " + (this.days == 1? "day" : "days") +
        " <strong>" + this.hours + "</strong> " + (this.hours == 1? "hour" : "hours") +
        " <strong>" + this.mins + "</strong> " + (this.mins == 1? "min" : "mins") +
        " <strong>" + this.secs + "</strong> " + (this.secs == 1? "sec" : "secs");
    var self = this;
    setTimeout(function(){self.update();}, (1000));
}

像这样使用:

<div id="myCounter"></div>

<script>
new DaysHMSCounter('December 25, 2015 00:00:00', 'myCounter');
</script>

<强> TRY DEMO

我确定您可以对其进行修改以删除“天”。和&#39;秒&#39;一部分。