循环Java倒计时 [英] Recurrent Javascript countdown

问题描述

我有一个烦人的问题，我试图执行一个简单的10或15分钟的循环倒数计时。我尝试使用jQuery，但它只给我提供了倒数日期的选项，并在倒数结束后停止。

I have an annoying problem, i have trying to implement a simple 10 or 15 minute recurrent countdown. i have tried jQuery but it just gives me options to count down to a date and stops after the countdown is finished.

我发现以下代码这里，但我想不出它能消除这一天并使它倒数10或15分钟。有人可以帮我吗？

I found the below code Here but i cant figure it to remove the days and make it to count down for 10 or 15 minuters. Can someone please help me?

<div id="countre3">Loading...</div>
<script type="text/javascript">
     function mycountre(o, timeArray){
         var countre = document.getElementById(o);
         if(!countre) {
             return;
         }

         // helper functions
         function mksec(day, h, m, s){ return day*24*60*60+h*60*60+m*60+s; }
         function toTimeString(sec, showZero){
             var d=Math.floor(sec/(60*60*24))
             var h=Math.floor(sec/(60*60)%24);
             var m=Math.floor((sec/60) % 60);
             var s=sec % 60;
             var ret=d+'days '+h+'hrs '+m+'min '+s+'sec';
             if(showZero){
                return ret;
             }else if(d==0 && h==0 && m==0){
                return s+'sec';
             }else if(d==0){
                return h+'hrs '+m+'min '+s+'sec';
             }else if(d==0 && h==0){
                return m+'min '+s+'sec';
             }else {
                return ret;
             }
         }
         //
         var secArray = [];
         var dayNow = new Date().getDay();
         for(var i=0;i<timeArray.length;i++){
            var day=timeArray[i][0];
            if(day==-1){
                day=dayNow;
            }
             secArray.push({
                day: timeArray[i][0],
                sec: mksec(day, timeArray[i][2], timeArray[i][2], timeArray[i][3]),
                msg: timeArray[i][4] || false,
                showZero: timeArray[i][5] || false
             });
         }
         secArray.sort(function(a,b){ return a.sec-b.sec;});

         // timer code - will be called around each second (~1000 ms)
         function updatecountre(){
             // get current UTC time in seconds
             var d=new Date();
             var secNow = mksec(d.getDay(), d.getUTCHours(), d.getUTCMinutes(), d.getUTCSeconds());
             // find next event
             var nextIndex=0;
             for(var i=0;i<secArray.length; i++){
                 var diff = secArray[i].sec-secNow;
                 if(diff>0){
                     nextIndex=i;
                     break;
                 }
             }
             //
             var diff=secArray[nextIndex].sec-secNow;
             var prevDiff=diff;
             if(diff<0){
                var dayDiff = 6-secArray[nextIndex].day;
                if(secArray[nextIndex].day == -1){
                    dayDiff=0;
                }
                diff=(dayDiff+1)*24*60*60-Math.abs(diff);
             }
             var str='';
             // get message if there is any set
             if(secArray[nextIndex].msg){
                 str=secArray[nextIndex].msg;
             }
             var timeString = toTimeString(diff, secArray[nextIndex].showZero);
             if(str.match('@{countre}')!=null){
                 str=str.replace(/@{countre}/, timeString);
             }else if(str.indexOf(' ')==0){ // message starts with space
                 str=timeString+str;
             }else{ // no specific hint where to put countre, so display it after message
                 str+=timeString;
             }
             countre.innerHTML=str;
        }

         setInterval(updatecountre, 1000);

     };
mycountre('countre3', [ [5, 5, 0, 0, '<center><b>Next Turns are Due in </b><p class="smalltext"> @{countre}</center>', false] ]);
</script>

推荐答案

尝试一下：

    function mycountre(countdownId, countdownSeconds, countdownLooping){
    var countre = document.getElementById(countdownId); // get html element
    if (!countre) {
        return;
    }

    var target = new Date().getTime() + 1000 * countdownSeconds; // target time
    var intervalId; // id of the interval

    // update function
    function updatecountre(){
        var time = Math.floor((target - new Date().getTime()) / 1000); // countdown time in seconds
        if (time < 0) { // if countdown ends
            if (countdownLooping) { // if it should loop
                target += 1000 * countdownSeconds; // set new target time
                time = Math.floor((target - new Date().getTime()) / 1000); // recalculate current time
            } else { // otherwise
                clearInterval(intervalId); // clear interval
                time = 0; // set time to 0 to avoid displaying negative values
            }
        }

        // split time to seconds, minutes and hours
        var seconds = '0' + (time % 60);
        time = (time - seconds) / 60;
        var minutes = '0' + (time % 60);
        time = (time - minutes) / 60;
        var hours = '0' + time;

        // make string from splited values
        var str = hours.substring(hours.length - 2) + ':' + minutes.substring(minutes.length - 2) + ':' + seconds.substring(seconds.length - 2);
        countre.innerHTML = str;
    }

    intervalId = setInterval(updatecountre, 200); // start interval to execute update function periodically
};
mycountre(
    'countre3', // id of the html element
    15 * 60, // time in seconds (15min here)
    true // loop after countdown ends?
);

工作演示： http://jsfiddle.net/Xv3jx/1/

这篇关于循环Java倒计时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！