Time countdown problem.....

Discussion in 'PHP' started by ash007, Jul 1, 2009.

0
  1. #1
    Hi everybody,
    I have time count down code .It' working fine.But the problem now I have some moification.When I click on the button I want to increment the time by 20 seconds.How can I do this.
    Here I included code for your reference.
    Thanks in advance.

    ---------------
    <html>
    <head>
    <title>Multiple Countdown Clocks</title>
    </head>
    <body>
    <div id="clock1">[clock1]</div>
    <div id="clock2">[clock2]</div>
    <input name="submit" type="submit" onClick="dthen+20">
    </body>
    <!--http://www.hashemian.com/tools/javascript-countdown.htm-->
    <script language="JavaScript">
    StartCountDown("clock1","06/27/2010 12:33 PM -0400")
    StartCountDown("clock2","07/27/2010 2:00 PM -0400")

    /*
    Author: Robert Hashemian (http://www.hashemian.com/)
    Modified by: Munsifali Rashid (http://www.munit.co.uk/)
    Modified by: Tilesh Khatri
    */

    function StartCountDown(myDiv,myTargetDate)
    {

    var dthen = new Date(myTargetDate);
    var dnow = new Date();
    ddiff = new Date(dthen-dnow);
    gsecs = Math.floor(ddiff.valueOf()/1000);
    CountBack(myDiv,gsecs);
    }

    function Calcage(secs, num1, num2)
    {
    s = ((Math.floor(secs/num1))%num2).toString();
    if (s.length < 2)
    {
    s = "0" + s;
    }
    return (s);
    }

    function CountBack(myDiv, secs)
    {
    var DisplayStr;
    var DisplayFormat = "%%D%% Days %%H%%:%%M%%:%%S%%";
    DisplayStr = DisplayFormat.replace(/%%D%%/g, Calcage(secs,86400,100000));
    DisplayStr = DisplayStr.replace(/%%H%%/g, Calcage(secs,3600,24));
    DisplayStr = DisplayStr.replace(/%%M%%/g, Calcage(secs,60,60));
    DisplayStr = DisplayStr.replace(/%%S%%/g, Calcage(secs,1,60));
    if(secs > 0)
    {
    document.getElementById(myDiv).innerHTML = DisplayStr;
    setTimeout("CountBack('" + myDiv + "'," + (secs-1) + ");", 990);
    }
    else
    {
    document.getElementById(myDiv).innerHTML = "Auction Over";
    }
    }

    </script>
    </html>
     
    ash007, Jul 1, 2009 IP
  2. livedating

    livedating Active Member

    Messages:
    161
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    83
    #2
    Threre are several problems in your code:
    1) variable dthen is defined as local in StartCountDown function so it is not available from here: <input name="submit" type="submit" onClick=

    you should defined it as global:
    
var dthen;
function StartCountDown(myDiv,myTargetDate)
{
dthen	= new Date(myTargetDate);
...
    Code (markup):
    2) even if you do this, it does not affect the timer :)
    I think you should define a global var called base and then change it, for example, like this:

    
<html>
<head>
<title>Multiple Countdown Clocks</title>
</head>
<body>
<div id="clock1">[clock1]</div>
<div id="clock2">[clock2]</div>
<input name="submit" type="submit" onClick="base=base+20; return false;">
</body>
<!--http://www.hashemian.com/tools/javascript-countdown.htm-->
<script language="JavaScript">
StartCountDown("clock1","06/27/2010 12:33 PM -0400")
StartCountDown("clock2","07/27/2010 2:00 PM -0400")

/*
Author:	 Robert Hashemian (http://www.hashemian.com/)
Modified by:	Munsifali Rashid (http://www.munit.co.uk/)
Modified by:	Tilesh Khatri
*/
var base=0;
function StartCountDown(myDiv,myTargetDate)
{
var dthen	= new Date(myTargetDate);
var dnow	= new Date();
ddiff	 = new Date(dthen-dnow);
gsecs	 = Math.floor(ddiff.valueOf()/1000);
CountBack(myDiv,gsecs);
}

function Calcage(secs, num1, num2)
{
s = ((Math.floor(secs/num1))%num2).toString();
if (s.length < 2) 
{	
s = "0" + s;
}
return (s);
}

function CountBack(myDiv, secs)
{
var DisplayStr;
var DisplayFormat = "%%D%% Days %%H%%:%%M%%:%%S%%";
if (base>0) {secs = secs-base; base=0;}
DisplayStr = DisplayFormat.replace(/%%D%%/g,	Calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g,	 Calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g,	 Calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g,	 Calcage(secs,1,60));
if(secs > 0)
{	
document.getElementById(myDiv).innerHTML = DisplayStr;
setTimeout("CountBack('" + myDiv + "'," + (secs-1) + ");", 990);
}
else
{
document.getElementById(myDiv).innerHTML = "Auction Over";
}
}

</script>
</html>
    Code (markup):

    3) But still it is not accurate. I think you should not bind your calculatations to settimeout function and each time get system date/time value.
     
    livedating, Jul 2, 2009 IP
  3. logondotinfo

    logondotinfo Peon

    Messages:
    314
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #3 
    function AddTime(myDiv, secs, add)
{
newsecs = secs + add;
CountBack(myDiv, newsecs);
}
    Code (markup):
    then you need to add the action to your link (i assume when form is submitted to add to price and /or clicked...only slight issue will be sending the secs variable into the action.
     
    logondotinfo, Jul 2, 2009 IP
  4. vaibhavcoder

    vaibhavcoder Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks for the information even I was also looking for a count down timer for my site and I think this info will help me a lot.Although I am gonna use ajax agent for the quick results.

    noddy
     
    vaibhavcoder, Jul 2, 2009 IP
  5. ash007

    ash007 Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hi everybody,
    Thanks for your coding.

    I integrated this in while loop and time is incrementing......But still problem is coming..
    1.after refreshing page the second div is gone and first div only displaying..
    2.if i will click button 3 or more times without refershing the page the time increment in proper order.

    anybody have suggestion for this...
    Code

    -----------------------------------

    $m=1;
    $q=1;

    while($row=mysql_fetch_assoc($q2)) {

    $letime=$row['BidEndTime'];
    $ledate=$row['BidEndDate'];
    $lftime=$row['BidStartTime'];
    $lfdate=$row['BidStartDate'];
    $lsampm=$row['sampm'];

    $ledate=date("m/d/Y",strtotime($ledate));
    $lfdate=date("m/d/Y",strtotime($lfdate));

    <div id="lclock<?php echo $q;?>" class="tdfont31" align="center">[clock<?php echo $q;?>]</div>

    <div id="lclocka<?php echo $q;?>" class="redfont2" align="center"></div>

    <script language="JavaScript">

    function AddTime(myDiv,dthen,dnow,add,no,bpk)
    {
    if(bpk>0) {
    var dthen = new Date(dthen);
    var dnow = new Date(dnow);
    ddiff = new Date(dthen-dnow);
    gsecs = Math.floor(ddiff.valueOf()/1000);
    newsecs = gsecs + add;
    CountBack(myDiv, newsecs);

    //var popUp1 = document.getElementById("lclocka"+no);
    // popUp1.style.visibility = 'visible';
    //popUp1.style.display = 'block';

    var popUp = document.getElementById("lclock"+no);
    popUp.style.visibility = 'hidden';
    popUp.style.display = 'none';
    }




    }

    StartCountDown("lclock<?php echo $m;?>","<?php echo $ledate.' '.$letime.' '.$row['eampm'].' ';?>-0400","<?php echo $lfdate.' '.$lftime.' '.$row['sampm'].' ';?>-0400")
    //StartCountDown("clock1","06/27/2010 12:33 PM -0400")
    //StartCountDown("clock2","07/27/2010 2:00 PM -0400")

    /*
    Author: Robert Hashemian (http://www.hashemian.com/)
    Modified by: Munsifali Rashid (http://www.munit.co.uk/)
    Modified by: Tilesh Khatri
    */

    function StartCountDown(myDiv,myTargetDate,ndate)
    {

    var dthen = new Date(myTargetDate);
    var dnow = new Date(ndate);
    ddiff = new Date(dthen-dnow);
    gsecs = Math.floor(ddiff.valueOf()/1000);
    CountBack(myDiv,gsecs);
    }

    function Calcage(secs, num1, num2)
    {
    s = ((Math.floor(secs/num1))%num2).toString();
    if (s.length < 2)
    {
    s = "0" + s;
    }
    return (s);
    }

    function CountBack(myDiv, secs)
    {

    var DisplayStr;
    //var DisplayFormat = "%%H%%:%%M%%:%%S%%";
    var DisplayFormat = "%%D%% Days %%H%%:%%M%%:%%S%%";
    DisplayStr = DisplayFormat.replace(/%%D%%/g, Calcage(secs,86400,100000));
    DisplayStr = DisplayStr.replace(/%%H%%/g, Calcage(secs,3600,24));
    DisplayStr = DisplayStr.replace(/%%M%%/g, Calcage(secs,60,60));
    DisplayStr = DisplayStr.replace(/%%S%%/g, Calcage(secs,1,60));
    if(secs > 0)
    {
    document.getElementById(myDiv).innerHTML = DisplayStr;
    setTimeout("CountBack('" + myDiv + "'," + (secs-1) + ");", 990);
    }
    else
    {
    document.getElementById(myDiv).innerHTML = "Auction Over";
    //document.getElementById("loginchk").style.visibility="hidden";


    }
    }


    </script>
    ?>
    <form id="feedForm" name="feedForm" method="post" action="">
    <input name="image" type="image" id="loginchk<?php echo $m;?>" onclick=" AddTime('lclocka<?php echo $m;?>','<?php echo $ledate.' '.$letime.' '.$row['eampm'].' ';?>-0400','<?php echo $lfdate.' '.$lftime.' '.$row['sampm'].' ';?>-0400', '20','<?php echo $q;?>','<?php echo $bpk;?>'); return false;"
    </form >
    <?php
    $m++;
    $q++;

    }
     
    ash007, Jul 4, 2009 IP