简体   繁体   中英

PHP/Javascript Timer and counter

Overview: I need a counter that can count up from an inserted number, that can keep counting while there are no users and that visually shows the count as it happens within a website. I'll be trying to work through this as I leave this here. Any help would be appreciated. I plan on packing this into a module for Joomla and releasing it for free in the near future.

The inputs are:

  • starting amount , Interval in seconds to update, Rate to add for each interval

PHP Class for building the timers

class Counter { 
    var $baserate;
    var $rate;
    var $start;
    var $seconds;
    var $now;
    var $month;
    var $day;
    var $year;
    var $saving;
    var $growthrate;

    function Counter($rate, $baserate,$seconds,$year,$day,$month) 
    { 
         $this->rate = $rate; 
         $this->base = $baserate;
     $this->seconds = $seconds;
     $this->year = $year;
     $this->day = $day;
     $this->month= $month;
     $this->carbonsaving(); 
     } 

     function carbonsaving() 
     { 
    $now = time();
    $start = mktime(0,0,0,$this->month,$this->day,$this->year);
    $growthrate = $this->rate * (60/$this->seconds);
        $saving = round(((($now - $start) * $growthrate) + $this->base));
    return $saving;
      } 

}
$count1 = new Counter(0,1, 2,2011,4,8); 
$count2 = new Counter(15,1, 1,2011,1,8); 
$width = 300;
$height = 350;
?>

Javascript Setting the intervals for updating on the webpage and calling the function for the initial value. These don't seem to be in sync right now

var car1 =  <?php print($count1->carbonsaving()); ?>;
var car2 =  <?php print($count1->carbonsaving()); ?>;
function  incs1()
{
car1 = car1 + <?php print($count1->rate);?>  ;
document.getElementById("carb1").innerHTML=car1;
 }  
function  incs2()
{
car2 = car2 + <?php print($count2->rate);?>  ;
document.getElementById("carb2").innerHTML=car2;
} 
setInterval('incs1()', <?php print($count1->seconds);?> *1000 );
setInterval('incs2()', <?php print($count2->seconds);?> *1000 );

Lastly, the timer sections. I want to get rid of the loading, and add an onpageload event to the body to make sure the numbers are loaded as soon as the page loads, (rather than waiting for the interval).

<span id="carb1">Loading...</span><br />
<span id="carb2">Loading...</span><br />
<span id="carb3">Loading...</span>  

The current script: The current scrip is running by a class that creates an object for each of the three counters on the page. Currently the counter is running into a few problems.

  1. The counting and the intervals aren't in sync. That is, the script's refreshing interval on the visual website isn't in sync with the count within the script. My logic must be off at some point.

  2. The problem of inputing a number to start with. I haven't added the function yet to achieve this. Does anyone know of a simple way to have an input number come into the script and create the correct start time for this program?

So it was my math. Its working now.

   function carbonsaving() 
{ 
    $now = time();
    $start = mktime(0,0,0,$this->month,$this->day,$this->year);
    $growthrate = ($this->rate / $this->seconds)  ;
        $saving = round(((($now - $start) * $growthrate)+$this->base ));
    return $saving;
} 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM