JavaScript - Population Clock
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> Similar TutorialsAnyone have any issues with Safari in relation to javascript compatibility? I have a page that loads dynamically through user selections as follows: There is a set of three radio buttons. The user selects one and a div opens revealing a select box populated with entries related to the radio button selection. When the user makes a selection from the select box, one of two things happen. 1) If there are child records relating to their selection, a second div opens revealing another select box containing the child entries relating to the first select box choice. Or 2) if there are no child entries relating to the selection in the first select box, a div opens displaying a description relating to the selection they made in the first select box. The data is all coming from prepopulated javascript arrays. This works like a dream in IE and Chrome. Unfortunately, when we were in the final stages of testing before release to a live environment, we discovered it works in Safari only as far as the user makes a selection from the three radio buttons driving the opening of the first div layer containing the first select. At this point it stops working completely. On top of that, I can not find where in the latest release of Safari, that I can see any javascript errors (or if I even can). I am REALLY in need of help. Anything you can offer? Thanks!! Dmxsmith I thought this would have been fairly simple but it appears the onchange event isn't triggered when a hidden field is populated by other javascript without user input. I have a simple search box and autocomplete/suggestion ajax thingie going on. What I want to do is have my "Go" submit button disbled until AFTER a user has populated the hidden field "cid". A user populates this field automatically when they click on a suggested option from the ajax autocomplete doofer. Here's what I've tried at the moment but failed on. Code: <form action="index.php" method="GET" name="qsform" id="qsform"> <input type="hidden" name="p" id="p" value="compdetails" style="border:1px solid #000000;" /> <input type="text" name="quicksearch" id="quicksearch" value="Find Company" style="border:1px solid #000000;" onFocus="clearText(this)" onBlur="clearText(this)" /> <input type="hidden" name="cid" id="cid" value="" style="border:1px solid #000000;" /> <input type="submit" name="go" id="go" value="Go" disabled="true" onmouseover="if (document.qsform.cid.value!='') { document.qsform.go.disabled=false; }" /> </form> Hello everyone! Im new here so any help you can give would be great. I am a Designer, and some time AS3 programer. Teaching my self Javascript for a portfolio website. The Goal: I created a code that randomly creates and Populates Divs in a regular grid, then populates them with an image (using css backgroundImage property) or a print CMY(and Green) color. (eventually will include a shadow box and side scroller) The Problem: The creation and population works just fine, the first time around. if I "Refresh" the page (which i thought destroyed all vars and data) the page loads some times, or freezes. Some times it doesn't load at all! so its very unpredictable, obviously i need this to work the same way every time. Im pretty sure its something simple that i missed, a nuance of javascript or something. So if any one who is more experienced can help I would be super grateful!! here is the page on my website: designchangeseverything.com/beta/divpoptest.html here is the code (i included some of my comments so you can see how i was trying to debug): Code: <SCRIPT LANGUAGE="JavaScript"> var Tborder = .05 var howmanyIMG = 15 var winHeight = Math.floor(window.innerHeight); var winWidth = Math.floor(window.innerWidth); var BoxHeight = Math.floor((winHeight * (1-Tborder)) / 3); var BoxWidth = BoxHeight; var howmanyx = Math.floor(winWidth / BoxWidth) + 1; var howmanyy = 3; var HowMany = howmanyx * howmanyy; var used = new Array(howmanyIMG); var CMYG = ["00AEEF","EC008C","FFF200","41AD49"] function RNDy(numby){ return Math.floor(Math.random()*numby); } function getUniq(){ /* alert("run getuniq");*/ var n; while ( used[ n = RNDy(howmanyIMG) ] ){} used[ n ] = true; return n; } function ColorRND() { if (RNDy(4) ==1) { return true; }else{ return false; } } function PlacePop (HMx,HMy){ var counter = 0; var countc = 0; for(x=0;x<=HMx;x++){ var countr = 0; for(y=0;y<HMy;y++){ var divy = document.createElement("div"); var divyID = 'box' + counter; divy.setAttribute('id', divyID) divy.style.position="absolute"; divy.style.zIndex = counter + 3; divy.style.visibility = 'visible'; divy.style.borderWidth = '1'; divy.style.borderColor = '#000000'; divy.style.pixelLeft= x * BoxWidth + (2 * countc); divy.style.pixelTop= y * BoxHeight + (winHeight * Tborder) + (2 * countr); divy.style.pixelWidth= BoxWidth; divy.style.pixelHeight= BoxHeight; if (ColorRND()){ /*divy.innerHTML = 'color';*/ divy.style.backgroundColor = "#" + CMYG[RNDy(4)]; }else{ /*divy.innerHTML = 'image';*/ divy.style.backgroundImage = "url(resourses/images/portfolio/" + getUniq() + ".png)"; divy.style.backgroundPosition = "center"; /*RNDy(100) + "% " + RNDy(100) + "%";*/ } document.body.appendChild(divy); counter++; countr++; }countc++; } /* alert("ran" + counter + " times");*/ } /* used = null;*/ </script> THANKS FOR ANY HELP YOU CAN GIVE! This script works great for populating predefined lists of data into a textarea as selected by the user using a radio button: Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Populate Textarea Based on Radio Button Selection</title> <script> text = new Array() text[0] = Array('Hotel', 'Motel'); text[1] = Array('Couch', 'Bed', 'Chair'); function populate(r,f){ t=-1; for(var i=0;i<f.elements[r].length;i++){ if (f.elements[r][i].checked){ var t=i; } } if(t>-1){ f.thefirsttextarea.value= text[t].toString().replace(/,/gi,"\n"); } } </script> </head> <body> <form name="frm"> <input type="radio" name="test" value="0" onClick="populate(this.name,this.form)"> <input type="radio" name="test" value="1" onClick="populate(this.name,this.form)"> <textarea name="thefirsttextarea"></textarea> <input type="submit" value="submit" /> </form> </body> </html> However, I've coded all night only to come across an issue. I have an inline page style which calls/includes multiple pages. Two of these pages require this feature. It seems one is canceling out the other. Here's an example: 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>Populate Multiple Textareas Based on Radio Button Selection</title> <script> text = new Array() text[0] = Array('Hotel', 'Motel'); text[1] = Array('Couch', 'Bed', 'Chair'); function populate(r,f){ t=-1; for(var i=0;i<f.elements[r].length;i++){ if (f.elements[r][i].checked){ var t=i; } } if(t>-1){ f.thefirsttextarea.value= text[t].toString().replace(/,/gi,"\n"); } } </script> <script> textt = new Array() <!--default--> text[0] = Array('Ham', 'Turkey', 'Chicken'); <!--all--> text[1] = Array('Beer', 'Soda', 'Water'); <!--johnny havana--> text[2] = Array('Milk', 'Cheese', 'Butter'); function populate(r,f){ t=-1; for(var i=0;i<f.elements[r].length;i++){ if (f.elements[r][i].checked){ var t=i; } } if(t>-1){ f.SECONDFORM.value= text[t].toString().replace(/,/gi,"\n"); } } </script> </head> <body> <form name="form"> <input type="radio" name="test" value="0" onClick="populate(this.name,this.form)"> <input type="radio" name="test" value="1" onClick="populate(this.name,this.form)"> <textarea name="thefirsttextarea"></textarea> <input type="submit" value="submit" /> </form> <form name="anotherform"> <input type="radio" name="anothertest" value="0" onClick="populate(this.name,this.form)"> <input type="radio" name="anothertest" value="1" onClick="populate(this.name,this.form)"> <textarea name="SECONDFORM"></textarea> <input type="submit" value="submit" /> </form> </body> </html> With the above code only the second set of radio buttons work. What I need help with is a way to have two independent sets of arrays the correspond correctly with the textareas - One set that populates textarea 1 and the other that populates textarea 2. 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 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 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. 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 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 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. 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> 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 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"); 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. 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 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); }); 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. |