|
JavaScript - Javascript Clock - Need Help
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 ·
2011 Canyon Drive ·
Chamberlain, SD 57325 ·
(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. Similar TutorialsI am pretty new to javascript and descided to test my skills by making a javascript clock using the computers time it works but I know the way I am doing it isn't very good you can see the code below 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>
<title>clock</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var minutes = 0;
var seconds;
var hour = 0;
var minute = new Date().getMinutes();
minutes += minute;
var hours = new Date().getHours();
hour += hours;
var time_period = "";
if(hour > 12){
hour = hour-12;
time_period = "PM";
}else {
time_period = "AM";
}
function working_clock(){
var time = new Date;
seconds = time.getSeconds();
var clock = document.getElementById('clock');
if(seconds == 59){
minutes+=1;
}
if(minutes == 60){
minutes = 1;
hour++;
}
if(minutes < 10){
var minute_digit_two = 0;
clock.innerHTML = ("time: "+hour+":"+minute_digit_two +minutes+":"+seconds+" "+time_period);
}else {
clock.innerHTML = ("time: "+hour+":"+minutes+":"+seconds+" "+time_period);
}
setTimeout("working_clock()",1000);
}
window.onload = working_clock;
</script>
</head>
<body>
<div id="clock"></div>
</body>
</html>
heres where you can see it in action http://the-test.comoj.com/files/working-clock.html im just asking if there are any errors or if theres a better way to do this 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. 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 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) 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! 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;" />
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 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 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> 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!!! 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 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, 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 Hi, I want to add a list of several clocks to my website, with different time zones. I know very little about Java, so please be patient with me! I found this code and thought that if I repeated it a few times - see below, and simply put a '-4' or whatever after the hours to make the different time, that would be fine. However, it only works for the first one. Please let me know what I am doing wrong. Many thanks, MARTIN <form name="Tick"> <input type="text" size="11" name="Clock"> </form> <script> <!-- /*By George Chiang (JK's JavaScript tutorial) http://javascriptkit.com Credit must stay intact for use*/ function show(){ var Digital=new Date() var hours=Digital.getHours() var minutes=Digital.getMinutes() var seconds=Digital.getSeconds() var dn="AM" if (hours>12){ dn="PM" hours=hours } if (hours==0) hours=12 if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds document.Tick.Clock.value=hours+":"+minutes+":" +seconds+" "+dn setTimeout("show()",1000) } show() //--> </script> <form name="Tick"> <input type="text" size="11" name="Clock"> </form> <script> <!-- /*By George Chiang (JK's JavaScript tutorial) http://javascriptkit.com Credit must stay intact for use*/ function show(){ var Digital=new Date() var hours=Digital.getHours() var minutes=Digital.getMinutes() var seconds=Digital.getSeconds() var dn="AM" if (hours>12){ dn="PM" hours=hours-4 } if (hours==0) hours=12 if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds document.Tick.Clock.value=hours+":"+minutes+":" +seconds+" "+dn setTimeout("show()",1000) } show() //--> </script> Hello Guys, Any one help me coding of java script coding for watch implementation in our website..... Thanks in Advance Hi, I've just created an image based digital clock following a youtube tutorial, and I understand all of it except one thing. I have created a regular digital clock (a text one), and then split this into an array. So I can manipulate the hours/ mins/ secs with [0],[1] and [2], is this the element that makes my regular text into the images I am using? There must be a correlation between the two, and that's all I can see that would do that for me. Here is the code: Code:
digit_Images = ["d0.jpg","d1.jpg","d2.jpg","d3.jpg","d4.jpg","d5.jpg","d6.jpg","d7.jpg","d8.jpg","d9.jpg",
"d10.jpg","d11.jpg","d12.jpg"]
for (i=0;i<digit_Images.length;i++){
document.write('<img style="display: none;" src="' + digit_Images[i] + '" />');
}
function clock_final(){
//make time object
the_Date = new Date();
current_Time = the_Date.getHours() + ":" + the_Date.getMinutes() + ":" + the_Date.getSeconds();
var time_Parts = current_Time.split(":");
//am or pm
if (time_Parts[1] <=12){
var AM_PM = digit_Images[11];
}
else{
var AM_PM = digit_Images[12];
}
//split down to 12 hour clock by subtracting 12
if (time_Parts[0]>=13){
time_Parts[0] = time_Parts[0] - 12 + "";
}
else if(time_Parts[0] =="0"){
time_Parts[0] = "12";
}
var the_Clock = new Array();
for (var i = 0; i < time_Parts.length; i++) {
if (time_Parts[i].length == 1) {
the_Clock[i] = '<img src="' + digit_Images[0] + '" />' + '<img src="' + digit_Images[parseInt(time_Parts[i])] + '" />';
} else if (time_Parts[i].length ==2) {
the_Clock[i] = '<img src="' + digit_Images[parseInt(time_Parts[i].charAt(0))] + '" />' + '<img src="' + digit_Images[parseInt(time_Parts[i].charAt(1))] + '" />';
}
}
var clockHTMLInput = the_Clock[0] + '<img src="' + digit_Images[10] + '" />' + the_Clock[1] + '<img src="' + digit_Images[10] + '" />' + the_Clock[2] + '<img src="' +AM_PM + '" />';
document.getElementById('clock').innerHTML = clockHTMLInput;
}
Hope that's not too jumbled. Thanks. 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"); 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"> </span>...
// see HTML below script
/* From tutorial: By placing the 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"> </span><br />
<p>Your current time zone is <span id="location"> </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);
});
|
|||||||