|
JavaScript - Image Based Clock Help
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. Similar TutorialsI have a list of thumbnails generated by Wordpress. I've been trying to piece together a script that would change the ID of the parent element based on the image inside of it I can't seem to get anywhere, does anyone have a simple solution? I need the id of the li to be "sm" or "smp" depending on the width of the image inside of it (landscape or portrait) Code: <li class="frame" id="sm">
<div class="frm" id="frame1">
<img src="image.jpg">
</div>
</li>
I am trying to write a custom BBcode for a forum I moderate. I don't have the licensing information because its not my forum and i am just a moderator. If anyone wants to verify the legitimacy of the forum I work for please PM me and I will try and get you any information I can. This code that I has works perfect in EditRocket, but when I add it to the custom BBcode the image does not resize. Original EditBucket Code: Code: <html>
<head>
<script type="text/javascript">
function show_confirm(testimg)
{
var theImg = document.getElementById('testimg');
var theWidth = theImg.width;
var theHeight = theImg.height;
if (theWidth<250)
{
theImg.width = theWidth;
theImg.height = theHeight;
}
else
{
theImg.width = 250;
theImg.height = theHeight*(250/theWidth);
}
}
</script>
</head>
<body>
<img id="testimg" onload="show_confirm(testimg)" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/600px-Example.svg.png">
</body>
</html>
vBulletin Custom BBcode: title: Test Image bbcode tag name: timage Replacement: Code: <script type="text/javascript">
function show_confirm(testimg)
{
var theImg = document.getElementById('testimg');
var theWidth = theImg.width;
var theHeight = theImg.height;
if (theWidth<250)
{
theImg.width = theWidth;
theImg.height = theHeight;
}
else
{
theImg.width = 250;
theImg.height = theHeight*(250/theWidth);
}
}
</script>
<body>
<img id="testimg" onload="show_confirm(testimg)" src="{param}">
</body>
Example: [timage]http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/600px-Example.svg.png[/timage] Description: Embed imaged inline with forum Option: no Hello, I'm looking for help as I have the jCarouselLite feature functioning on my website and am looking for a way of displaying another image to the right of the carousel, dependent upon which image is visible in the carousel. I toyed with the idea of implementing another snippet of JavaScript to swap the text to the right and manually synching the swap time wise, but quickly abandoned this idea for a number of reasons, particularly as the carousely has buttons to scroll through the images displaying. I have to admit I'm not particularly great with JavaScript, but was thinking along the lines of another function that listens for the image that is displayed, but have no idea if am way off the mark, or even if this is the right track - no idea how to implement. Any help would be very gratefully recieved. Thanks, Matt Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction. I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely. If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks. I'm still struggling for a solution here. I have a background image that auto-resizes based on browser window / screen resolution. I want my top header menu, which requires links, to act in the same way and be in roughly the same position/size based on browser window. Is this possible? In the sample below, the image is just part of the background image to give you an idea of the look I am trying to duplicate. Is there a Javascript out there that will help me or will I be stuck having to rework my design? http://www.uberbotjones.com/sanny/test.html This site is really driving me crazy. 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 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> I figured if there was one it would be a Javascript but does anyone know of a countdown clock that almost looks like a counter/turnstile number row? Like this sorta: I've been looking for one where I have the numbers look just like that and 'push' upward as the times (days, minutes, seconds) go on. Hopefully someone knows of a script >< Thanks alot!!! Hello, I would like help about my problem. I want to find the proper function to manage a clock . What I want to do is, when a city is selected from the drop down menu, the display of the clock must be changed depended by the city . Also to allow the user to vary the values of the three variables that control the display of a clock. <body onload="globalclock()"> <input type="text" size="50" id="globalclock" /> <select ......... onchange=""> <option value=''>select city</option> <option value='0'>Athens</option> <option value='1'>New York</option> .... .... <option value='36'>.........</option> </select> //default clock dow="f"; cdate="a"; ctime="a"; city = "22"; //its my default city when page load I use globalclock() function but with no results Hello, I am trying to create a clock for my video game. I need to begin the clock at zero and count while the game is going. I need to have the clock count in standard minutes and seconds but not be based on the actual time of day. I am coding in javascript for an applet.
Hello, 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. 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 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 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 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 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. 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 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);
});
|
|||||||