倒数计时器：需要计时器在无限次达到0分钟后从3点自动启动

Question

Need a countdown timer that will start from 03:00,02:59... once it reaches 0:00, timer should automatically reset to 03:00 and this logic should be infinite. Just assume that Noone should have any control over this logic to stop it.

i browsed and went through a javascript code. Incase of using only Javascript features, if the enduser trigger's browser refresh then the counter resets to 3:00. This should not happen.

So i'm using JS,Jquery,PHP, Mysql with hope that i can find solutions by keeping starttime,endtime,Intreval Duration in Database(Sorry for not elaborating but i assume that this is a common usecase and people can understand what i'm facing here).

I'm still looking for solutions. kindly help me out with this.

BTW, i'm not looking out answers for Countdowntimer problem, once timer gets to 0:00 job's done for countdown timer. i have idea's for it.

Answer 1

You can create a timer by this way-

// 15 days from now!
var date = new Date(new Date().valueOf() + 15 * 24 * 60 * 60 * 1000);
$('#clock').countdown(date, function(event)
{
    $(this).html(event.strftime('%D days %H:%M:%S'));
});

  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//yui.yahooapis.com/pure/0.4.2/pure-min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,600,300italic">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Oswald">
<link rel="stylesheet" href="http://hilios.github.io/jQuery.countdown/css/syntax.css">
<link rel="stylesheet" href="http://hilios.github.io/jQuery.countdown/css/main.css">
<script src="//code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//cdn.rawgit.com/hilios/jQuery.countdown/2.1.0/dist/jquery.countdown.min.js"></script>

<div class="example-base">
  Limited Time Only!
  <span id="clock"></span>
</div>

Now what u need to do is integrate it with PHP.

When the page loaded, u have to set timeouts for the JS code.

So, then JS code would be like this-

setTimeout( function()
{
    //JS code for timer 
    var date = new Date(new Date().valueOf() + 15 * 24 * 60 * 60 * 1000);
    $('#clock').countdown(date, function(event)
    {
        $(this).html(event.strftime('%D days %H:%M:%S'));
    });
}  , 1000 );

Here time is set to 1 second, but in your case, time should come from server, so what you should do is something like this in PHP to get seconds remaining-

$timeCurrent  = strtotime('now');
$timeFutre = strtotime(date("Y-m-d").' 03:00:00');
$differenceInSeconds = $timeSecond - $timeFirst;

Now u should use it in JS.

U either can use AJAX and set the time remaing or can just use PHP echo like this-

setTimeout( function()
{
    //JS code for timer 
    var date = new Date(new Date().valueOf() + 15 * 24 * 60 * 60 * 1000);
    $('#clock').countdown(date, function(event)
    {
        $(this).html(event.strftime('%D days %H:%M:%S'));
    });
}  , 1000* <?php
                $timeCurrent  = strtotime('now');
                $timeFutre = strtotime(date("Y-m-d").' 03:00:00');
                $differenceInSeconds = $timeSecond - $timeFirst;
                echo $differenceInSeconds; 
           ?> );

Think you have your complete answer.

</div>