Count Down Timer

Count Down Timer

Post by anarchy420x on Mon May 21, 2012 8:13 pm
([msg=66510]see Count Down Timer[/msg])

I came across this code for a count down timer, but it's not quite what I am looking for. I want to create a 24 hour count down clock that starts whenever someone views my webpage. I'd like it to be in a 00:00:00 format. Any Idea's or places I could look? I'll continue my research in the meantime.

Code: Select all
<? $tomorrow = mktime(0, 0, 0, date("m"), date("d")+1,
date("y")); echo "".date("F d, Y", $tomorrow); ?>
A broken clock is right twice a day, however, I am neither up that early nor up that late...
anarchy420x
Poster
Poster
 
Posts: 279
Joined: Thu Oct 16, 2008 12:43 am
Blog: View Blog (0)


Re: Count Down Timer

Post by centip3de on Mon May 21, 2012 10:35 pm
([msg=66513]see Re: Count Down Timer[/msg])

anarchy420x wrote:I came across this code for a count down timer, but it's not quite what I am looking for. I want to create a 24 hour count down clock that starts whenever someone views my webpage. I'd like it to be in a 00:00:00 format. Any Idea's or places I could look? I'll continue my research in the meantime.

Code: Select all
<? $tomorrow = mktime(0, 0, 0, date("m"), date("d")+1,
date("y")); echo "".date("F d, Y", $tomorrow); ?>


Is what you're looking for? :

http://www.brighthub.com/internet/web-d ... /9471.aspx
Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. -Rick Cook
User avatar
centip3de
Moderator
Moderator
 
Posts: 1412
Joined: Fri Aug 20, 2010 5:46 pm
Blog: View Blog (0)


Re: Count Down Timer

Post by anarchy420x on Mon May 21, 2012 10:58 pm
([msg=66514]see Re: Count Down Timer[/msg])

centip3de wrote:
anarchy420x wrote:I came across this code for a count down timer, but it's not quite what I am looking for. I want to create a 24 hour count down clock that starts whenever someone views my webpage. I'd like it to be in a 00:00:00 format. Any Idea's or places I could look? I'll continue my research in the meantime.

Code: Select all
<? $tomorrow = mktime(0, 0, 0, date("m"), date("d")+1,
date("y")); echo "".date("F d, Y", $tomorrow); ?>


Is what you're looking for? :

http://www.brighthub.com/internet/web-d ... /9471.aspx


Thank you, It looks like I am going to have to delve deeper into PHP to really know what I am looking at.

-- Fri May 25, 2012 12:41 am --

Ok, so I've been working at trying to edit this code for a few days now. I don't know enough javascript to edit certain values. I am looking to know how to change the dates to a 24 hour count down that activates client side. I also want to know how to move it to the upper right corner. Here is the code.

Code: Select all
<style style="text/css">

.lcdstyle{ /*Example CSS to create LCD countdown look*/
background-color:black;
color:#FF0000;
font: bold 18px MS Sans Serif;
padding: 3px;
}

.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 80%
}

</style>

<script type="text/javascript">

/***********************************************
* Dynamic Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}

cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}

cdtime.prototype.showresults=function(){
var thisobj=this


var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
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"
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////

//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access "Days" left
//Use arguments[1] to access "Hours" left
//Use arguments[2] to access "Minutes" left
//Use arguments[3] to access "Seconds" left

//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc


function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until May 23, 2012 00:00:00"
}
else{ //else if target date/time met
var displaystring="Future date is here!"
}
return displaystring
}

function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span> left until this Christmas"
}
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("Christmas is here!") //Instead, perform a custom alert
}
return displaystring
}

</script>


-- Fri May 25, 2012 12:42 am --

Oh, and here is the second part of the code, but I don't think it makes much of a difference.

Code: Select all
<div id="countdowncontainer"></div>
<br />
<div id="countdowncontainer2"></div>

<script type="text/javascript">

var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00")
futuredate.displaycountdown("days", formatresults)

var currentyear=new Date().getFullYear()
//dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1
var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>25)? currentyear : currentyear
var christmas=new cdtime("countdowncontainer2", "December 25, "+thischristmasyear+" 0:0:00")
christmas.displaycountdown("days", formatresults2)

</script>
A broken clock is right twice a day, however, I am neither up that early nor up that late...
anarchy420x
Poster
Poster
 
Posts: 279
Joined: Thu Oct 16, 2008 12:43 am
Blog: View Blog (0)



Return to Web Design

Who is online

Users browsing this forum: No registered users and 0 guests

cron