Learn VBA & Macros in 1 Week!

JavaScript - [merged] Countdown Clock Problem

Full Excel VBA Course - Beginner to Expert

[merged] Countdown Clock Problem	View Content

I have a javascript countdown clock in my camping page on my website
www.bsatroop459.org. It works on IE7 and IE8 but it will not work on Firefox. Could somebody give me a clue as why my countdown clock will not work in Firefox.

The is a white box I can't seem to get rid of!

<script language="JavaScript">

CountActive = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, and %%S%% Seconds";
</script><script language="JavaScript" type="text/javascript">


</script>


<form name="clock_form">

<tr><td align="center" bgcolor="maroon"><font color="yellow" face="Arial, Helvetica, sans-serif"><b>Countdown to Bartle Summer Camp 2011</b> </font></td></tr>
<tr>
<td align="center"><input type="text" name="clock" size="60"></a></td></tr>

</form>



Thank you for your time.

Mike

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Countdown Clock

Countdown Clock?

[question] Countdown Clock

Countdown Clock - With Time Zone Specification?

Java Clock Problem

Oop / Classes - Multi Instances Merged

Countdown Script Problem

Countdown Timer Problem

Countdown Timer Problem

Problem In Ff And Chrome With Countdown Timer

Problem Coding A Time Countdown

Problem Self Solved - Countdown Timer To New Date..

Population Clock

Javascript Clock - Need Help

Javascript Clock With A Tweak

Learn VBA & Macros for Excel in 1 Week!

Countdown Clock

Similar Tutorials

Hey all,

I'm trying to sort a countdown clock for my website:
http://www.cyber-technix.com/corps/index.php/

My vision of it was a transparent background, Blue text and a simple Day : Hour : Minute : Second Layout.

I found a free .js countdown clock at http://www.hashemian.com/tools/javascript-countdown.htm

Anyone got any better suggestions?

I havn't used .js much so I may need some help implementing it if someone would be kind enough to help me out, thanks.

Countdown Clock?

Similar Tutorials

I figured if there was one it would be a Javascript but does anyone know of a countdown clock that almost looks like a counter/turnstile number row? Like this sorta:

I've been looking for one where I have the numbers look just like that and 'push' upward as the times (days, minutes, seconds) go on. Hopefully someone knows of a script >< Thanks alot!!!

[question] Countdown Clock

Similar Tutorials

Hi!

How would I type If I wanted to have this timer countdown to 3.00PM and then stop and display a message and reset itself by midnight and repeat itself every week day?

Thanks in advance.

Cheers

Countdown Clock - With Time Zone Specification?

Similar Tutorials

Can someone help me modify this script be set to a specific Time Zone rather than picking up the time from the local machine?
I want it to countdown to 6:00 am EST.

http://javascript.internet.com/time-...countdown.html

Can anyone tell me what to add where if it is possible? Thank you in advance.

Java Clock Problem

Similar Tutorials

The problem that I am having is that I want to have a page that displays a clock by calling a .js file function. This is shown below:

Actual page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/
xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<?php
session_start();
include "../../../u0000700/wes_ica_08_09/wes_ica.inc";
?>
<head>
<link rel="stylesheet" type="text/css" href="wes_ica.css" />
<script type="text/javascript" src="wes_ica.js"></script>
<script type="text/javascript" src="../../../u0000700/wes_ica_08_09/wes_ica.js"></script>
<title>Clock</title>
</head>

<body onload="globalclock()">
<form>
<p><object height="200" width="200" type="image/svg+xml" data="wes_ica.svg">
</object></p>
<p><input type="text" id="globalclock" /></p>
</form>

The code it calls in the "../../../u0000700/wes_ica_08_09/wes_ica.js" file is :

function globalclock() {
var clocktime = new Date();
clocktime.setMinutes(clocktime.getMinutes()+cities[city][1]);
maketimedisp(clocktime);
timestring="";
timestring+=cities[city][0];
timestring+=" - ";

switch (dow) {
case "n":
timestring=timestring;
break;
case "s":
timestring=timestring+startdayofweek.substring(0,3)+" ";
break;
case "f":
timestring=timestring+startdayofweek+" ";
break;
default:
timestring="Error";
}
switch (cdate) {
case "n":
break;
case "a":
case "b":
case "c":
case "d":
case "f":
case "g":
case "h":
case "i":
case "k":
case "l":
case "m":
case "o":
timestring=timestring+startday;
break;
case "j":
case "e":
case "p":
if (startday>9) {
timestring=timestring+startday
} else{
timestring=timestring+"0"+startday
}
break;
default:
timestring="Error";
}
if (startday<20) {
de=dayending[startday];
} else {
de=dayending[startday%10];
}
switch (cdate) {
case "n":
case "b":
case "d":
case "e":
case "g":
case "i":
case "j":
case "l":
case "o":
case "p":
break;
case "a":
case "c":
case "f":
case "h":
case "k":
case "m":
timestring=timestring+de;
break;
default:
timestring="Error";
}
switch (cdate) {
case "n":
break;
case "a":
case "b":
case "f":
case "g":
case "k":
case "l":
timestring=timestring+" "+startmonth+" "
break;
case "c":
case "d":
case "h":
case "i":
case "m":
case "o":
timestring=timestring+" "+startmonth.substring(0,3)+" "
break;
case "e":
case "j":
if (start31month>9) {
cmonth=start31month
} else {
cmonth="0"+start31month;
}
timestring=timestring+"/"+cmonth+"/"
break;
case "p":
if (start31month>9) {
cmonth=start31month
} else {
cmonth="0"+start31month;
}
timestring=timestring+"/"+cmonth+" "
break;
default:
timestring="Error";
}
syear=startyear;
switch (cdate) {
case "n":
case "k":
case "l":
case "m":
case "o":
case "p":
break;
case "a":
case "b":
case "c":
case "d":
case "e":
timestring=timestring+syear+" ";
break;
case "f":
case "g":
case "h":
case "i":
case "j":
yearstring=""+syear;
tempyear=yearstring.match(/..$/);
timestring=timestring+tempyear+" ";
break;
default:
timestring="Error";
}
switch (ctime) {
case "n":
break;
case "a":
case "b":
case "c":
case "d":
timestring=timestring+starthour;
break;
case "e":
case "f":
timestring=timestring+start24hour;
break;
default:
timestring="Error";
}
switch (ctime) {
case "n":
break;
case "a":
case "b":
case "c":
case "d":
case "e":
case "f":
if (startminute<10) {
sminute=":0"+startminute;
} else {
sminute=":"+startminute;
}
timestring=timestring+sminute;
break;
default:
timestring="Error"
}
switch (ctime) {
case "n":
case "b":
case "d":
case "f":
break;
case "a":
case "c":
case "e":
if (startsecond<10) {
ssecond=":0"+startsecond;
} else {
ssecond=":"+startsecond;
}
timestring=timestring+ssecond;
break;
default:
timestring="Error"
}
switch (ctime) {
case "n":
case "c":
case "d":
case "e":
case "f":
break;
case "a":
case "b":
timestring=timestring+" "+startmeridian;break;
default:
timestring="Error";
}
document.getElementById("globalclock").value = timestring;
id = setTimeout("globalclock()", 1000);
}

The problem that I am having is that I have to declare 3 variables in the text/javascript" src="wes_ica.js file.
These variables a
dow "f" or "s"
cdate one from "a" to "p" except "n"
ctime one from "a" to "f"

These variables are then used to make the globalclock function work. I just do not know how to lay this out on the page. Things such as the header etc. Do they have to be in a function?

The layout that I have so far is this:
var dow = ("f","s");
var cdate = ("a","b","c","d","e","f","g","h","i","j","k","l","m","o","p");
var ctime = ("a","b","c","d","e","f");

Oop / Classes - Multi Instances Merged

Similar Tutorials

Hi,

I have a question about an oop/class style form of javascript programming.

I have stripped the code down to the basic minimum. The problem is I have created two instances of the same class and have entered data into those classes. But as you will see the two separate instances of the class appear to share the same data.

How do I get my class structure working so separate instances will retain their separate data?

Here is the code:

Index.html
Code:

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
debugger;

// Do this because a page resart seems to keep old data
function SetGlobals()
{
	var ui;
	var el;
	
	// Arr00
	ui = document.getElementById("Arr00");
	el = arr0.arrayGet(0);
	ui.innerHTML = el.m_String;
	
	// Arr01
	ui = document.getElementById("Arr01");
	el = arr0.arrayGet(1);
	ui.innerHTML = el.m_String;
	
	// Arr10
	ui = document.getElementById("Arr10");
	el = arr1.arrayGet(0);
	ui.innerHTML = el.m_String;
	
	// Arr11
	ui = document.getElementById("Arr11");
	el = arr1.arrayGet(1);
	ui.innerHTML = el.m_String;
}

function MyOnLoad()
{
	SetGlobals();
}
</script>
</head>
<body onload="MyOnLoad()" style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden; background:#000000">

<div id="divScreen" style="display: block; width:100%; height="100%">
	<div id="divMenu" style='float: left; background:#00FF00; border-color: #000000; border-width: 1px;'>
		<table>
			<tr>
				<td>
					Array 0/String 0: <label id="Arr00"></label>
				</td>
			</tr>
			<tr>
				<td>
					Array 0/String 1: <label id="Arr01"></label>
				</td>
			</tr>
			<tr>
				<td>
					Array 1/String 0: <label id="Arr10"></label>
				</td>
			</tr>
			<tr>
				<td>
					Array 1/String 1: <label id="Arr11"></label>
				</td>
			</tr>
		</table>
	</div>
	<div id="divMain" style='height: 100%; background:#0000FF; margin-left: 250px; border-color: #000000; border-width: 1px;'>
	</div>
</div>
</body>
</html>

Test.js
Code:

var BaseARR = function()
{
	_arr = []; // new Array();
		
	// Public functions that can access private members
	this.Add = function(arg)
	{
        var i, addAt;
 
		if(arg==null || (addAt = FindEnterPos(arg))<0)
		    return false;
				
		// since adding and not deleting anything, nothing of value will be returned
		_arr.splice(addAt, 0, arg);

        return true;
	};
	// This finds the entry position for in
    FindEnterPos = function(arg)
    {
		return (_arr.length + 1);
    };
	this.arrayGet = function(i)
	{
		return ((_arr != null && i >= 0 && i < _arr.length) ? _arr[i] : null);
	};
};

var stringId = function(id, str)
{
	// public has a this. , privates have just var
	this.m_Id = id; // int
	this.m_String = str; // string
};

// This so allow statics
var stringIdARR = function()
{
	BaseARR.call(this);
};

Countdown Script Problem

Similar Tutorials

Thread duplicated see one above!

Countdown Timer Problem

Similar Tutorials

Hi, Im looking for a simple script or solution that will allow a timer to count down 48hrs from a set time of the day and then after that reset and start the process again.

For Example:
Order within 23 hours 6 minutes
for Delivery Tommorow

The problem I have got is im not sure how to create a timer that does not reset every time you refresh the browser etc.

Any hep would be great as im stumped with this one!

Thanks

Countdown Timer Problem

Similar Tutorials

Code:

<script language="JavaScript">
TargetDate = "12/5/2009 12:00 PM";
BackColor = "grey";
ForeColor = "white";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "Its finally here";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>

i found this code on a website. it is a countdown timer. and i wanted to put it on a forum. but i think there will be a problem when others view it.. i think that other people from different time zones will see the time countdown different times.. is there a way to include a specific time zone (i.e. mine?) in this code?

BTW its suppose to go to December 5, 2009. i am in GMT-6 Central Time.

Problem In Ff And Chrome With Countdown Timer

Similar Tutorials

OK well one I have tried to contact the author of this application and he no longer writes or supports it and I know nothing about javascript... so here I am BEGGING FOR HELP!!! any body will to give this a go would love to try anything

here is my problem the timer is self works fine but since new updates (RECENT) in Chrome and Firefox when you move away from the window it stop the count then when you come back to it the count starts again I dont want the count to stop any ideas would be great

Code:

window.onload=progressBarInit;



// Timer Bar - Version 1.0

// Author: Brian Gosselin of http://scriptasylum.com


var loadedcolor='<?php echo $gSurfLoadColour; ?>' ;       // PROGRESS BAR COLOR

var unloadedcolor='<?php echo $gSurfUnloadColour; ?>';     // COLOR OF UNLOADED AREA

var bordercolor='<?php echo $gSurfLoadBoardColour; ?>';            // COLOR OF THE BORDER

var barheight=15;                  // HEIGHT OF PROGRESS BAR IN PIXELS

var barwidth=190;                  // WIDTH OF THE BAR IN PIXELS

var waitTime=<?php echo $gSurfTimer - $members_time_deduct; ?>;                   // NUMBER OF SECONDS FOR PROGRESSBAR



// THE FUNCTION BELOW CONTAINS THE ACTION(S) TAKEN ONCE BAR REACHES 100%.

// IF NO ACTION IS DESIRED, TAKE EVERYTHING OUT FROM BETWEEN THE CURLY BRACES ({})

// BUT LEAVE THE FUNCTION NAME AND CURLY BRACES IN PLACE.

// PRESENTLY, IT IS SET TO DO NOTHING, BUT CAN BE CHANGED EASILY.

// TO CAUSE A REDIRECT TO ANOTHER PAGE, INSERT THE FOLLOWING LINE:

// window.location="http://redirect_page.html";

// JUST CHANGE THE ACTUAL URL OF COURSE :)





//*****************************************************//

//**********  DO NOT EDIT BEYOND THIS POINT  **********//

//*****************************************************//



var ns4=(document.layers)?true:false;

var ie4=(document.all)?true:false;

var blocksize=(barwidth-2)/waitTime/10;

var loaded=0;

var PBouter;

var PBdone;

var PBbckgnd;

var Pid=0;

var txt='';

if(ns4){

txt+='<table border=0 cellpadding=0 cellspacing=0><tr><td>';

txt+='<ilayer name="PBouter" visibility="hide" height="'+barheight+'" width="'+barwidth+'">';

txt+='<layer width="'+barwidth+'" height="'+barheight+'" bgcolor="'+bordercolor+'" top="0" left="0"></layer>';

txt+='<layer width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+unloadedcolor+'" top="1" left="1"></layer>';

txt+='<layer name="PBdone" width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+loadedcolor+'" top="1" left="1"></layer>';

txt+='</ilayer>';

txt+='</td></tr></table>';

}else{

txt+='<div id="PBouter" style="position:relative; visibility:hidden; background-color:'+bordercolor+'; width:'+barwidth+'px; height:'+barheight+'px;">';

txt+='<div style="position:absolute; top:1px; left:1px; width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px; background-color:'+unloadedcolor+'; font-size:1px;"></div>';

txt+='<div id="PBdone" style="position:absolute; top:1px; left:1px; width:0px; height:'+(barheight-2)+'px; background-color:'+loadedcolor+'; font-size:1px;"></div>';

txt+='</div>';

}



function incrCount(){

window.status="<?php echo $gSurfWStatusCD; ?>";

loaded++;

if(loaded<0)loaded=0;

if(loaded>=waitTime*10){

clearInterval(Pid);

loaded=waitTime*10;

setTimeout('hidebar()',100);

}

resizeEl(PBdone, 0, blocksize*loaded, barheight-2, 0);

//alert((waitTime+1)-Math.ceil(loaded/10));

tempcnt = (waitTime+1)-Math.ceil(loaded/10);

document.getElementById('count').innerHTML=tempcnt;

}



function breaker_bar() {

parent.np=1;

parent.framesBreaking(false);

return true;

}



function wrong() {

	parent.wsftpaw.location.replace('../index.php?_w=wrong_button');

}



function submitform(id) {



parent.np=1;

parent.framesBreaking(false);

document.surfform.cl.value=id;

document.surfform.submit();

}



function hidebar(){

document.getElementById('count').innerHTML=0;

window.status='<?php echo $gSurfWStatusEnd; ?>';

switchDiv('counter', false,0);

switchDiv('buttons', true,0);



}



//THIS FUNCTION BY MIKE HALL OF BRAINJAR.COM

function findlayer(name,doc){

var i,layer;

for(i=0;i<doc.layers.length;i++){

layer=doc.layers[i];

if(layer.name==name)return layer;

if(layer.document.layers.length>0)

if((layer=findlayer(name,layer.document))!=null)

return layer;

}

return null;

}



function progressBarInit(){

PBouter=(ns4)?findlayer('PBouter',document):(ie4)?document.all['PBouter']:document.getElementById('PBouter');

PBdone=(ns4)?PBouter.document.layers['PBdone']:(ie4)?document.all['PBdone']:document.getElementById('PBdone');

resizeEl(PBdone,0,0,barheight-2,0);

if(ns4)PBouter.visibility="show";

else PBouter.style.visibility="visible";

Pid=setInterval('incrCount()',95);



//Load the rest of the pages, loading sequence system

Problem Coding A Time Countdown

Similar Tutorials

I am new to JavaScript and am enrolled in an introductory class. My assignment is to create JavaScript for a Web page that counts down the time left until several events. I have been working on this code for several hours now, and I have done everything the textbook instructs me to do, yet when I load the Web page I still get blank fields where my countdown info should be.

I would really appreciate it if someone could look through the code I've created and give me some pointers.

I have an .htm file and an external .js file. The .htm file is:
Code:

<html>
<head>
<!-- 
   New Perspectives on JavaScript
   Tutorial 2
   Review Assignment

   Events in Dixon
   Author: 
   Date:   

   Filename:         events.htm
   Supporting files: dates.js, dixon.css, logo.jpg
-->

<title>Upcoming Events at Dixon</title>
<link href="dixon.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="dates.js"></script>

<script type="text/javascript">
	function showCountdown() {
		var today = new Date("December 1, 2007 6:31:45");
		var Date1 = new Date("January 14, 2007 10:00:00");
		var Date2 = new Date("May 21, 2007 12:00:00");
		var Date3 = new Date("July 4, 2007 21:00:00");
		var Date4 = new Date("September 1, 2007 12:00:00");
		var Date5 = new Date("December 1, 2007 11:30:00");
		var Date6 = new Date("December 31, 2007 15:30:00");
		document.eventform.thisDay.value = showDateTime(today);
		changeYear(today, Date1);
		changeYear(today, Date2);
		changeYear(today, Date3);
		changeYear(today, Date4);
		changeYear(today, Date5);
		changeYear(today, Date6);
		document.eventform.count1.value = countdown(today, Date1);
		document.eventform.count2.value = countdown(today, Date2);
		document.eventform.count3.value = countdown(today, Date3);
		document.eventform.count4.value = countdown(today, Date4);
		document.eventform.count5.value = countdown(today, Date5);
		document.eventform.count6.value = countdown(today, Date6);
}
</script>

</head>

<body onload="setInterval('showCountdown()',100)">

<form name="eventform" id="eventform" action="">

<div id="links1">
   <a href="#">Home</a>
   <a href="#">City Services</a>
   <a href="#">City Agencies</a>
   <a href="#">Mayor's Office</a>
   <a href="#">News Today</a>
   <a href="#">Upcoming Events</a>
</div>
<div id="logo">
   <img src="logo.jpg" alt="New Years Bash" />
</div>
<div id="links2">
   <a href="#">Site Map</a>
   <a href="#">Search Engine</a>
   <a href="#">Public Notices</a>
   <a href="#">Survey Form</a>
   <a href="#">Contact Us</a>
   <a href="#">E-Government</a>
</div>


<div id="main">
<h3>Countdown to Upcoming Events</h3>
<table>
<tr>
   <td></td>
   <th style="text-align: right">Current Time </th>
   <td><input name="thisDay" id="thisDay" readonly="readonly" size="40" /></td>
</tr>
<tr>
   <th>Event</th>
   <th>Starting Time</th>
   <th>Countdown to Event</th>
</tr>
<tr>
   <td><input value="Heritage Day" readonly="readonly" size="20" /></td>
   <td><input value="Jan 14 at 10:00 am"readonly="readonly" size="20" /></td>
   <td><input name="count1" id="count1" size="40" /></td>
</tr>
<tr>
   <td><input value="Spring Day Rally" readonly="readonly" size="20" /></td>
   <td><input value="May 21 at 12:00 pm"readonly="readonly" size="20" /></td>
   <td><input name="count2" id="count2" size="40" /></td>
</tr>
<tr>
   <td><input value="July 4th Fireworks" readonly="readonly" size="20" /></td>
   <td><input value="Jul 4 at 9:00 pm" readonly="readonly" size="20" /></td>
   <td><input name="count3" id="count3" size="40" /></td>
</tr>
<tr>
   <td><input value="Summer Bash" readonly="readonly" size="20" /></td>
   <td><input value="Sep 1 at 12:00 pm" readonly="readonly" size="20" /></td>
   <td><input name="count4" id="count4" size="40" /></td>
</tr><tr>
   <td><input value="Holiday Party" readonly="readonly" size="20" /></td>
   <td><input value="Dec 1 at 11:30 am" readonly="readonly" size="20" /></td>
   <td><input name="count5" id="count5" size="40" /></td>
</tr>
<tr>
   <td><input value="New Year's Bash" readonly="readonly" size="20" /></td>
   <td><input value="Dec. 31 at 3:30 pm" readonly="readonly" size="20" /></td>
   <td><input name="count6" id="count6" size="40" /></td>
</tr>
</table>
</div>

</form>
</body>
</html>

The external .js file is:
Code:

/*
   New Perspectives on JavaScript
   Tutorial 2
   Review Assignment

   Author: 
   Date:  
 
   Function List:
   showDateTime(time)
      Returns the date in a text string formatted as:
      mm/dd/yyyy at hh:mm:ss am

   changeYear(today, holiday)
      Changes the year value of the holiday object to point to the
      next year if it has already occurred in the present year

   countdown(stop, start)
      Displays the time between the stop and start date objects in the
      text format:
      dd days, hh hrs, mm mins, ss secs
*/

function showDateTime(time) {
   date = time.getDate();
   month = time.getMonth()+1;
   year = time.getFullYear();

   second = time.getSeconds();
   minute = time.getMinutes();
   hour = time.getHours();

   ampm = (hour < 12) ? " am" : " pm";
   hour = (hour > 12) ? hour - 12 : hour;
   hour = (hour == 0) ? 12 : hour;

   minute = minute < 10 ? "0"+minute : minute;
   second = second < 10 ? "0"+second : second;

   return month+"/"+date +"/"+year+" at "+hour+":"+minute+":"+second+ampm;
}

function changeYear(today, holiday) {
	year = today.getFullYear();
	holiday.setFullYear(year);
	(holiday < today) ? ++year : year;
	holiday.setFullYear(year);
}

function countdown(start, stop) {
	var time = stop - start;
	var days = Math.floor(time/(1000*60*60*24);
	var hours = Math.floor(time/1000*60*60);
	var minutes = Math.floor(time/1000*60);
	var seconds = Math.floor(time/1000);
	return days +"days, "+ hours +"hrs, "+ minutes +"mins, "+ seconds +"secs"+;
}

If there is any more information that is needed, I will do my best to give that, as well.

Thanks!

Problem Self Solved - Countdown Timer To New Date..

Similar Tutorials

Here is yet another project of mine...ive got most done but the timers are working in milliseconds and the hours, minutes, and seconds arent working right. heres the code.

THE .JS FILE
Code:

/*  Function List:
   showDateTime(time)
      Returns the date in a text string formatted as:
      mm/dd/yyyy at hh:mm:ss am

   changeYear(today, holiday)
      Changes the year value of the holiday object to point to the
      next year if it has already occurred in the present year

   countdown(stop, start)
      Displays the time between the stop and start date objects in the
      text format:
      dd days, hh hrs, mm mins, ss secs
*/

function showDateTime(time) {
   date = time.getDate();
   month = time.getMonth()+1;
   year = time.getFullYear();

   second = time.getSeconds();
   minute = time.getMinutes();
   hour = time.getHours();

   ampm = (hour < 12) ? " am" : " pm";
   hour = (hour > 12) ? hour - 12 : hour;
   hour = (hour == 0) ? 12 : hour;

   minute = minute < 10 ? "0"+minute : minute;
   second = second < 10 ? "0"+second : second;

   return month+"/"+date +"/"+year+" at "+hour+":"+minute+":"+second+ampm;
}

function changeYear(today, holiday){
	year = today.getFullYear();
	holiday.setFullYear(year);
	(holiday < today) ? year++ : year;
	holiday.setFullYear(year);
    }

function countdown(start, stop) {
	time = stop - start;
	days = Math.floor(time/1000*60*60*24);
	hours = (days - Math.floor(days))*24;
	
	minutes = (hours - Math.floor(hours))*60;
	
	seconds = (minutes - Math.floor(minutes))*60;
	
	return days + " days," + hours + "hours," + minutes + " mins," + seconds + "secs";
    }

THE HTML FILE..
Code:

<script type="text/javascript" src="dates1.js"></script>

<script type="text/javascript">
	
	function showCountdown() {
		var today = new Date();
		var Date1 = new Date("January 14, 2007 10:00:00");
		var Date2 = new Date("May 21, 2007 12:00:00");
		var Date3 = new Date("July 4, 2007 21:00:00");
		var Date4 = new Date("September 1, 2007 12:00:00");
		var Date5 = new Date("December 1, 2007 11:30:00");
		var Date6 = new Date("December 31, 2007 15:30:00");
		document.eventform.thisDay.value = showDateTime(today);
		changeYear(today, Date1);
		changeYear(today, Date2);
		changeYear(today, Date3);
		changeYear(today, Date4);
		changeYear(today, Date5);
		changeYear(today, Date6);
		document.eventform.count1.value = countdown(today, Date1);
		document.eventform.count2.value = countdown(today, Date2);
		document.eventform.count3.value = countdown(today, Date3);
		document.eventform.count4.value = countdown(today, Date4);
		document.eventform.count5.value = countdown(today, Date5);
		document.eventform.count6.value = countdown(today, Date6);
	}
</script>
		
</head>

<body onload="setInterval('showCountdown()' ,100)">

yes ive done all the coding just cant figure out why the timers wont work correctly.

Js Clock

Similar Tutorials

Hello. I am trying to stop and then start my clock, but something goes wrong
Code:

<script type="text/javascript">

function start_clock(){
    
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
// add a zero in front of numbers<10
m = checkTime(m);
s = checkTime(s);
document.getElementById('clck').innerHTML = h+":"+m+":"+s;
t=setTimeout('start_clock()');
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}

    var intval=""
    function start_Int(){
        if(intval==""){
          intval=window.setInterval("start_clock()",1000)
      }else{
          stop_Int()
      }
    }

    function stop_Int(){
        if(intval!=""){
          window.clearInterval(intval)
          intval=""
          myTimer.innerHTML="Interval Stopped"
      }
    }

    
</script>


<h1>A live clock in JavaScript</h1>
</head>
<body onload="start_clock()">

<p>The time according to your PC is </p>

<span id="clck">Interval Stopped</span>
    <br><br><br>
    <input type="button" value="Start" onclick="start_Int()">
    <input type="button" value="Stop" onclick="stop_Int()">

Any help will be appreciated.

Clock Update

Similar Tutorials

Hello, I'm somewhat new to JavaScript and for my website, I decided to make a clock for the website in this format:
Saturday, October 17, 2009
5:56:14 p.m.

The only issue is that it won't update every second. Below is the coding:

External JavaScript:
Code:

function dateClock()
{
// Coding
}
setTimeout("dateClock()", 1000);

HTML:
Code:

...
<script src="date.js" type="text/javascript">
</script>
</head>
<body>
<script type="text/javascript">
document.write("<p style='margin:-15px 0px;background-color:black;position:fixed;padding:5px;'>"+Day+", "+Month+" "+date+", "+Year+"<br />"+Hour+":"+Minute+":"+Sec+" "+Suffix+"</p>");
</script>

What can I do to make it update? Thanks.

Population Clock

Similar Tutorials

Hello all!

For the past few days I've been having trouble trying to figure out how to do something. I want to code a world population clock similar to the one here, but simpler: I want the user to be able to choose future years up to 2020 (just years, not months/days), and have the population grow by 1 percent each year.

So far I have a code for the world population, but I have no clue where to begin in terms of making a list of the years with the option to increase the population.

Could anyone point me in the right direction? I'd appreciate any help!

Heres the code I have:

<body>

<script type="text/javascript">

function maind(){
startdate = new Date()
now(startdate.getYear(),startdate.getMonth(),startdate.getDate(),startdate.getHours(),startdate.getM inutes(),startdate.getSeconds())
}

function ChangeValue(number,pv){
numberstring =""
var j=0
var i=0
while (number > 1)
{

numberstring = (Math.round(number-0.5) % 10) + numberstring
number= number / 10
j++
if (number > 1 && j==3) {
numberstring = "," + numberstring
j=0}
i++
}

numberstring=numberstring

if (pv==1) {document.getElementById("worldpop").innerHTML=numberstring }
}

function now(year,month,date,hours,minutes,seconds){
startdatum = new Date(year,month,date,hours,minutes,seconds)

var now = 5600000000.0
var now2 = 5690000000.0
var groeipercentage = (now2 - now) / now *100
var groeiperseconde = (now * (groeipercentage/100))/365.0/24.0/60.0/60.0
nu = new Date ()
schuldstartdatum = new Date (96,1,1)
secondenoppagina = (nu.getTime() - startdatum.getTime())/1000
totaleschuld= (nu.getTime() - schuldstartdatum.getTime())/1000*groeiperseconde + now
ChangeValue(totaleschuld,1);

timerID = setTimeout("now(startdatum.getYear(),startdatum.getMonth(),startdatum.getDate(),startdatum.getHours( ),startdatum.getMinutes(),startdatum.getSeconds())",200)
}

window.onload=maind
</script>

Current world population (estimated): <span id="worldpop" style="font-weight: bold"></span>.

</body>

Game Clock

Similar Tutorials

Hello, I am trying to create a clock for my video game. I need to begin the clock at zero and count while the game is going. I need to have the clock count in standard minutes and seconds but not be based on the actual time of day. I am coding in javascript for an applet.

Manage Clock

Similar Tutorials

Hello, I would like help about my problem. I want to find the proper function to manage a clock . What I want to do is, when a city is selected from the drop down menu, the display of the clock must be changed depended by the city . Also to allow the user to vary the values of the three variables that control the display of a clock.

<body onload="globalclock()">
<input type="text" size="50" id="globalclock" />
<select ......... onchange="">
<option value=''>select city</option>
<option value='0'>Athens</option>
<option value='1'>New York</option>
....
....
<option value='36'>.........</option>
</select>

//default clock
dow="f";
cdate="a";
ctime="a";
city = "22"; //its my default city when page load

I use globalclock() function but with no results

Javascript Clock - Need Help

Similar Tutorials

Javascript for clock:

Code:

 function showTime (dateObj) {
	thissecond=dateObj.getSeconds();
	thisMinute=dateObj.getMinutes();
	thisHour=dateObj.getHours();
	
	// change thisHour from 24-hour time to 12-hour time by:
	// 1) if thisHour < 12 then set ampm to "a.m." otherwise set it to "p.m."
	var ampm = (thisHour < 12) ? "a.m." : "p.m.";
	
	// 2) subtract 12 from the thisHour variable
	thisHour = (thisHour > 12) ? thisHour - 12 : thisHour;
	
	// 3) if thisHour equals 0, change it to 12
	thisHour = (thisHour == 0) ? 12 : thisHour;
	
	// add leading zeros to minutes and seconds less than 10
	thisMinute = thisMinute < 10 ? "0"+thisMinute : thisMinute;
	thisSecond = thisSecond < 10 ? "0"+thisSecond : thisSecond;
	
	return thisHour + ":" + thisMinute + ":" + thisSecond + ampm;
}

HTML for page:

Code:

 <?xml version="1.0" encoding="UTF-8" ?>

<!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">
<!-- 
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 3
   Tutorial Case

   The Chamberlain Civic Center
   Author: 
   Date:  

   Filename:         ccc.htm
   Supporting files: back.jpg, calendar.css, calendar.js, ccc.css, ccc.jpg, logo.gif
-->
   <title>The Chamberlain Civic Center</title>
   <link href="ccc.css" rel="stylesheet" type="text/css" />

	
   <link href="calendar.css" rel="stylesheet" type="text/css" />
	
   <script src="calendar.js" type="text/javascript"></script>

</head>

<body>
   <div id="head">
	
   	<script type="text/javascript">
		
   			calendar("March 25, 2011");
	
   	</script>
      <img src="ccc.jpg" alt="Chamberlain Civic Center" />
   </div>

   <div id="links">
      <table><tr>
      <td><a href="#">Home</a></td><td><a href="#">Tickets</a></td>
      <td><a href="#">Events</a></td><td><a href="#">Tour</a></td>
      <td><a href="#">Directions</a></td><td><a href="#">Hours</a></td>
      <td><a href="#">Packages</a></td><td><a href="#">Contact Us</a></td>
      </tr></table>
   </div>

   <div id="main">
      <p id="firstp"><img src="photo.jpg" alt="" />March is another banner month 
      at the Chamberlain Civic Center, with performances of the award-winning 
      musical, <span>The Producers</span> by the Broadway Touring Company on
      March 4, 5, and 6. Tickets are going fast, so order yours today.</p>

     <p>Celebrate the season on March 11 with the Chamberlain Symphony and their 
        special selection of classical music with Spring themes. The next day, 
        March 12, exercise your mind by attending the Charles Dickens mystery 
        <span>Edwin Drood</span>.</p>

     <p>Jazz lovers have a lot to celebrate in March with a visit from <span>The 
        Jazz Masters</span> on the 17th. Then on March 24, enjoy the music of The 
        Duke with <span>An Ellington Tribute</span> performed by the Jazz Company 
        of Kansas City.</p>

     <p>Pins, bottles, plates, and chairs are flying at the Chamberlain Civic 
        Center in March. <span>The Taiwan Acrobats</span> return with another 
        amazing performance on Sunday, March 13. On March 20, the <span>Madtown 
        Jugglers</span> get into the act with their unique blend of comedy, juggling, 
        and madness.</p>

     <p>Enjoy a classical brunch every Sunday afternoon with music provided by the 
        Carson Quartet. Seating is limited, so please reserve your table.</p>
   </div>

   <address>
      The Chamberlain Civic Center &nbsp;·&nbsp;
      2011 Canyon Drive &nbsp;·&nbsp;
      Chamberlain, SD 57325 &nbsp;·&nbsp;
      (800) 555-8741
   </address>

</body>
</html>

CSS for page:

Code:

 /*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 3
   Tutorial Case
   Filename: ccc.css

   This file contains styles used in the ccc.htm file
*/

body {margin: 0px; background: white url(back.jpg) repeat-y scroll 820px 0px}
#head {width: 750px; height: 150px; padding: 5px}

#links {clear: right; width: 750px; padding: 0px}
#links table {width: 750px; font-family: Arial, Helvetica, sans-serif;
              font-size: 8pt; margin: 0px}
#links table td {text-align: center; background-color: white;
                 border: 1px solid black; letter-spacing: 5; padding: 2px}
#links table a {text-decoration: none; color: rgb(223,29,29); width: 100%}
#links table a:hover {color: white; background-color: rgb(223,29,29)}

#main {width: 750px; font-family: Arial, Helvetica, sans-serif; padding: 10px}
#main p {text-align: justify; font-size: 9pt}
#firstp:first-line {font-variant: small-caps}
#main img {float: right; margin: 0px 0px 10px 10px}

#main p span {color: rgb(223,29,29)}

address {width: 750px; font-size: 8pt; font-style: normal; color: rgb(223,29,29);
         font-family: Arial, Helvetica, sans-serif; text-align: center;
         border-top: 1px solid rgb(223,29,29); padding-bottom: 10px}

Does anyone know how to put my clock into my HTM and CSS files to have it appear at the top left of the page? Please, help. Thanks.

Manage Clock

Similar Tutorials

Hello to everyone .

i have a clock from a javascript code and i want through drop down list to change the time location (city)

the html part Code:

<body onload="globalclock()">
<input type="text" size="50" id="globalclock" />
<select ......... onchange="">
<option value=''>select city</option>
<option value='0'>Athens</option>
<option value='1'>New York</option>
....
....
<option value='36'>.........</option>
</select>

the only way to display the clock is to set values

Code:

//default clock
dow="f";
cdate="a";
ctime="a";
city  = 5; //its my default city when page load

can anyone help me to manage this :-)

Thankz

Javascript Clock With A Tweak

Similar Tutorials

Hello everybody.

I need to make a javascript (and only javascript, no php and such) clock, that the hours and the minuets can be updated manually by an html form with 2 fields.

I cant find a way to do this.

thanks in advance,
danbb.