|
JavaScript - World Clock - Add Day To The Output
Hi,
JS newbie here. Could someone please let me know how I would output the day as well in this world clock example? Thanks in advance. Similar TutorialsHello, 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);
});
Hello , I have a bit of coding that is keeping me up at nights because of it's damn stubborness. All I want to do is pop-up an Alert that says Hello World. I'm new to coding period so I'm writing verbatim dummies javascript book examples. Here is the code for the script: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eqiv ="content-type" content="text/xml; charset=utf-8 /> < script type = "text /javascript"> //<!CDATA[ alert ("Hello , World!" ) ; //]]> </script> </head > <body> </body> </html> Okay I've done this code , and variations and only have ended up with the same message in firefox "syntax error""quirks mode".In IE 8 I get messages to cryptic to understand. So what gives? Where is my error in syntax?The code makes sense to me, and I'm following XHTML conventions. Someone help this damsel in distress Take care April D 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. 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. 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 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 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 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'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. Hi All, I m newbie on JavaScript Coding. I have Form where the there are 4 radio buttons. Requirement is OnClick of Each radio buttons, some Div must Greyed out. <input type="radio" name="cf_basic_type" value="Apartment" checked="checked" />Apartment <input type="radio" name="cf_basic_type" value="Villa" />Villa <input type="radio" name="cf_basic_type" value="Independant" />Independant house <input type="radio" name="cf_basic_type" value="Plot" />Plot</div> and Grey Part of Form is: Area Size:<input type="text" name="cf_area_size" id="cf_area_size" /></div> Plot Size:<input type="text" name="cf_area_length" id="cf_area_length" /> <input type="text" name="cf_area_width" id="cf_area_width" /> so for Plot radio selected the 'Area Size' must be greyed out but when others radio button selected is must be active For Apartment radio selected or Villa radio selected, Plot Size must be greyed out. Hope that makes clear.... Its very Urgent kindly help me with this.. Thnks in Advnce hiya guys im just trying to get some javascript working that will display on one html page multiple ticking digital clocks representing the accurate time of a host of differents countrys. i currently have managed to get a ticking clock on the page using +++++++++++++++++++++++++ var thetime=new Date(); var nhours=thetime.getHours(); var nmins=thetime.getMinutes(); var nsecn=thetime.getSeconds(); ++++++++++++++++++++++++++++++++ i now need to get other clocks on same page but with the live ticking time from other countrys. i tried for hours searching sites but could not find a solution i understood. i did however add simply add ++++++++++++++++++++ var nhours=thetime.getHours() +7; +++++++++++++++++++ the plus 7 i added was intended to add 7 hours to the clock then i could use this method for all the clocks and it did work it did change the time but there was a problem hong kong is about 8 hours ahead of the uk when its 8pm here its 2am there and if i use this method and i add 6 hours to the getHours variable it then makes the time 26hours rather than 3am here is my code i hope you can be of some help ++++++++++++++++++++++++++++++++++++++++++++++ <html> <HEAD> <TITLE>JavaScript Clock</TITLE> <SCRIPT language="JavaScript"> <!-- function ukclock() { var thetime=new Date(); //var mins=new Date(); //var secn=new Date(); var nhours=thetime.getHours(); //the line below same as above except the +num can be used to add hours to the clock //var nhours=thetime.getHours() +6; var nmins=thetime.getMinutes(); var nsecn=thetime.getSeconds(); var AorP=" "; if (nhours>=12) AorP="P.M."; else AorP="A.M."; if (nhours>=13) nhours-=12; if (nhours==0) nhours=12; if (nsecn<10) nsecn="0"+nsecn; if (nmins<10) nmins="0"+nmins; document.clockform.clockspot.value=nhours+": "+nmins+": "+nsecn+" "+AorP; setTimeout('ukclock()',1000); } //--> </SCRIPT> </head> <BODY onload="ukclock()"> <FORM name="clockform"> Current Time in UK: <INPUT TYPE="text" name="clockspot" size="15"> <br /> </FORM> </body> ++++++++++++++++++++++++++++++++++++++++++++++ I have to make a digital clock (which i did figure out) but the number needs to be images with the numbers on them. (ex.: (an image of the number 1+an image of the number 2+image of number 0+images of number8) would be 11:08)) Here's what I have so far. Do I need to use <img src=""> in a function then call the function for my images? Code: <HEAD>
<SCRIPT language="JavaScript">
<!--
function startclock()
{
var thetime=new Date();
var nhours=thetime.getHours();
var nmins=thetime.getMinutes();
var nsecn=thetime.getSeconds();
var AorP=" ";
if (nhours==0)
nhours=12;
if (nsecn<10)
nsecn="0"+nsecn;
if (nmins<10)
nmins="0"+nmins;
document.clockform.clockspot.value=nhours+":"+nmins+":"+nsecn+" "+AorP;
setTimeout('startclock()',1000);
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="startclock()">
<FORM name="clockform">
Current Time: <INPUT TYPE="text" name="clockspot" size="15">
</FORM>
</BODY>
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> Hi all, I've found a small script that displays the current time. The only problem is that it only works with IE and I'd like to make it work on all browsers (or at least Mozilla) Would you mind helping me ? Note: I'd like to keep the code using the "span" tag Here's the html code (to show the way I call the script): Code: <html> <head> <SCRIPT language="JavaScript" SRC="clock.js"></SCRIPT> </head> <body onLoad="clock()" bgcolor="#ECEDF3"> <font face="Verdana" size="1" color="#88A6C0"><span id="pendule" ></span> </body> </html> and here's the script I use (It's an external script that I called clock.js): I believe the declarations are OK and the problem comes from "document." I know there are differences the way IE and other browsers manage scripts but I'm not enough experienced to find all variants. Code: <!-- Begin
function clock() {
if (!document.layers && !document.all) return;
var digital = new Date();
var hours = digital.getHours();
var minutes = digital.getMinutes();
var seconds = digital.getSeconds();
var amOrPm = "AM";
if (hours > 11) amOrPm = "PM";
if (hours > 12 ) hours = hours - 12;
if (hours == 0) hours = "00";
if (minutes <= 9) minutes = "0" + minutes;
if (seconds <= 9) seconds = "0" + seconds;
dispTime = hours + ":" + minutes + ":" + seconds + " " + amOrPm;
if (document.layers) {
document.layers.pendule.document.write(dispTime);
document.layers.pendule.document.close();
}
else
if (document.all)
pendule.innerHTML = dispTime;
setTimeout("clock()", 1000);
}
// End -->
Any idea about what's wrong ? Thank you for your help Gino 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 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 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 The clock should be counting up from January 27, 2012 03:26:00, but for some reason its reading as 3 days having passed instead of the 5 days...My thoughts are that the mistake is in this section of code, because it seems to have counted January as 29 days instead of 31 Code: function CountUp(initDate, id){
* * this.beginDate = new Date(initDate);
* * this.countainer = document.getElementById(id);
* * this.numOfDays = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
* * this.borrowed = 0, this.years = 0, this.months = 0, this.days = 0;
* * this.hours = 0, this.minutes = 0, this.seconds = 0;
* * this.updateNumOfDays();
* * this.updateCounter();
}
*
CountUp.prototype.updateNumOfDays=function(){
* * var dateNow = new Date();
* * var currYear = dateNow.getFullYear();
* * if ( (currYear % 4 == 0 && currYear % 100 != 0 ) || currYear % 400 == 0 ) {
this.numOfDays[1] = 29;
}
But having no experience with Java, this is just a guess...Here's ALL the other info you could need... Here's the Web address the Clock is on: http://nvctruth.com/majorgale/ (i've got to figure out the background on a separate day) And Here is the FULL Code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript CountUp Timer - Praveen Lobo</title>
<script type="text/javascript">
function CountUp(initDate, id){
* * this.beginDate = new Date(initDate);
* * this.countainer = document.getElementById(id);
* * this.numOfDays = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
* * this.borrowed = 0, this.years = 0, this.months = 0, this.days = 0;
* * this.hours = 0, this.minutes = 0, this.seconds = 0;
* * this.updateNumOfDays();
* * this.updateCounter();
}
*
CountUp.prototype.updateNumOfDays=function(){
* * var dateNow = new Date();
* * var currYear = dateNow.getFullYear();
* * if ( (currYear % 4 == 0 && currYear % 100 != 0 ) || currYear % 400 == 0 ) {
* * * * this.numOfDays[1] = 29;
* * }
* * var self = this;
* * setTimeout(function(){self.updateNumOfDays();}, (new Date((currYear+1), 1, 2) - dateNow));
}
*
CountUp.prototype.datePartDiff=function(then, now, MAX){
* * var diff = now - then - this.borrowed;
* * this.borrowed = 0;
* * if ( diff > -1 ) return diff;
* * this.borrowed = 1;
* * return (MAX + diff);
}
*
CountUp.prototype.calculate=function(){
* * var currDate = new Date();
* * var prevDate = this.beginDate;
* * this.seconds = this.datePartDiff(prevDate.getSeconds(), currDate.getSeconds(), 60);
* * this.minutes = this.datePartDiff(prevDate.getMinutes(), currDate.getMinutes(), 60);
* * this.hours = this.datePartDiff(prevDate.getHours(), currDate.getHours(), 24);
* * this.days = this.datePartDiff(prevDate.getDate(), currDate.getDate(), this.numOfDays[currDate.getMonth()]);
* * this.months = this.datePartDiff(prevDate.getMonth(), currDate.getMonth(), 12);
* * this.years = this.datePartDiff(prevDate.getFullYear(), currDate.getFullYear(),0);
}
*
CountUp.prototype.addLeadingZero=function(value){
* * return value < 10 ? ("0" + value) : value;
}
*
CountUp.prototype.formatTime=function(){
* * this.seconds = this.addLeadingZero(this.seconds);
* * this.minutes = this.addLeadingZero(this.minutes);
* * this.hours = this.addLeadingZero(this.hours);
}
*
CountUp.prototype.updateCounter=function(){
* * this.calculate();
* * this.formatTime();
* * this.countainer.innerHTML ="<strong>" + this.years + "</strong> <small>" + (this.years == 1? "year" : "years") + "</small>" +
* * * * " <strong>" + this.months + "</strong> <small>" + (this.months == 1? "month" : "months") + "</small>" +
* * * * " <strong>" + this.days + "</strong> <small>" + (this.days == 1? "day" : "days") + "</small>" +
* * * * " <strong>" + this.hours + "</strong> <small>" + (this.hours == 1? "hour" : "hours") + "</small>" +
* * * * " <strong>" + this.minutes + "</strong> <small>" + (this.minutes == 1? "minute" : "minutes") + "</small>" +
* * * * " <strong>" + this.seconds + "</strong> <small>" + (this.seconds == 1? "second" : "seconds") + "</small>";
* * var self = this;
* * setTimeout(function(){self.updateCounter();}, 1000);
}
*
window.onload=function(){ new CountUp('January 27, 2012 03:26:00', 'counter'); }
*
</script>
</head>
|
|||||||