JavaScript - Javascript Clock With A Tweak

I'm trying to convert A world Population Counter from Flash into HTML/Javascript.

But I'm having difficulties and It would be great if someone can help me out.

The sample show a analog clock, But the html version I want should use just a digital clock, it's simpler I think
http://www.webstylelabs.com/worldclock2.swf
http://www.webstylelabs.com/actionscript.txt

Here is my code,
http://www.webstylelabs.com/clock.html
So just plain input digital counter is ok

I appreciate any help

hello all, this is my first time on this site and i can usally find all the information i need on google. However iv run into a problem while coding a countdown timer for students in my school i will be hosting it as a mobile website. what im having problems with is getting not the system time, but 1 syncronized time source ex. The official U.S.time or any other single time source if that one will not be the best. any suggestions?

ps. i am completely new to js so make any suggestions and please explain throughly.

Thanks!

Thanks for clicking on the link and i presume while you are here on my thread yo u will try to help me
So here is the situation. I am building webpage that displays a clock , a ticker box and a countdown(alarm clock). I have found many previously coded alarm clocks/countdown timers but they dont do what i need. Then what do you need you might be asking yourself?! - I need a countdown timer with background in MySQL database(there will be multiple events in that database) and then checks which is the next one( Alarms will be in HH:MM format so they can be activated every day), after the check it displays a countdown(logical eh?) until that event - when it reaches that event it should redirect to some other site(which will return user to the same site after 15 min pause) and then All over again, check which is next, countdown , redirect , AGAIN
This website is designed not to be clicked or anything - it should work by itself.
Are YOU able to help me? (Just a fair warning - Im a newb in javascript so dont be too harsh on me)

Hi,

I have a webpage with a world clock.

On the clock page are 12 buttons (World Cities). When the user clicks these buttons. The time for the relevant world city is displayed. (The time is updated by an on.click function for each individual button. That either subtracts or adds the hours from GMT. For example. If the time is GMT 18:00:00. The user clicks the Paris button and the function adds 1 hour to result in 19:00:00)

However. If the GMT time is for example 21:00:00 and the user clicks the Tokyo button (GMT+9 hours). The time displayed is 30:00:00.

So I have been trying to work out how I can stop the time adding past 23:59:59.

This is probably so simple which is probably why I cant find any help online. It has stumped me and any help would be appreciated.

I have copied and pasted my code below in the hope that helps. Thanks in advance if you can offer any advice.

Code:

<script>
	  

function start() {
  GMToffset = 0;
  t=setInterval('digitalclock()',500);
}

function digitalclock()
{
var today=new Date();
var hours=today.getHours() + GMToffset;
var minutes=today.getMinutes();
var seconds=today.getSeconds();
minutes=checkTime(minutes);
seconds=checkTime(seconds);
hours=checkTime(hours);
document.getElementById('txt').innerHTML=hours+":"+minutes+":"+seconds;
}

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

function updatetime1() {
  GMToffset = -3; 
}

function updatetime2() {
  GMToffset = -4; 
}

function updatetime3() {
  GMToffset = -7; 
}

function updatetime4() {
  GMToffset = -10; 
}

function updatetime5() {
  GMToffset = -11; 
}

function updatetime6() {
  GMToffset = -13; 
}

function updatetime7() {
  GMToffset = +9; 
}

function updatetime8() {
  GMToffset = +8; 
}

function updatetime9() {
  GMToffset = +7; 
}

function updatetime10() {
  GMToffset = +1; 
}

function updatetime11() {
  GMToffset = +0; 
}

function updatetime12() {
  GMToffset = +3; 
}

</script>

<div align="center">
<input type="button" onclick="updatetime1()" value="Time in Buenos Aires" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime2()" value="Time in New York" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime3()" value="Time in San Francisco" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" /><br>
<input type="button" onclick="updatetime4()" value="Time in Hawaii" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime5()" value="Time in Fiji" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime6()" value="Time in Sydney" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" /><br><br>

<body onload="start()">
<div id="txt"></div>

</div>

<div align="center">
<input type="button" onclick="updatetime7()" value="Time in Tokyo" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime8()" value="Time in Hong Kong" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime9()" value="Time in Bangkok" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" /><br>
<input type="button" onclick="updatetime10()" value="Time in Rome" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime11()" value="Time in London" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime12()" value="Time in Moscow" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />

Hi,
I have a script that i need a little tweak to.
If you are able to write script then it should be very easy for you.
I obviously dont and asking for your help.
The script below is for a click counter which the hypertext link then opens up another web page.
I am using this script to find out how many people look at this other page.
My problem is that it does not keep a record of the hits etc.
Once you close the browser the next time you look at the results which a box is shown next to the link it reads 0 again.
Below is the script in question.
Thanks

<HTML>
<HEAD>
<TITLE> Clicker Counter Thingamajig </TITLE>
<script type="text/javascript">
var clicks = 0;
function linkClick(){
document.getElementById('clicked').value = ++clicks;
}
</script>
</head>

<body>


<a onclick="linkClick()" href="http://www.connells.co.uk/detail.asp?type=0&src=property&cs=88&bs=WOT&br=-1&prop=100003&min=150000&max=-1&bed=3&page=6&id=WOT302735">CLICK HERE</a>

clicked <input id="clicked" size="3" onfocus="this.blur();" value="0" > times.



</BODY>
</HTML>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-gb">
<title>About Me</title>
</head>

<body bgcolor="#FFFFFF">
<p align="center">
&nbsp;</p>


<div align="center">


&nbsp;</div>

</body>

</html

Hi,

Am using jQuery to hide/show rows of a table (courtesy of http://www.jankoatwarpspeed.com). Problem is I need the jQuery to respond to just the arrow (see example) not the whole row which at the moment is all clickable. Can anyone look at the jQuery and propose what needs to change to make that happen please.

Example at http://www.jankoatwarpspeed.com/exam...pandable-rows/

Here's the jQuery:
Code:

    <script type="text/javascript">  
        $(document).ready(function(){
            $("#report tr:odd").addClass("odd");
            $("#report tr:not(.odd)").hide();
            $("#report tr:first-child").show();
            
            $("#report tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
            //$("#report").jExpand();
        });
    </script>

Many thanks in advance,
Jock

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.

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.

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!!!

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>

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.

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

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.

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

Hello, I'm learning JavaScript and have a problem with a world clock.

I followed a tutorial and then added some buttons and variables to make the clock below (see code A), but it only works off the host computer's time and I need it to work off GMT.

I found some code (see code B) to get GMT but cannot find a way to tie it to my first chunk of code.

Any ideas?

Thanks in advance.

Code A:
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>Jamie's World Clock</title>

<script language="javascript">

<!-- // Comment out with HTML if JavaScript unavailable

// Variable for a time zone
var timeZone = 0;

// Variable for location
var geoLoc = "London";

// Set location using child node
function setLocation() {
		document.getElementById("location").firstChild.nodeValue = geoLoc;
}

function updateClock ( )
{

	// GET THE TIME
	
		// Get current time from user's machine
		var currentTime = new Date ( );
		
		// Retrieve hours, minutes and seconds from new variable 'curretTime'
		var localHours = currentTime.getHours ( );
		var currentMinutes = currentTime.getMinutes ( );
		var currentSeconds = currentTime.getSeconds ( );
	
	// FORMAT THE TIME
		
		// Add a leading zero to mins and secs if less than 10
		
		/* From tutorial: The ? and : symbols used above comprise the ternary operator.
		This is a special operator that returns the value before the colon if the
		condition before the query (?) is true, or the value after the colon if the
		condition is false. It's a great way to write an if block in shorthand,
		provided you only need to return a single value. */
		
		// Put more simply: If x = less than 10 use 0 + currentMinutes else currentMinutes
		currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
		currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
						
		// Variable for current hours
		var currentHours = localHours + timeZone;
		
		// Prevents negative time values eg 1.00am London = 8.00pm New York, not -4.00am
		currentHours = (currentHours < 0 ? ((currentHours - 12) + 36) : currentHours);

		// Ensures cannot go to 13.xx.xx PM+ and returns to AM
		currentHours = ((timeZone + localHours) > 24 ? currentHours = (currentHours - 24) : currentHours);
		
		// timeOfDay: If currentHours less than 12 = AM else PM
		var timeOfDay = ( currentHours < 12 ) ? " AM" : " PM";
		
		// 12 hour clock: If currentHours greater than 12 then -12 else currentHours
		currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
		
		// 12 hour clock: If currentHours = 0 then 12 else currentHours
		currentHours = ( currentHours == 0 ) ? 12 : currentHours;
		
		// Put it all together in one variable
		var currentTimeString = currentHours +":" + currentMinutes + ":" + currentSeconds + timeOfDay;
		
	// DISPLAYING THE CLOCK
	
		// Create the following span container: <span id="clock">&nbsp;</span>...
		// see HTML below script
		
		/* From tutorial: By placing the &nbsp; inside the span element, we're creating
		a child text node for the span in the DOM. We can then populate the container
		with our time string by retrieving this child text node then setting its
		nodeValue property, as follows:
		*/
		
		document.getElementById("clock").firstChild.nodeValue = currentTimeString;
		
} // End function updateClock

// New York function
function changeZone() {
	updateClock(); // Run updateClock function to get immediate change rather than waiting for <body> setInterval
	document.getElementById("location").firstChild.nodeValue = geoLoc; // Change geoLoc variable using child node
	alert ("Your time zone has been set to " + geoLoc + "."); // Alert the user to the change of time zone
}

// --> end HTML comment
		
</script>

</head>

<!-- Runs updateClock function on body load and repeats every second -->
<body onLoad="setLocation(); updateClock(); setInterval('updateClock()', 1000 )">

<!-- Runs updateClock function on body load and repeats every second -->
<span id="clock">&nbsp;</span><br />

<p>Your current time zone is <span id="location">&nbsp;</span>.</p>

<button onclick="timeZone = -5; geoLoc = 'New York'; changeZone()">New York</button><br />
<button onclick="timeZone = 0; geoLoc = 'London'; changeZone()">London</button><br />
<button onclick="timeZone = 4; geoLoc = 'Dubai'; changeZone()">Dubai</button><br />
<button onclick="timeZone = 8; geoLoc = 'Beijing'; changeZone()">Beijing</button><br />
<button onclick="timeZone = 11; geoLoc = 'Sydney'; changeZone()">Sydney</button><br />

</body>

</html>

Code B:
Code:

function getTime(zone, success) {
    var url = 'http://json-time.appspot.com/time.json?tz=' + zone,
        ud = 'json' + (+new Date());
    window[ud]= function(o){
        success && success(new Date(o.datetime));
    };
    document.getElementsByTagName('head')[0].appendChild((function(){
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = url + '&callback=' + ud;
        return s;
    })());
}

getTime('GMT', function(time){
    // This is where you do whatever you want with the time:
    alert(time);
});