Help with Javascript

1

I am terrible with javascript and my friend needs a script that will do the following:

Create a Javascript program that examines the time of day and displays it on a webpage like this:
It is now: HH:MM
where the HH and MM are the actual hour and minute at which the page is loaded.
The color of the HH and MM must be based on a numeric value of the hour and minutes. The colors must change when the page gets reloaded a minute later or an hour later.

anybody want to help me with this? :slight_smile:

LOST!! :stuck_out_tongue: C’mon dork, I know you know! And you know I know you know! :stuck_out_tongue:
:flower:

peace,
Jubs

2

im going to try to look into this for you, gimme a couple of minutes, i am not sure that i would be able to find something like that. but im going to give it a shot.

3

I could probably do that, but I don’t understand entirely.

Is that hour and minute according to the users computer or according to global time?

What color for what hour? And what color for what minute?

This would be like 24 hour colors and 60 minute colors, but they can be stored in arrays.

4

Here is what I have for the time so far…

<SCRIPT LANGUAGE="JavaScript">
<!--
var myTime = new Date();
var Hours = myTime.getHours();
var Minutes = myTime.getMinutes();
var dayOrNight;
Hours>12 ? (Hours-=12, dayOrNight="P.M.") : dayOrNight="A.M.";
String(Hours).length<2 ? Hours = "0"+Hours : null;
String(Minutes).length<2 ? Minutes = "0"+Minutes : null;
document.write(Hours+":"+Minutes+" "+dayOrNight);
-->
</SCRIPT>

I still need more clarification on the colors though. I don’t understand that and I don’t know what colors your friend wants to use.

5

hey lost. Thanks. I guess the colors need to be stored into an array and then the hours and minutes display them. Yes there needs to be 12 hour colors and 60 minute colors. They have the array already, i think…

6

sorry jubba, i didnt find anything that would help, i finally gave up at 10 last night.

7

thanks anyway Alex, I’m sure Lost will know :slight_smile:

8

Using Lost’s code I figured it out. I am sure there is a much easier way to do this, but its for my friends class (an HTML class, that I almost took to get an easy A). They didn’t teach them javascript, but just said, go out and make this… so here is the code that I used.


<SCRIPT LANGUAGE="JavaScript">
<!--
var hArray = new Array();
hArray[0] = "#434125";
hArray[1] = "#100370";
hArray[2] = "#283264";
hArray[3] = "#321560";
hArray[4] = "#748672";
hArray[5] = "#112945";
hArray[6] = "#304395";
hArray[7] = "#105231";
hArray[8] = "#887412";
hArray[9] = "#101762";
hArray[10] = "#943054";
hArray[11] = "#412203";



var minArray = new Array();
minArray[0] = "#152270";
minArray[1] = "#144027";
minArray[2] = "#938786";
minArray[3] = "#133454";
minArray[4] = "#589830";
minArray[5] = "#379777";
minArray[6] = "#817209";
minArray[7] = "#112002";
minArray[8] = "#119121";
minArray[9] = "#122112";
minArray[10] = "#521085";
minArray[11] = "#983395";
minArray[12] = "#101843";
minArray[13] = "#128114";
minArray[14] = "#110661";
minArray[15] = "#166947";
minArray[16] = "#647814";
minArray[17] = "#147364";
minArray[18] = "#115680";
minArray[19] = "#998688";
minArray[20] = "#145980";
minArray[21] = "#280376";
minArray[22] = "#192222";
minArray[23] = "#776549";
minArray[24] = "#161552";
minArray[25] = "#441020";
minArray[26] = "#166913";
minArray[27] = "#150519";
minArray[28] = "#121224";
minArray[29] = "#849476";
minArray[30] = "#150370";
minArray[31] = "#136164";
minArray[32] = "#120260";
minArray[33] = "#635997";
minArray[34] = "#493485";
minArray[35] = "#812934";
minArray[36] = "#236892";
minArray[37] = "#110169";
minArray[38] = "#422051";
minArray[39] = "#194719";
minArray[40] = "#592471";
minArray[41] = "#161771";
minArray[42] = "#627282";
minArray[43] = "#260179";
minArray[44] = "#146554";
minArray[45] = "#101089";
minArray[46] = "#223487";
minArray[47] = "#813458";
minArray[48] = "#929922";
minArray[49] = "#149606";
minArray[50] = "#421242";
minArray[51] = "#135975";
minArray[52] = "#787899";
minArray[53] = "#875567";
minArray[54] = "#396258";
minArray[55] = "#364858";
minArray[56] = "#953889";
minArray[57] = "#547124";
minArray[58] = "#111757";
minArray[59] = "#305438";

var myTime = new Date();
var Hours = myTime.getHours();
var Minutes = myTime.getMinutes();
var dayOrNight;
if(Hours>12)
{
      Hours = Hours - 12;
      dayOrNight = "PM";
}
else
{
      dayOrNight = "AM";
}
if(String(Hours).length<2)
{
      Hours = "0"+Hours;
}
if(String(Minutes).length<2)
{
      Minutes = "0"+Minutes;
}
document.write("<font color="+hArray[Hours-1]+">");
document.write(Hours);
document.write("</font>:<font color="+minArray[Minutes]+">");
document.write(Minutes);
document.write("</font> "+dayOrNight);

-->
</SCRIPT>

That should work.

and you can check this link and view the source: http://www.livetoskateboard.com/php/jstest.html

is there a better way to do this?

9

I’m not really looking for a more advanced way, just a different way to display the colors or something, because now I have two friends in the class that both have similar codes…

10

I don’t usually write arrays the way you did there, but considering the amount of items you are storing, I think it works well and is easily editable.

One thing though…

var hArray = new Array(12);

Could also be just…

var hArray = new Array();

Or better yet, just…

var hArray = [];

Other than that… good work man, glad you figured it out.

[edit] Just noticed your other post… there isn’t really much of a different way to write this. It is pretty straightforward on how it should work :-\ [/edit]

11

awesome. thanks man! :slight_smile: