|
JavaScript - Display Time In A Material Clock!
How can I draw a cookie where number of chocolate chips represents the number of seconds and the number of bites represents the number of minutes.
I want to show the passage of time on a clock that looks like items are being added to the display according to the number of seconds and minutes. Maybe using a mouse input aswell! Please guide.:confused: I use the Processing Software Similar TutorialsSorry, I'm new to javascript... . I want to make a switch statement that will display something different depending on the time of day. Once I saw something like getTime (?), but it relied on the user's clock. I know that you would expect me to at least research getTime so that I'm asking about something more specific, but I don't think it's what I need because I want mine to give the same result regardless of the viewer's time zone or how off thier clock is. How can I do this? I only need to know how to get the time; I know how I'm going to do the switch statement. I just wanted to give you some idea of what I meant to to... =)
Hello, I want to change time format from 12 to 24 hours and remove AM and PM in this script. Anybody can help me? Code: <style type="text/css">
/*<![CDATA[*/
#clock {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:16px;
color:#030;
padding-top: 24px;
text-align:center;
}
/*//]]>*/
</style>
<script type='text/javascript'>
//<![CDATA[
var dayarray=new Array('Svē','Pir','Otr','Tre','Cet','Pie','Ses');
var montharray=new Array('01','02','03','04','05','06','07','08','09','10','11','12');
function getthedate(){
mydate=new Date();
year=mydate.getUTCFullYear();
day=mydate.getDay();
month=mydate.getMonth();
daym=mydate.getDate();
if(daym<10) {
daym='0'+daym;
}
hours=mydate.getHours();
minutes=mydate.getMinutes();
seconds=mydate.getSeconds();
dn='AM';
if(hours>=12) {
dn='PM';
}
dn='AM';
if(hours>=12) {
dn='PM';
}
if(hours>12){
hours=hours-12;
}
if(hours==0){
hours=12;
}
if(minutes<=9) {
minutes='0'+minutes;
}
if(seconds<=9) {
seconds='0'+seconds;
}
cdate=dayarray[day]+', '+daym+'-'+montharray[month]+'-'+year+', '+hours+':'+minutes+':'+seconds+' '+dn;
document.getElementById('clock').firstChild.nodeValue=cdate;
setTimeout('getthedate()',1000);
}
window.onload=function() {
getthedate();
}
//]]>
</script>
Thanks. Can someone help me modify this script be set to a specific Time Zone rather than picking up the time from the local machine? I want it to countdown to 6:00 am EST. http://javascript.internet.com/time-...countdown.html Can anyone tell me what to add where if it is possible? Thank you in advance. Hi everyone, i made this clock and for me in the UK it displays my time, however for people everywhere else in the world it displays their current time, i would like it to display GMTdate only regardless of where you live. any help would be great. below is my code: Code: <script type="text/javascript">
<!--
function updateClock ( )
{
var currentTime = new Date ( );
var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );
// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
// Choose either "AM" or "PM" as appropriate
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
// Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
// Convert an hours component of "0" to "12"
currentHours = ( currentHours == 0 ) ? 12 : currentHours;
// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
// Update the time display
document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}
// -->
</script>
thanks hello all, this is my first time on this site and i can usally find all the information i need on google. However iv run into a problem while coding a countdown timer for students in my school i will be hosting it as a mobile website. what im having problems with is getting not the system time, but 1 syncronized time source ex. The official U.S.time or any other single time source if that one will not be the best. any suggestions? ps. i am completely new to js so make any suggestions and please explain throughly. Thanks! Pretty simple, I just want to display a <div> after say 20 seconds or any predefined value. Ideally with jQuery
hi all, im looking for a script that does the following when the page loads "text1" is displayed. then on the next line 2 seconds later "text2" is displayed and test1 is still displayed. and i need this to go to 5 lines so the final project should look like --- text1 text2 text3 text4 text5 thanks Hey guys. So I've been learning PHP and MySQLi for the past few weeks and it's going brilliantly! I intend to start learning JS over the Xmas holidays, but right now I only have a very basic knowledge of it. I was just wondering if someone could point me in the right direction on how to do this, as I think i should be pretty easy. After someone changes something in the admin area [e.g. the position of an item] I want to be able to have a small div display at the top of the screen saying something like "Position Updated!" and then have it fade away after 2-3 seconds. Just wondering if there's a fairly easy way to do this, or would I have to go get something like MooTools, etc.? Thanks a lot! I was trying to display time of last visit along with login name.. can someone help me on this pls? Hi, I want to display my listings like they do he http://www.ticketnetwork.com/performers/concerts/a.aspx The code on my end calling the third party service looks like this: <script language="javascript" type="text/javascript"> document.write('<script language="javascript" src="http://###########.com/?bid='+####+'&sitenumber='+#+'&tid=event_names&pcatid=2&showcats=true&title=Concerts Tickets"></' + 'script>'); </script> How do I make it only display one letter at a time? I believe some variation on the sort method might work... Hi! First post here! Would really appreciate some help on a javascript that would display the time elapsed since a particular visitor last visited my webpage, using cookies. So basically it should show something like: "You last visited my page 2 days & 12 mins ago!" I've a little background in java but none in javascript... Thanks so much! I have this code which converts Fahrenheit to Celsius. Now, I have to have a counter that displays the amount of times I have made a conversion. I have no clue how to do this. This is the initial code:
Code: <html>
<head>
<script type="text/javascript">
/* Converts given centigrade in one text box to farenheit in another */
function convert1 () {
document.getElementById("output").value =
document.getElementById("input").value*1.8+32;
}
</script>
</head>
<body>
<p>Then enter the input and view the output</p>
<input type="text" size="15" id="input">
<input type="button" value=" ==> " onclick="convert1()">
<input type="text" size="15" id="output">
</body> </html>
I don't know how to approach this so I tried different things.... Code: tml>
<head>
<script type="text/javascript">
/* Converts given centigrade in one text box to farenheit in another */
function convert1 () {
document.getElementById("output").value =
document.getElementById("input").value*1.8+32;
}
function counter()
{
if (function convert1().onclick==true)
{count++;}
}
</script>
</head>
<body>
<p>Then enter the input and view the output</p>
<input type="text" size="15" id="input">
<input type="button" value=" ==> " onclick="convert1()">
<input type="text" size="15" id="output">
</body> </html>
but then I did some research and it said I couldn't do that.... so I tried this: Code: <html>
<head>
<script type="text/javascript">
/* Converts given centigrade in one text box to farenheit in another */
var count=0;
function documentClick()
{
document.getElementById('clicked').value = ++clickCount
}
document.onclick = documentClick;
function convert1 () {
document.getElementById("output").value =
document.getElementById("input").value*1.8+32;
}
</script>
</head>
<body>
<p>Then enter the input and view the output</p>
<input type="text" size="15" id="input">
<input type="button" value=" ==> " onclick="convert1()">
<input type="text" size="15" id="output">
</body> </html>
I think this last code is correct, the problem I have now is that I don't know how to call it to just display as text under the buttons and conversions. I'm looking for some way to display it like ("you have made"+ count+ "conversions");. No boxes or buttons, just text and I don't know how to call for this after the </script>, inside the body. I am new at all this and would appreciate any help. Thanks. It should look like this. Hello I am trying to do something similar to this post http://www.codingforums.com/showthread.php?t=168903 except I need it to be dependent on the hour and minute. Background: I am trying to create a schedule website, the schedule has say 20 items and I want it to display the current "active" event in the schedule, 1 previous event and 3 future events so a total of 5 items from the schedule. An event can range from 30 minutes to 2 hours long, so simply using the above code will not work. It needs to take the minutes into consideration as well. Let me know if you have additional questions. EDIT: 17-Mar-12 @ 12:37PM I would rather not use a bunch of if statements. (http://www.codingforums.com/showthread.php?t=250358) The schedule could change mid day so having to go through and edit a bunch of if statements would not be ideal When the site loads up, invite the user to enter their name and then display a message at the top of the document which will say< good morning, evening, or afternoon >, based on the time they access your site, welcome to <insert the name of your site> This is the question how do i do it?? My question is twofold. First, is there a way to have a javascript file display an externally hosted image when opened with a browser? I mean such a way where the URL of the javascript file can be referenced by an html document and display an image? Furthermore, is there a way to have this be a different image depending on the time of day and timezone of the user, specifically one image in the morning and a different image in the evening? I apologize if I posted this in the wrong section, but I wasn't sure where else this could go. 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> 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 |
|||||||