如何制作在页面刷新时不刷新的Javascript倒数计时器答案

【问题标题】：How to make a Javascript countdown timer which doesnt refresh on page refresh如何制作在页面刷新时不刷新的Javascript倒数计时器
【发布时间】：2014-07-03 06:42:44
【问题描述】：

我正在创建一个拍卖网站，但我无法制定如何为所有用户固定倒数计时器的方法。我尝试使用 Ajax，但几乎没有任何帮助。我正在上传我的代码在这里。

<!DOCTYPE html>
    <html>

    <head>
    <style>
    body 
    {
    background-image:url('s.png');
    background-size: 1370px 652px;
    background-repeat: no-repeat;
    }

    div.padding {
        padding-top: 270px;
        padding-bottom: 125px;
        padding-right: 50px;
        padding-left: 170px;
    }
    </style>
    </head>
    <body>


    <div class="padding">


    <?php
    $con=mysqli_connect("127.0.0.1","root","","rocauction_db");
    $x=$_POST["serial"];
    $result = mysqli_query($con,"SELECT * FROM playerdb Where Serial=$x");
    while($row = mysqli_fetch_array($result))
    {

        echo " <b> Name: </b>" . $row['name'] ;
        echo "<br>";
        echo " <b> Score: </b>" . $row['score'] ;
        echo "<br>";
        echo " <b> Link: </b>" . $row['link'] ;
        echo "<br>";
        echo " <b> Price: </b>" . $row['price'] ;
        echo "<br>";    
    }
    mysqli_close($con);
    ?>

    Bid: <input type="text" style="width: 30px" disabled id="mybid" name="" value="" onkeydown="if (event.keyCode == 13) myFunction();secon(1);">
    <p id="demo" >No Bids Available</p>
    <p id="count" ></p>

    <script>
    var txt="";
    function myFunction()
    {
    txt="";
    var x = document.getElementById("mybid");
    txt=x.value;
    txt=parseInt(txt);
    txt=txt+20;
    document.getElementById("demo").innerHTML="<b>Current bid : </b>"+txt+"m";
    }

    var second=60;
    var minutes;
    function secon(check) 
    {   
    if(check==1){
     second=60;
    }
        minutes=Math.floor(second/60);
        var seconde = second - minutes * 60;
        if(seconde<10)
                document.getElementById('count').innerHTML =  "<b>Time Remaining : </b>"+minutes +"<b>:</b>0" +seconde;
        else
            document.getElementById('count').innerHTML =  "<b>Time Remaining : </b>"+minutes +"<b>:</b>" +seconde;
        if (second == 0 && minutes == 0) 
        {
        clearInterval(countdownTimer1); 
        document.getElementById("mybid").disabled = true;
        if(txt=="")
            document.getElementById('count').innerHTML = "<b>Unsold!!!</b>";
        else
            document.getElementById('count').innerHTML = "<b>Sold for : </b>"+txt+"m";
        }   
        else
        {
                second--;
            }
    }
    var countdownTimer1 = setInterval('secon()', 1000);

    </script>

    </div>

    </body>
    </html>

【问题讨论】：

为什么不计算每次负载的未来时间。这样您就无需记住计时器了。

标签： javascript php ajax

【解决方案1】：

你说你要求它保持页面刷新，如果它不需要保持很长时间也许不需要服务器php，html5本地存储怎么样？

$('document').ready(function(){
                start = 1000;
                timer = localStorage.timer ? localStorage.timer : start;

                setInterval(function(){
                    console.log(timer--);
                    localStorage.setItem("timer",timer);
                },1000);
            });

这将检查一个值是否存储在本地存储中，如果没有，它将从指定的开始启动计时器。

【讨论】：

【解决方案2】：

您无法阻止用户刷新网站或其中的单个元素，但也许您可以通过使用来实现您想要的方向

window.onbeforeunload

【讨论】：

【解决方案3】：

你可以使用jquery倒数计时器，但是在页面刷新时你可以设置当前时间，这样我们就不会错过时间间隔

请在此处寻求帮助：http://keith-wood.name/countdown.html

【讨论】：

【解决方案4】：

您需要在session 中设置剩余时间，以便获得准确的剩余时间。在这之间，您需要根据当前时间重新设置剩余时间。

我的 PHP 代码：

date_default_timezone_set("Asia/Calcutta");

$oldtime = $_session['start_time'];
$newtime = time();
$difference = $newtime - $oldtime;
$time_remaining = $_session['time_remaining'] -  $difference;

$_session['time_remaining'] =$time_remaining;

if ($_session['time_remaining'] > 0)
{ 
    $_session['start_time'] =$newtime;
}
else
{
    //'end_of_time';
}

JavaScript：

    var seconds = <?php echo $_session['time_remaining']?>;
    function secondPassed()
    {
        var minutes = Math.round((seconds - 30)/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10)
        {
            remainingSeconds = "0" + remainingSeconds;  
        }
        document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;

        if (seconds == 0 || seconds<0)
        {
            clearInterval(countdownTimer);
        }
        else
        {
            seconds--;
        }
    }
    var countdownTimer = setInterval('secondPassed()', 1000);

【讨论】：