如何在倒计时结束时让我的计时器重新加载到页面?

时间:2018-03-17 20:03:17

标签: javascript php jquery html css

你好我正在尝试进行倒计时,倒计时结束倒计时页面 然而,当倒计时结束时,计时器不是刷新页面,它开始以时钟方式计数 例如,计时器必须在3,2,1之后重新加载页面,但它会像3,2,1,1,2,3等,下面是我的代码

    <?php if (isset($alert)) { ?>
<script type='text/javascript'>$('#alert').modal('show');</script>
<?php  } ?>
<script type="text/javascript" src="template/js/site.js"></script>
<script type="text/javascript">
    $("#DateCountdown").TimeCircles();
    $("#CountDownTimer").TimeCircles({ time: { Days: { show: false }, Hours: { show: false } }});
    $("#PageOpenTimer").TimeCircles();

    var updateTime = function(){
        var date = $("#date").val();
        var time = $("#time").val();
        var datetime = date + ' ' + time + ':00';
        $("#DateCountdown").data('date', datetime).TimeCircles().start();
    }
    $("#date").change(updateTime).keyup(updateTime);
    $("#time").change(updateTime).keyup(updateTime); 
    $(".startTimer").click(function() {
        $("#CountDownTimer").TimeCircles().start();
    });
    $(".stopTimer").click(function() {
        $("#CountDownTimer").TimeCircles().stop();
    }); 
    $(".fadeIn").click(function() {
        $("#PageOpenTimer").fadeIn();
    });
    $(".fadeOut").click(function() {
        $("#PageOpenTimer").fadeOut();
    });   
</script>

3 个答案:

答案 0 :(得分:3)

setTimeout(function() {
    window.location.reload();
}, 1500)

在重新加载页面之前,将你想要传递的时间换成1500秒。

答案 1 :(得分:0)

无法在代码中看到超时/间隔例程,因此我将展示我的示例以执行您想要的操作:

// your timeout in seconds
var timeSec = 10;       
// fix countdown start time in seconds
var timeStart = parseInt((new Date()).getTime() / 1000);  

// function to check if time is up
function TimeCheck() {
    // get time left in seconds
    var timeLeft = timeSec - (parseInt((new Date()).getTime() / 1000) - timeStart);
    // checking if time is up
    if(timeLeft > 0) {
        // if time is not up yet
        
        // ... do whatever you want to display / refresh time left to reload page ...
        
        // set "check timeout" for next check
        setTimeout(TimeCheck, 1000); 
    }
    else {
        // reload page and don't set "check timeout" again
        window.location.reload();
    }
}

// initial timeout start
cTimeout = setTimeout(TimeCheck, 1000);

使用setTimeout()而不是setInterval()可以阻止多个回调函数实例填充执行队列。

答案 2 :(得分:0)

也许你的意思是这个代码来解决这个问题?

$("#CountDownTimer")
    .TimeCircles({count_past_zero: false})   // prevent countdown below zero
    .addListener(countdownComplete);         // add "countdown complete listener"

function countdownComplete(unit, value, total){
    if(total <= 0){
        // ... make your page refresh ...
    }
}