具有更新目标日期的倒数计时器

时间:2013-11-14 12:39:58

标签: javascript php jquery ajax countdowntimer

我已经在网上搜索了很长时间了,我还没找到我想要的东西。

我想做的是制作一个倒数计时器,以便每次击中0时重新开始。我正在使用JS,PHP和SQL数据库。为什么我使用db是因为我希望将目标日期存储在某个地方,所以如果你甚至离开并返回它,它仍会在你关闭时继续。

到目前为止,我已经这样做了:

这些是我的变量:

$turnSec = 20;
$nextTurnTime = $db['next_turn_time']; //Taken from the db
$turns = $db['turns']; //Taken from the db

这是主文件,我将其命名为tutorial.php

<!DOCTYPE html>
<?php include('include.inc.php'); 
?>
<html>
<head>
<body data-twttr-rendered="true" onload="test1(<?php echo $nextTurnTime; ?>)">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
        <span id="countdown"></span>
<script>
function test1(time){
                // variables for time units
                var time, days, hours, minutes, seconds;

                // set the date we're counting down to
                var target_date = time * 1000;

                // get tag element
                var countdown = document.getElementById("countdown");

                // update the tag with id "countdown" every 1 second
                var interval = setInterval(function () {

                    // find the amount of "seconds" between now and target
                    var current_date = new Date().getTime();
                    var seconds_left = (target_date - current_date) / 1000;

                    // do some time calculations
                    days = parseInt(seconds_left / 86400);
                    seconds_left = seconds_left % 86400;

                    hours = parseInt(seconds_left / 3600);
                    seconds_left = seconds_left % 3600;

                    minutes = parseInt(seconds_left / 60);
                    seconds = parseInt(seconds_left % 60);

                    // format countdown string + set tag value
                    countdown.innerHTML = days + "d, " + hours + "h, "
                    + minutes + "m, " + seconds + "s";  

                    // what will happen when counter hits 0
                    if(seconds_left <= 0){
                        var xmlhttp;
                        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
                            xmlhttp=new XMLHttpRequest();
                        }
                        else{// code for IE6, IE5
                            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        xmlhttp.onreadystatechange=function(){
                            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                                document.getElementById("countDown").innerHTML=xmlhttp.responseText;
                            }
                        }
                        xmlhttp.open("GET","ajax.php",true);
                        xmlhttp.send();

                        clearInterval(interval);
                        $(document).ready(function(){
                            $("#contents").load('tutorial2.php', function(response){
                                test1(response);
                            });
                        });
                    }

                }, 100);
}
</script>
</head>
</html>

接下来我得到了ajax.php,其中文件将更新turn和next_turn_time的db值

<?php
include('include.inc.php');
    $newTurns = $turns+1;
    $newTargetTime = $nextTurnTime+$turnSec;
    $mysql->myQuery("UPDATE `accounts` SET next_turn_time='".$newTargetTime."', turns='". $newTurns ."' WHERE login_name='Lejjo'");

?>

最后我们得到了tutorial2.php,它将返回next_turn_time的新值:

<?php 
include ('include.inc.php');
echo $nextTurnTime;
?>

一切正常,直到新值再次返回到实际脚本(tutorial.php),因为该值不是作为int而是字符串返回的,所以当我尝试在我的脚本中执行数学操作时,例如* 1000,/ 1000并修复值为NaN的天,小时,分钟和秒。现在我已经搜索了如何将值作为整数返回,但我还没有成功。

你们有什么可以帮我的吗?要么告诉我如何将返回的值从.load()转换为int或者其他方式我可以做到这一点,也许更好的方法?

提前谢谢!

0 个答案:

没有答案