如何使页面刷新不刷新的Javascript倒数计时器

-1

我正在创建一个拍卖网站，但我无法制定如何使所有用户都修复倒计时计时器的方法。我尝试使用Ajax但它几乎没有任何帮助。我在这里上传我的代码。如何使页面刷新不刷新的Javascript倒数计时器

<!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>

来源

2014-07-03 user3800381

为什么不计算留给未来的时间对每一个加载时间。这样你就不需要记住计时器。 – GoodSp33d

你不能阻止用户刷新网站或它的单个元素，但也许你可以通过使用

window.onbeforeunload

实现你所希望的方向的东西吗？

来源

2014-07-03 06:50:06

你说你需要它保持页面刷新，如果它不需要长时间停留可能服务器php不需要，html5本地存储怎么样？

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

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

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

来源

2014-07-03 06:54:25 Kiee

你可以使用jQuery倒计时器，但同时刷新页面，您可以设置当前时间，让我们不会错过的时间差距

请看这里寻求帮助：http://keith-wood.name/countdown.html

来源

2014-07-03 06:54:27

您需要设定时间留在你的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);

来源

2014-07-03 06:57:33 AkshayP

如何使页面刷新不刷新的Javascript倒数计时器

回答

相关问题