|
JavaScript - Another N00b Question About Clocks
Hello all,
I am currently using a javascript clock on my site to say the current time. I was wondering, what time does it display? Like I live on the east coast of the U.S. so does it display my time to someone in California? Currently it's 11:49am here so on my site it says that, but for someone else in the world would it say some other time? Thank you all Similar TutorialsDeleted
Hi, I am looking for a multiple countup or age timer within a html page (using javascript). I want to display below each child picture the age clock/counter of the child. I do not know javascript well (I recognize some code) and know a little of html. I have searched on internet and nothing seems to get close to the below functionality. There are plenty of countup counters etc, but mostly count days, and those that do count age are single use only. Below is some code my friend found. That code works for one person/age only and includes weeks. The thing is that I want one page with all the children listed. Example of Expected Outcome: Picture John born in Thailand John is 10 years, 03 months, 16 days, 12 hours, 14 minutes, 03 seconds old. Picture Mary born in Florida, USA Mary is 08 months, 12 days, 14 hours, 02 minutes, 53 seconds old. Picture Chris born in Melbourne, Australia Chris is 04 years, 02 months, 03 days, 01 hours, 06 minutes, 12 seconds old. Picture Lindy born in The Netherlands Lindy is 03 years, 11 months, 24 days, 23 hours, 44 minutes, 23 seconds old. And the clocks keep ticking and counting up. Please note that since Mary is less than a year old, the 0 year value does not show. I also would like the possibility to consider the time differences between the places they were born and the time zone the web page viewer is in. Is that possible? Or maybe I have to recalculate their GMT (Greenwhich time zone) birth time for that to work, or maybe the time zone of the server? How can we make that accurate? The hours, minutes, and seconds, would be great, but is of course optional. The code below also shows weeks, which is up to you to use or not. Maybe the script can allow you to choose which values to show? I would like this for at least four children, but the possibility to add more later by copying some code would be great. This is not an online form, so all time/date of birth details can be set in the script. Here is the script I found: Code: <!-- Copy and Paste into HEAD of HTML-->
<SCRIPT type="text/javascript" language="JavaScript">
function ElapsedTime(inFromDate,inToDate) {
var inFromDate = (arguments.length == 0) ? new Date() : arguments[0];
var inToDate = (arguments.length == 1) ? new Date() : arguments[1];
// if (arguments.length == 0) var inFromDate = new Date(); // IE4 has a bug in constructors,
// if (arguments.length == 1) var inToDate = new Date(); // so use above method.
var fromDate = new Date(inFromDate);
var toDate = new Date(inToDate);
var tempDate = new Date();
if (fromDate.getTime() > toDate.getTime()) {
tempDate = new Date(fromDate);
fromDate = new Date(toDate);
toDate = new Date(tempDate);
}
var totMonths = 12*toDate.getFullYear() + toDate.getMonth() +
-12*fromDate.getFullYear() - fromDate.getMonth()
var years = Math.floor(totMonths / 12)
var months = totMonths - 12*years
if (dateAsNumber(toDate,"D") < dateAsNumber(fromDate,"D")) months -= 1
if (months < 0) {
months = 0
if (years > 0) years -= 1
}
var yearsOff = years + fromDate.getFullYear()
var monthsOff = months + fromDate.getMonth()
if (monthsOff >= 12) {
monthsOff -= 12
yearsOff += 1
}
var tempDate = new Date(fromDate);
tempDate.setFullYear(yearsOff);
tempDate.setMonth(monthsOff); // might push us into early next month, so...
while (tempDate.getDate() < fromDate.getDate() && tempDate.getDate() < 9 )
tempDate.setTime(tempDate.getTime() - 1000*60*60*24); // Feb 29 etc.
var milliSecs = toDate.getTime() - tempDate.getTime();
var oneSecond = 1000;
var oneMinute = 60 * 1000;
var oneHour = 60 * oneMinute;
var oneDay = 24 * oneHour;
var oneWeek = 7 * oneDay;
var weeks = Math.floor(milliSecs / oneWeek);
milliSecs -= weeks * oneWeek;
var days = Math.floor(milliSecs / oneDay);
milliSecs -= days * oneDay;
var hours = Math.floor(milliSecs / oneHour);
milliSecs -= hours * oneHour;
var minutes = Math.floor(milliSecs / oneMinute);
milliSecs -= minutes * oneMinute;
var seconds = Math.floor(milliSecs / oneSecond);
var timeValue = "";
if (years) timeValue += years + ((years==1) ? " year, " : " years, ");
if (months) timeValue += months + ((months==1) ? " month, " : " months, ");
if (weeks) timeValue += weeks + ((weeks==1) ? " week, " : " weeks, ");
if (days) timeValue += days + ((days==1) ? " day, " : " days, ");
var timeValueDays = timeValue.substring(0 , timeValue.length - 2);
timeValue += hours + ((hours==1) ? "hour, " :" hours, ");
timeValue += minutes + ((minutes==1) ? " minute, and " : " minutes, and ");
timeValue += seconds + ((seconds==1) ? " second" : " seconds");
this.years = years;
this.months = months;
this.weeks = weeks;
this.days = days;
this.hours = hours;
this.minutes = minutes;
this.seconds = seconds;
this.text = timeValue;
this.textDays = timeValueDays;
}
function dateAsNumber(inDate,inWhat) {
var what = "", yearBit = 0, monthBit = 0
if (typeof(inWhat) == "undefined" || inWhat.toString() == "" || inWhat.toString() == null) inWhat = ""
what = inWhat.toString().toUpperCase()
if (what != "M" && what != "D") // we want yyyy bit
yearBit = inDate.getFullYear() * Math.pow(10,13);
if (what != "D") // we want month bit
monthBit = inDate.getMonth() * Math.pow(10,11);
return yearBit +
monthBit +
inDate.getDate() * Math.pow(10,09) +
inDate.getHours() * Math.pow(10,07) +
inDate.getMinutes() * Math.pow(10,05) +
inDate.getSeconds() * Math.pow(10,03) +
inDate.getMilliseconds()
}
// ***** SET the DATE and TIME HERE *****
// ( Remembering that in Java Dates,
// months go from 0 (Jan) to 11 (Dec) )
function ageClock() {
var leaveDate = new Date(2009,02,04,14,20) // for 2009 March 04, 7:31am
var now = new Date();
var elapsed = new ElapsedTime(leaveDate,now);
return elapsed.text;
}
function getElement(id) {
return document.all ? document.all(id) :
document.getElementById ? document.getElementById(id) :
document.layers ? document.layers[id] :
null;
}
function centerShowIt(id) {
var winMid, aD = getElement('ageDisplay');
if (!aD) return;
if (window.innerWidth) winMid = innerWidth/2;
else if (document.body) winMid = document.body.clientWidth/2;
if (!document.layers) {
aD.style.left = winMid - aD.offsetWidth/2;
aD.style.visibility = 'visible';
} else {
aD.pageX = winMid - aD.clip.width/2;
aD.visibility = 'show';
}
}
function update() {
var text = ageClock();
var aD = getElement('ageDisplay');
if (!aD) return;
if (!document.layers) {
aD.innerHTML = text + ' ';
} else {
aD.document.write('<SPAN class="bodytext">' + text + ';</SPAN>');
aD.document.close();
}
setTimeout('update()',1000);
}
/* NS4 resize bug fix from webreference.com */
if (document.layers) {
origWidth = innerWidth;
origHeight = innerHeight;
}
if (document.layers) window.onresize = function() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();
}
/********************************************/
window.onload = update;
</SCRIPT>
and Code: <!-- Copy and Paste into BODY of HTML where age is to appear-->
<SCRIPT type="text/javascript" language="JavaScript">
document.write('<DIV id="ageDisplay" class="bodytext">');
document.write(ageClock());
document.write('</DIV>');
centerShowIt('ageDisplay');
</SCRIPT>
Is there a solution somewhere? Can anyone (re)write the script to fit above described functionality? Any tips or referals? Thanks Pepin OK. I'm super new to any kind of java script. What I want is a menu that, when clicked, changes the background color of a table cell to blue. When a different option is clicked, the current highlighted table should turn back to gray and the new selection should be blue. Well, I have all of that working. What I need now is just to have the first option start out highlighted and to become unhighlighted when another option is clicked. Any help would be awesome!!!! Thanks!!!!!! Code: <html>
<head><title>menu</title>
<script type="text/javascript">
var element = null;
function select(xx)
{
if ( element ) {
element.style.backgroundColor='gray';
}
element = xx;
xx.style.backgroundColor='navy';
}
</script>
<style type="text/css">
a {text-decoration:none; color:white}
a:visited {color:white}
a:active {color:white}
a:hover {color:white}
table#lay_menu {width:100%; margin:0px}
table#lay_menu td {text-align:center; width:20%}
.menu {text-align:center; background-color:gray; }
.start {text-align:center; background-color:navy; }
</style>
</head>
<body>
<table id="layout">
<tr>
<td width="188">
<a href="#">
<div class="menu" onClick="select(this)">Artists</div>
</a></td>
</tr>
<tr>
<td><a href="#">
<div class="menu" onClick="select(this)">CPAs</div>
</a></td>
</tr>
<tr>
<td><a href="#">
<div class="menu" onClick="select(this)">Doctors</div>
</a> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Ok i have been working on this for a while now. I have to have 3 fish swim across the screen in both direction. I have tried a few things but nothing is working. Can someone please explain to me what I am doing wrong. here is my code for you guys to look at it. 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">
<head>
<title>Fish tank</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
// <![CDATA[
var fishPos = new Array(3);
fishPos[0] = "fish1.gif";
fishPos[1] = "fish2.gif";
fishPos[2] = "fish3.gif";
var fillPosition = 10;
for(var i = 0; i < 50; ++i) {
horizontal[i] = fillPosition;
fillPosition += 10;
}
function fishSwim(fishNumber) {
document.getElementById("fishPos").style.left = horizontal + "px";
++fishPos[fishNumber];
if (fishPos[fishNumber] == 49)
fishPos[fishNumber] = 0;
}
function startSwimming() {
setInterval(fish1Swim, 100);
}
// ]]>
</script>
</head>
<body onload="startSwimming();">
<p><span id="fish1" style=
"position:absolute; left:10px; top:10px"><img src="fish1.gif" alt="Image of a fish" /></span></p>
<p><span id="fish2" style=
"position:absolute; left:10px; top:120px"><img src="fish3.gif" alt="Image of a fish" /></span></p>
<p><span id="fish3" style=
"position:absolute; left:10px; top:250px"><img src="fish2.gif" alt="Image of a fish" /></span></p>
</body>
</html>
I am really not understanding and in my book it only give me a page to read about the animation. I am still new to it. Thanks for looking hello all ive been asked to create a javascript slideshow.... and i don't really understand it that much i know a little javscript but not much........ is thier any helpful sites that i can use to teach you step by step to make a javascript slide show???? also if don't want loads of code to be used, i want the code to be clean insted of loads and loads of code what is just unessary. i will be linking the javascript file to the html file so i need to keep the code to a min LOL CHEERS Hi all I am doing an assigment and have gotten to the end and cannot get the unordered list to work. If I try having my </script> tag below the </ul> it does not display anything If i have it above it will only display the varible names or what ever I type between the <li> </li> tag and not the varible assigment. num1,2,3,4 being the varible name. ie. </script> <ul> <li>num1</li> I have tryed <li>+num2+</li> also tryed <li>(num3)</li> also tryed <li>'num4'</li> also tryed and does not display </ul> </head> </html> The following does not display any thing <ul> <li>num1</li> I have tryed <li>+num2+</li> also tryed <li>(num3)</li> also tryed <li>'num4'</li> also tryed </ul> </script> </head> </html> I need to get the <li></li> to display not what I type in there but the assigment of the varible name I put in there.,or the output the varible calculation produces. Hope that was easy to understand lol Any advise would be awesome, cheers Shayne Darcy. You are given a mathematical expression containing integers and the basic operations: *,+,-, /. Find the number of unique results that can be obtained by parenthesizing the expression differently. i.e., by changing the order of evaluation of the operations. Note that all operations are integer operations. For example, if the input is 2 ∗ 3 + 6/2, your output should be 4. Plzz help me with this qs......... Could someone please take a look at my code? It's a simple quiz with one multiple choice question and one fill in the blank. When the user clicks on 'submit' I tried to show some kind of response with correct/incorrect images next to the question. It works with the multiple choice question, but not with the fill in the blank. How can I get the fill in the blank question to work. It always shows the answer as being wrong. Thank you. Quote: answer_list = [ ['False'], ['body','hips','knees'] // Note: No comma after final entry ]; response = []; function setAnswer(question, answer) { response[question] = answer; } function CheckAnswers() { var correct = 0; var flag, resp, answ; for (var i = 0; i < answer_list.length; i++) { flag = false; for(var j=0; j<answer_list[i].length; j++){ resp = response[i].toLowerCase(); answ = answer_list[i][j].toLowerCase(); ################################################################################################# if (response[0] == answer_list[0]) { flag = true; document.myquiz.a1c.style.backgroundImage="url('correct.gif')"; } else{ document.myquiz.a1c.style.backgroundImage = "url('incorrect.gif')"; document.myquiz.a1c.value = " ANS: False. Position the head snugly against the top bar of the frame and then bring the foot board to the infant's feet."; } if (response[1] == answer_list[1]) { flag = true; document.myquiz.a1d.style.backgroundImage="url('correct.gif')"; } else{ document.myquiz.a1d.style.backgroundImage = "url('incorrect.gif')"; } ################################################################################################### } if (flag) { correct++; } } document.writeln("You got " + correct + " of " + answer_list.length + " questions correct!"); } </SCRIPT> </HEAD> <FORM name="myquiz"> <B>1. When measuring height/length of a child who cannot securely stand, place the infant such that his or her feet are flat against the foot board.</B> <label><INPUT TYPE=radio NAME=question0 VALUE="True" onClick="setAnswer(0,this.value)">True</label> <label><INPUT TYPE=radio NAME=question0 VALUE="False" onClick="setAnswer(0,this.value)">False</label> <textarea rows="2" cols="85" name="a1c" style="background-repeat:no-repeat"></textarea> <B>2. When taking a supine length measurement, straighten the infant's <INPUT id="test" TYPE=text NAME=question1 size=10 onChange="setAnswer(1, this.value)">, <INPUT id="test" TYPE=text NAME=question1 size=10 onChange="setAnswer(1, this.value)">, and <INPUT id="test" TYPE=text NAME=question1 size=10 onChange="setAnswer(1, this.value)">.</B> <textarea rows="2" cols="85" name="a1d" style="background-repeat:no-repeat"></textarea> <INPUT TYPE="button" NAME="check" VALUE="Check Answers" onClick=CheckAnswers()> </FORM> </div> </FONT> </BODY> </HTML> I'm not sure if this is the correct forum or not, but here goes. I want to make a very simple XUL document. Just a simple basic window to be opened up, but, i want the XUL to Load and Render an HTML File. I'm not sure about what function(s) to call to achieve this, can anyone give me any ideas to go on? here's what i have so far use my JavaScript Function called LoadFromDisk(FileName), if the file is there or the load is sucessfull, it can be stored as a variable. And then i have a single Division in the XUL document called RenderWindow. From there i set the innerHTML of the RenderWindow to the data that was loaded from the disk. Is this the right way? thanks I was asked to redo a menu for this site: http://www.listlabs.com/index.php It was originally an imaged based menu, but they wanted it all changed to css/html. I used quickmenu and it used JS to produce the arrows at the top of each menu item. Now to my question... I'm trying to program the menu items to stay active when on the current page. At first, it looks correct, but if you hover back over the menu, it changes back to the inactive state. Any help would be great! Thanks. Hello, i haven't understood how to find the id from buttons, links, button images to auto click yet for example, i want to CLICK HERE how can i do that? how i find the id (I Own firefox with firebug and know basic html) it will be something like javascript:document.GetElementById('id').click(); right? but just want to know how to find or create ids on sites for auto click thanks Thinking in Objects 4 objects w/constructors/overloads min 3 properties on each min 3 methods total was just wondering if anyone had any good links or tutorials to get me started on my first javascript assignment hi, if i have an array of "hop", "skip", "jump" "run", how do i prompt the user to enter a number between 1 and 4 to bring back one of the array list without using an if or switch statement... the code i have so far is: numbers= new Array(); numbers[0]="hop"; numbers[1]="skip"; numbers[2]="jump"; numbers[3]="run"; thanks Hi Everybody, I'd be grateful if you could help me out. I need to change the CSS by changing the id when a link is clicked. The id is in the body tag and by default it is named 'first'. i.e <body id="first">. If I click on the link named 'Change id to Second', this should change to <body id="Second">. If I further click on the link named "Change id to Second" this should change to <body id="Third">. My code below works (I have stripped this down to make sense), but only when I click one of the links for the first time. If I am to click the second/ third link, nothing happens: Code: <html>
<head>
<script type="text/javascript">
function changeFirst() {
document.getElementById('blanky').id = 'first';
document.getElementById('second').id = 'first';
document.getElementById('third').id = 'first';
}
function changeSecond() {
document.getElementById('blanky').id = 'second';
document.getElementById('first').id = 'second';
document.getElementById('third').id = 'second';
}
function changeThird() {
document.getElementById('blanky').id = 'third';
document.getElementById('first').id = 'third';
document.getElementById('second').id = 'third';
}
</script>
</head>
<body id=first><!-- I need to change this id -->
<p>Hello, the id above should change when the following links are clicked</p>
<a onclick="changeFirst()">Change id to First</a>
<a onclick="changeSecond()">Change id to Second</a>
<a onclick="changeThird()">Change id to Third</a>
</body>
</html>
Any help will be greatly appreciated. Cheers Hi all together! I have downloaded a javascript obfuscator and checked it out. It seems as it takes my code an put it together with a new function "function(x)" in the eval()-statement. But what does this "function(x)"? I do not understand it... And why is all putted in the eval()-Statement? Can someone help me? -- START-- eval( ( function(x){ var d=""; var p=0; while(p<x.length) { if(x.charAt(p)!="`") { d+=x.charAt(p++); } else { var l=x.charCodeAt(p+3)-28; if(l>4) { d+=d.substr(d.length-x.charCodeAt(p+1)*96-x.charCodeAt(p+2)+3104-l,l); } else { d+="`"; p+=4 } } } return d } ) (" ...MY OLD JAVA SCRIPT... ") ) -- END-- I'm using the following javascript for my main navigation. Quote: var mastertabvar=new Object() mastertabvar.baseopacity=0 mastertabvar.browserdetect="" function showsubmenu(masterid, id){ if (typeof highlighting!="undefined") clearInterval(highlighting) submenuobject=document.getElementById(id) mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : "" hidesubmenus(mastertabvar[masterid]) submenuobject.style.display="block" instantset(mastertabvar.baseopacity) highlighting=setInterval("gradualfade(submenuobject)",50) } function hidesubmenus(submenuarray){ for (var i=0; i<submenuarray.length; i++) document.getElementById(submenuarray[i]).style.display="none" } function instantset(degree){ if (mastertabvar.browserdetect=="mozilla") submenuobject.style.MozOpacity=degree/0 else if (mastertabvar.browserdetect=="ie") submenuobject.filters.alpha.opacity=degree } function gradualfade(cur2){ if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1) cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99) else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100) cur2.filters.alpha.opacity+=10 else if (typeof highlighting!="undefined") //fading animation over clearInterval(highlighting) } function initalizetab(tabid){ mastertabvar[tabid]=new Array() var menuitems=document.getElementById(tabid).getElementsByTagName("li") for (var i=0; i<menuitems.length; i++){ if (menuitems[i].getAttribute("rel")){ menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu if (menuitems[i].className=="selected") showsubmenu(tabid, menuitems[i].getAttribute("rel")) menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){ showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel")) } } } } Can someone please show me how to add an ".onmouseout" function so that when a user rolls out of any of the top level navigation the submenu defaults to the navigation for the current page? http://www.mohrdesigns.com Thanks in advance for any help! I'm in a computer coding class, and I'm having a bit of trouble with Javascript. I'm not looking for anyone to do my homework for me, but any hints you could give me as to why this code isn't working would be greatly appreciated. Basically, I need an empty text box where the user enters their guess as to my age. The user enters their guess, and then gets an answer as to whether their guess is right, too high, or too low. The page looks right, but I can't get the function to work. Thank you... <html> <head> <script> function howoldami(age) if(age=23) { alert("You guessed right!"); } else if { (age>23) alert("I'm not that old."); } else { alert("I'm not that young."); } </script> </head> <body> <form> Guess My Age!<input name="age"><br> <input type=button value=Guess! onclick="howoldami(age.value)"> </form> </body> </html> After some severe experimentation I got to googling for an answer and stumbled upon these forums. So my big question is, is it possible to use getElementsByName() with a variable as the parameter? And if not what is another way I can get at each element based on a variable list of names. Code: var curObjSet = document.getElementsByName(String(idStack[y])).item(0) I'm trying desperately to make my code organic and not to have to hard code field names but without this working its leaving me with out options. Thank you for any time and help provided. - Eric ok im new to coding and was woundering is there a way to open up a game through a program that could have an attached macro or anything.. like for example i would have a racing game that u need to shift and i open it with the coded program and it shifts like an automatic. i sorry if its in the wrong section . thanks |
|||||||