Learn VBA & Macros in 1 Week!

JavaScript - Countup Timers

Full Excel VBA Course - Beginner to Expert

Countup Timers	View Content

Hi guys, hope this is the right place to post my javascript query....

Basically, I want my countup timer to start from when the page is loaded so eg 0 in all fields... This is what i have so far:

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Count?</title>

<style type="text/css">
.main {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 68px;
	font-style: normal;
	font-weight: 400;
	color: #000;
	background-color: #FFF;
	text-align: center;
}
</style>

<script type="text/javascript">
	function showElapsedTime()
{

var startYear = "0";
var startMonth = "0"; // must be between 0 - 11
var startDay = "0"; // must be between 1 - 31
var startHour = "0"; // must be between 0 - 23
var startMinute = "0"; // must be between 0 - 59
var startSecond = "0"; // must be between 0 - 59
var startDate = new Date();
	startDate.setYear(startYear);
	startDate.setMonth(startMonth);
	startDate.setDate(startDay);
	startDate.setHours(startHour);
	startDate.setMinutes(startMinute);
	startDate.setSeconds(startSecond);
var rightNow = new Date();
var elapsedTime = rightNow.getTime() - startDate.getTime();
var one_day=1000*60*60*24;
var elapsedDays = Math.floor( elapsedTime / one_day );
var milliSecondsRemaining = elapsedTime % one_day;
var one_hour = 1000*60*60;
var elapsedHours = Math.floor(milliSecondsRemaining / one_hour );
milliSecondsRemaining = milliSecondsRemaining % one_hour;
var one_minute = 1000*60;
var elapsedMinutes = Math.floor(milliSecondsRemaining / one_minute );
milliSecondsRemaining = milliSecondsRemaining % one_minute;
var one_second = 1000;
var elapsedSeconds = Math.round(milliSecondsRemaining / one_second);
document.getElementById('elapsedTime').innerHTML = elapsedDays + " Days " + elapsedHours + " Hours " + elapsedMinutes + " Minutes " + elapsedSeconds + " Seconds";
t = setTimeout('showElapsedTime()',1000);
}
</script>
</head>
<body onload="showElapsedTime()">

<p class="main"> COUNT: </p>


<div id="elapsedTime"></div>


</body>
</html>

Can't quite figure out where i have gone wrong! Thanks in advance!
Carl

Full Excel VBA Course - Beginner to Expert

Countup In Dollars

Similar Tutorials

View Content

newbie trying to add a for sale "price" countup javascript (to my artwork) which goes up say $5 a day. Also need to start from different prices. Each piece of artwork will be on it's own page. Any ideas?

Want To Learn: A Simple Countup

Similar Tutorials

View Content

I want to get started in javascript, and while I can do html, some dhtml, and learned (and forgot) cobol, assembly and fortran, I'm not 'getting' it.

so I thought if I could start with something I want to do, and see the script for it, rather than figure out what other scripts are doing, that might work better.

Suppose I wanted to start at a fixed number, and count up by a randomized +1 or +2 every 12 hours, from now till forever, and display the resultant number.

If starting with
<script language="javascript">
Countup();
</script>

What next?

Working With Timers

Similar Tutorials

View Content

Countdown Timers

Similar Tutorials

View Content

Hello to all. I apologise if this question has been asked before, I am banging my head off a wall and am in need of some help.

I am trying to find a script (and failed, even on google) to create a countdown timer on a website. The details are :

a countdown timer that (a) runs off server time, not client time and (b) resets every 10 minutes.

The only example i could give to clear up any questions would be something extremely similar to facebook app games : eg mafia wars etc energy refill timers

so people visiting my web page would see a countdown timer that was counting down 10 minutes and then resetting itself, on the hour, 10 past, 20 past etc etc. And also, can the counter trigger a script, orwouldit be best to use a scheduled task for this? I do not want the timer to take the user from the web page.

I am not sure of the exact name of a such counter, so maybe thats why google is not giving me the answers i need. Any help would greatly be appreciated.

Also I know i maybe need php to run frrom a server time. I can code php half-competently, but javascript is out of my knowledge range at present (although i can usually see code and know how to adapt it to my needs etc)

Thankyou to all who can help

Multiple Countdown Timers

Similar Tutorials

View Content

Hello all,

It's my first post. I have 0 javascript knowledge and desperately need your help.

I need 5 countdown timers on my html site. I would like them to countdown from different minutes (i.e. 2:30, 5:15, 1:20, etc).

Here is the script I found online:

Quote:

<div style="position:absolute; overflow:hidden; left:107px; top:390px; width:40px; height:20px; z-index:18">
<script language="JavaScript">
TargetDate = new Date().valueOf() + 2*60000 + 30*1000;
BackColor = "#FFFFFF";
ForeColor = "#FF6633";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%M%%:%%S%%";
FinishMessage = "SOLD!";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
</div>
I pasted them in the div tags and it works perfectly. However, when I copy and paste them 4 times for a total of 5 timers to display, only 1 shows.

Why is this happening and how can I fix it?

Here is how I it looks on my index file after I pasted it 4 times:
Quote:
<div id="count1" style="position:absolute; overflow:hidden; left:107px; top:390px; width:45px; height:20px; z-index:29">
<script language="JavaScript">
TargetDate = new Date().valueOf() + 2*60000 + 30*1000;
BackColor = "#FFFFFF";
ForeColor = "#FF6633";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%M%%:%%S%%";
FinishMessage = "SOLD!";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
</div>

<div id="count2" style="position:absolute; overflow:hidden; left:257px; top:390px; width:45px; height:20px; z-index:30">
<script language="JavaScript">
TargetDate = new Date().valueOf() + 2*60000 + 30*1000;
BackColor = "#FFFFFF";
ForeColor = "#FF6633";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%M%%:%%S%%";
FinishMessage = "SOLD!";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
</div>

<div id="count3" style="position:absolute; overflow:hidden; left:257px; top:390px; width:45px; height:20px; z-index:31">
<script language="JavaScript">
TargetDate = new Date().valueOf() + 2*60000 + 30*1000;
BackColor = "#FFFFFF";
ForeColor = "#FF6633";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%M%%:%%S%%";
FinishMessage = "SOLD!";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
</div>

<div id="count4" style="position:absolute; overflow:hidden; left:257px; top:390px; width:45px; height:20px; z-index:32">
<script language="JavaScript">
TargetDate = new Date().valueOf() + 2*60000 + 30*1000;
BackColor = "#FFFFFF";
ForeColor = "#FF6633";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%M%%:%%S%%";
FinishMessage = "SOLD!";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
</div>

Please help!!

Sincerely,
George

Wait Until A Function Has Completed - No Timers

Similar Tutorials

View Content

This is my first post and hope someone can show me how to have JavaScript wait until a function has completed before moving on? I tried a timer, but the database does not always came back with data durning the time alloted. Thank you for any help.

Code:

function RunMerch()

//Reprompt script


{
                var fW = (typeof getFormWarpRequest == 'function' ? getFormWarpRequest() : document.forms['formWarpRequest']);
                if ( !fW || fW == undefined) { 
                fW = ( formWarpRequest_THIS_ ? formWarpRequest_THIS_ : formWarpRequest_NS_ );}
                //fW._oLstChoicesMyFieldName.selectedIndex = 0;
                var preFix = '';
                if (fW.elements['cv.id'])
                {
                preFix = fW.elements['cv.id'].value;
                }
setTimeout('oCV' + preFix + '.promptAction(\'reprompt\')', 1000);
{

//Call val () function  -- This is where I want it to complete the reprompt 

function before moving on
val();
}
}

// This will run the valtradselection() function

function val()
{
valtradselection();
}

Multi Countdown Timers W/loop

Similar Tutorials

View Content

Anyone have a script that has multi timers that will loop; Sort of like the ones used in reverse auctions.

First timer 1:24:59:59 (days/h/m/s)
Second timer 1:00:00 (h/m/s)
Third timer 1:59 (m/s)
Forth timer 59 (s)

I have one now that I found here and makes no sense to me;
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
  <font size="-4"><font face="bold">
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function zxctElsByClass(zxccls,zxcp,zxctag) {
var zxcexa=zxccls.indexOf('==');
zxccls=zxccls.replace(' ==','').replace(/ss/g,' ');
var zxcclss=zxccls.split(' ');
zxcp=zxcp||document;
zxcp=typeof(zxcp)=='object'?zxcp:document.getElementById(zxcp);
zxctag=zxctag||'*';
var zxcels=zxcp.getElementsByTagName(zxctag),zxcary=[];
for (var zxc0=0;zxc0<zxcels.length;zxc0++){
  for (var zxc0a=0;zxc0a<zxcclss.length;zxc0a++){
   var zxcreg=new RegExp('\\b'+(zxcexa<0?zxcclss[zxc0a]:zxccls)+'\\b');
   if ((zxcclss[zxc0a])&&zxcreg.test(zxcels[zxc0].className)){
    zxcary.push(zxcels[zxc0]);
    break;
   }
  }
}
return zxcary;
}

function Upgrading(hrs,mins,secs){
hrs=zxctElsByClass(hrs);
mins=zxctElsByClass(mins);
secs=zxctElsByClass(secs);
for (var zxc0=0;zxc0<hrs.length;zxc0++){
  hrs[zxc0].oop=new UpgradingOOP(hrs[zxc0],mins[zxc0],secs[zxc0])
}
}

function UpgradingOOP(hrs,mins,secs){
this.time=[hrs,mins,secs];
this.cng();
}

UpgradingOOP.prototype.cng=function(){
var hours=this.time[0].firstChild.data;
var mins=this.time[1].firstChild.data;
var secs=this.time[2].firstChild.data;
    secs=secs-1;

    if (secs<0){
        mins=mins-1;
        secs=59;
    }
    if (mins<0){
        hours=hours-1;
        mins=59;
        secs=59;
    }
    if (hours<0)
    {
        hours=0;
        mins=0;
        secs=0;
        this.time[0].firstChild.data=hours;
        this.time[1].firstChild.data=mins;
        this.time[2].firstChild.data=secs;

        window.location = document.URL;
    }
    if (mins>=0)
    {
        mins=mins-1;
        mins=mins+1;
        if (secs<10) secs="0"+secs;
        if (mins<10) mins="0"+mins;

        this.time[0].firstChild.data=hours;
        this.time[1].firstChild.data=mins;
        this.time[2].firstChild.data=secs;
this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this),1000);
    }
   }
/*]]>*/
</script></head>

<table align=\"left\" width=\"50\" height=\"50\" border=\"0\" bgcolor=\"ltblue\">
<tr>
<td><label class='uHours' >1</label>:
<label class='uMins'>1</label>:
<label class='uSecs'>1</label></td>
<td><label class='uHours' >1</label>:
<label class='uMins'>1</label>:
<label class='uSecs'>1</label></td>
<td><label class='uHours'>1</label>:
<label class='uMins'>1</label>:
<label class='uSecs'>1</label></td>
</tr>
</table>

<br />
<table align=\"left\" width=\"50\" height=\"50\" border=\"0\" bgcolor=\"ltblue\">
<tr>
<td><label class='uHours' >1</label>:
<label class='uMins'>1</label>:
<label class='uSecs'>1</label></td>
<td><label class='uHours' >1</label>:
<label class='uMins'>1</label>:
<label class='uSecs'>1</label></td>
<td><label class='uHours'>1</label>:
<label class='uMins'>1</label>:
<label class='uSecs'>1</label></td>
</tr>
</table>
<script type="text/javascript">Upgrading('uHours','uMins','uSecs');</script>
</font></font>
</body>

</html>