• Page 1 of 1
  • 1
Day Count up!
coatham
Posts: 248
Reputation: 9

Message # 1 | 6:55 PM
Is there a code i could have for this:

Event starts: 11th May 2011
Ends: 11th June 2011

Is there a code that could display: Day 1, Day 2 etc,

Thanks,
Chris


Need More In Depth Help About a topic post it here: Click Here
Animorph
Posts: 2856
Reputation: 189

Message # 2 | 7:04 PM
i honestly don't know i will search the net

- Moved to general questions -


To busy building a passive income online ;)
coatham
Posts: 248
Reputation: 9

Message # 3 | 8:21 PM
Animorph, Ok thanks and, i had it in general questions but thought it belonged in Design Cust'
Need More In Depth Help About a topic post it here: Click Here
khen
Posts: 476
Reputation: 13

Message # 4 | 1:47 AM
coatham, Yes there is. Just Google "countdown timer for website".
kostova
Posts: 97
Reputation: 9

Message # 5 | 4:28 AM
Login to your administration panel, go to any section of Customize Design and under widgets look for Event Start Countdown.

It'll suit your needs without searching hence the reason why the widgets section was made.

Pancake_old
Posts: 731
Reputation: 8

Message # 6 | 9:13 AM
Here you go your count up script

Code
<style style="text/css">

.dcountstyle{ /*Example CSS to style count up output*/
font: bold 16px Arial;
padding: 3px;
}

.dcountstyle sup{ /*Example CSS to style count up output*/
font-size: 90%
}

</style>

<script type="text/javascript">

function dcountup(startingdate, baseunit){
   this.currentTime=new Date()
   this.startingdate=new Date(startingdate)
   this.timesup=false
   this.baseunit=baseunit
   this.start()
}

dcountup.prototype.oncountup=function(){} //default action for "oncountup"

dcountup.prototype.start=function(){
   var thisobj=this
   this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
   var timediff=(this.currentTime-this.startingdate)/1000 //difference btw target date and current date, in seconds
   var oneMinute=60 //minute unit in seconds
   var oneHour=60*60 //hour unit in seconds
   var oneDay=60*60*24 //day unit in seconds
   var dayfield=Math.floor(timediff/oneDay)
   var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
   var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
   var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
   if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
    hourfield=dayfield*24+hourfield
    dayfield="n/a"
   }
   else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
    minutefield=dayfield*24*60+hourfield*60+minutefield
    dayfield=hourfield="n/a"
   }
   else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
    var secondfield=timediff
    dayfield=hourfield=minutefield="n/a"
   }
   var result={days: dayfield, hours:hourfield, minutes:minutefield, seconds:secondfield}
   this.oncountup(result)
   setTimeout(function(){thisobj.start()}, 1000) //update results every second
}

</script>

Step 2: Then, add the below sample count up code to the BODY of your page to see how to initialize the script:

Code
<div id="cpcontainer"> </div>

<script type="text/javascript">

//SYNTAX: myvariable=new dcountup(past_date_and_time_string, "baseunit")
var princewedding=new dcountup("April 9, 2005 13:30:00", "days")

princewedding.oncountup=function(result){
   //result is an object containing the current count up date/time, updated every second
   //Available properties: result["days"], result["hours"], result["minutes"], and result["seconds"]
   var mycountainer=document.getElementById("cpcontainer")
   mycountainer.innerHTML="Prince Charles and Camilla Parker have been married for: <br /><span class='dcountstyle'>"+result['days']+" <sup>days</sup> "+result['hours']+" <sup>hours</sup> "+result['minutes']+" <sup>minutes</sup> "+result['seconds']+" <sup>seconds</sup></span>"
}

</script>

The code of Step 2 shows you how to create a count up. First, call the dcount() function:

//SYNTAX: myvariable=new dcountup(past_date_and_time_string, "baseunit")
var princewedding=new dcountup("April 9, 2005 13:30:00", "days")

It accepts the following two parameters:

past_date_and_time_string: A string containing the complete count up date and time using the format: "April 9, 2005 13:30:00". As you can see, the time is in military (24 hour) format.

baseunit (string): The top level unit to count up using. Valid values are "days", "hours", "minutes", or "seconds." If you enter "hours", for example, the script will count the number of hours, minutes, and seconds left until the event, instead of starting at days.

Once you've called dcountup(), the script begins counting up, though no results are shown. It's up to you to tell the script exactly what to do as each second passes, using the "oncountup" event handler of the script instance:

Code
princewedding.oncountup=function(result){
    //Define action to take as script counts up each second
    //Available properties: result["days"], result["hours"], result["minutes"], and result["seconds"]
}

Whatever code you define inside this event handler will be run every second as the script ticks away!
The lone parameter "result" gives you access to the days, hours, minutes, and seconds that together add up to the amount of time that has passed. Each component is accessed via:

•result["days"]
•result["hours"]
•result["minutes"] and
•result["seconds"]

inside your custom function, respectively. So with that said, here's how you might display the results of a countup in an arbitrary DIV on the page:

Code
<div id="cpcontainer"> </div>

<script type="text/javascript">

princewedding.oncountup=function(result){
    var mycountainer=document.getElementById("cpcontainer")
    mycountainer.innerHTML="Prince Charles and Camilla Parker have been married for:"+ result['days']+" days "+result['hours']+" hours "+result['minutes']+" minutes "+result['seconds']+" seconds"
}

</script>

It's up to you to customize the action to take "oncountup" based on what you wish to do and obviously your knowledge of JavaScript in general. If you take a look at the code of Step 2, you'll see I've formatted the results using tags such as <span> and <sup>.


ePal(Join and be rewarded with our new look)
Bookface
K-Love (Listen Live)
Post edited by Pancake - Thursday, 2011-02-17, 9:13 AM
coatham
Posts: 248
Reputation: 9

Message # 7 | 4:39 PM
Thanks smile
Need More In Depth Help About a topic post it here: Click Here
  • Page 1 of 1
  • 1
Search: