...

View Full Version : Help with Adding Function number by date



sentinelace
12-07-2010, 08:07 PM
I am working on an HTML project that displays a field with a number in the field by each day. What it does is start at 0 on day one. Each day it adds a 1 to the field. Day 2, the field would say 1, then day 3 would say 2, and so on. I am not sure how to approach this. This is also displayed in an HTML format. I want to to be automatic and change as the date changes. I will also need a way to reset it back to zero if possible.

Old Pedant
12-07-2010, 08:23 PM
Please tell me this isn't homework.

It doesn't sound like homework, as I can imagine an instructor wanting to wait around for 3 or 4 days, to make sure you code is functioning, but you never can tell...

You don't say if the "field" is a <form> field or just a <span> or <div> on the page.

I'll assume it is just a <span> or <div>.



// december 7, 2010
// note that months are numbered starting at 0, days start at 1
var startDate = new Date( 2010, 11, 7 );

function setNumberInField( fld )
{
var now = new Date();
var diff = now.getTime() - startDate.getTime();
var days = Math.floor( diff / ( 24 * 60 * 60 * 1000 ) );
fld.innerHTML = days;
}

So you would invoke that via

setNumberInField( document.getElementById("xyz") );

or similar.

sentinelace
12-07-2010, 08:30 PM
Not sure how to invoke that since this does need to be displayed to a HTM format.

LOL, not homework. I'm actually in IT and working on this project for a TV display. I'm just no programmer. Here is what I do in excel on my other TV which works perfect:

=(TODAY()-A4)+B4

This gives present date and subtracts from whatever date is in A4 and then adds the the number I put in b4. When I have to reset it, all I do is change the date. Maybe there is a better way?

Old Pedant
12-07-2010, 08:42 PM
Show the HTML you need to plunk this into.

And all you have to do with my code to change the base date is change that line

var startDate = new Date( 2010, 11, 7 );

sentinelace
12-07-2010, 08:45 PM
But where to I place this? Do I have this code has an html file? It needs to run to a browser and automatically updated that field every day on it's own. Example: The only thing I want to see is the number calculated from the date.


Like this:

TV display could say this:

Number of days open: 1

Then the next day Number of days 2 etc.

The number should be the only thing changing. There just may need to be day where I have to reset that number field. Make more sense? So I need to know how I save this code too. Thanks man.

Old Pedant
12-07-2010, 08:49 PM
Here, silly but fully functioning page:


<html>
<head>
<script type="text/javascript">
// 1 November 2010, just for demo purposes:
var startDate = new Date( 2010, 10, 1 );

function setNumberInField( fld )
{
var now = new Date();
var diff = now.getTime() - startDate.getTime();
var days = Math.floor( diff / ( 24 * 60 * 60 * 1000 ) );
fld.innerHTML = days;
}
</script>
</head>
<body onload="setNumberInField(document.getElementById('zamboni'));">
Looky looky looky, today is day number <span id="zamboni">HERE</span>!!!
</br/>
Don't blink!
</body>
</html>

Old Pedant
12-07-2010, 08:50 PM
If you want me to help you put it into YOUR html page, then you have to show me what your HTML looks like.

sentinelace
12-07-2010, 08:56 PM
<head>
<style type="text/css">
.auto-style1 {
font-size: 72pt;
font-weight: bold;
}
</style>
</head>

<font color=red><center><p class="auto-style1">Safety First</p></center></font>
<font color=navy><center><p style="font-size:500%">Days without</p></center></font>
<font color=navy><center><p style="font-size:500%">a Lost Time Accident</p></center></font>


Before days needs to display 1 and tomorrow should show 2

Old Pedant
12-07-2010, 09:35 PM
Okay, so just change that one line to:


<font color=navy>
<center>
<p style="font-size:500%"><span id="days"></span> Days without</p>
</center>
</font>

And then use the code as I showed it. You will modify your <body> tag to

<body onload="setNumberInField(document.getElementById('days'));">


The <script>...</script> stuff goes right after your </style>, still in the <head> section.

There are other ways to do this. If you already have an onload= in your <body> tag, let me know.

sentinelace
12-07-2010, 09:48 PM
perfect! Now all I need to do is have this page switch between another htm file that sites in the same directory. Is there a simple line for that?

Old Pedant
12-07-2010, 09:57 PM
Sorry, I don't understand the question/problem.

Can you explain more?

sentinelace
12-07-2010, 10:15 PM
I have htm page 1 and htm page 2. I need them to loop between each other every X seconds.

This works on the one page:

<script type="text/javascript">
<!--
function delayer(){
window.location = "./test.htm"
}
//-->
</script>
<html>
<frameset onLoad="setTimeout('delayer()', 5000)" cols="*">
</frameset>
</html>

But I can't get it to work on the other for some reason to loop back

Old Pedant
12-07-2010, 10:48 PM
AHHH...perhaps because of the onload that is setting up the "Days since..." value?

Various ways to do this, but there's no reason you can't simply do:



<body onLoad="setNumberInField(document.getElementById('days'));setTimeout('delayer()', 5000);">

Naturally, the "delayer" function in this page must point to "test2.html" instead.

If that doesn't work, can you show the pages live? Give us a URL?

Philip M
12-08-2010, 08:53 AM
I have htm page 1 and htm page 2. I need them to loop between each other every X seconds.


A really good way to drive people away from your site. :)

sentinelace
12-08-2010, 01:26 PM
This isn't on a site. It's on a TV in our plant and only runs locally. I am not sure where to place that line. This isn't working.


<head>
<style type="text/css">
.auto-style1 {
font-size: 120pt;
font-weight: bold;
}
.auto-style2 {
color: #FF0000;
font-size: 100pt;
}
.auto-style3 {
font-size: 95pt;
}
</style>
</head>

<font color=red><center><p class="auto-style1">Safety First</p></center></font>
<html>
<head>
<script type="text/javascript">
// 6 Decemeber 2010, just for demo purposes:
var startDate = new Date( 2010, 11, 6 );

function setNumberInField( fld )
{
var now = new Date();
var diff = now.getTime() - startDate.getTime();
var days = Math.floor( diff / ( 24 * 60 * 60 * 1000 ) );
fld.innerHTML = days;
}
</script>
</head>
<body onload="setNumberInField(document.getElementById('zamboni'));">
</br/>
</body>
</html>
</font><center><p style="font-size:500%"><span id="zamboni" class="auto-style2">HERE</span><font color=navy>
<span class="auto-style3">Days without</span></p></font></center>
<font color=navy><center><p class="auto-style3">a Lost Time Accident</p></center></font>
<body onLoad="setNumberInField(document.getElementById('days'));setTimeout('test2.htm()', 5000);">

Philip M
12-08-2010, 02:00 PM
You have two <body onload statements. Add the function delayer() as below, delete the last <body onload> and change the first one to as shown:-


function delayer() {
window.location = "test2.html";
}
</script>
</head>
<body onload = "setNumberInField(document.getElementById('zamboni'));setTimeout('delayer()', 5000)">

Naturally test2.html must be the actual URL of your page.

sentinelace
12-08-2010, 02:19 PM
here is what I have:

<head>
<style type="text/css">
.auto-style1 {
font-size: 120pt;
font-weight: bold;
}
.auto-style2 {
color: #FF0000;
font-size: 100pt;
}
.auto-style3 {
font-size: 95pt;
}
</style>
</head>

<font color=red><center><p class="auto-style1">Safety First</p></center></font>
<html>
<head>
<script type="text/javascript">
// 6 Decemeber 2010, just for demo purposes:
var startDate = new Date( 2010, 11, 6 );

function setNumberInField( fld )
{
var now = new Date();
var diff = now.getTime() - startDate.getTime();
var days = Math.floor( diff / ( 24 * 60 * 60 * 1000 ) );
fld.innerHTML = days;
}
</script>
</head>
</br/>
</body>
</html>
</font><center><p style="font-size:500%"><span id="zamboni" class="auto-style2">HERE</span><font color=navy>
<span class="auto-style3">Days without</span></p></font></center>
<font color=navy><center><p class="auto-style3">a Lost Time Accident</p></center></font>
function delayer() {
window.location = "./test2.html";
}
</script>
</head>
<body onload = "setNumberInField(document.getElementById('zamboni'));setTimeout('delayer()', 5000)">


Now this is added to my safety html file that then goes to html 2 and then html2 goes back to this one.

Did I place the code in the wrong place? Still no go.

sentinelace
12-08-2010, 02:28 PM
I think I got it:
<head>
<style type="text/css">
.auto-style1 {
font-size: 120pt;
font-weight: bold;
}
.auto-style2 {
color: #FF0000;
font-size: 100pt;
}
.auto-style3 {
font-size: 95pt;
}
</style>
</head>

<font color=red><center><p class="auto-style1">Safety First</p></center></font>
<html>
<head>
<script type="text/javascript">
// 6 Decemeber 2010, just for demo purposes:
var startDate = new Date( 2010, 11, 6 );

function setNumberInField( fld )
{
var now = new Date();
var diff = now.getTime() - startDate.getTime();
var days = Math.floor( diff / ( 24 * 60 * 60 * 1000 ) );
fld.innerHTML = days;
}
</script>
</head>
</br/>
</body>
</html>
</font><center><p style="font-size:500%"><span id="zamboni" class="auto-style2">HERE</span><font color=navy>
<span class="auto-style3">Days without</span></p></font></center>
<font color=navy><center><p class="auto-style3">a Lost Time Accident</p></center></font>
function delayer() {
window.location = "./Lineauto10.html";
}
</script>
</head>
<script type="text/javascript">
function delayer() {
window.location = "./test2.htm";
}
</script>
</head>
<body onload = "setNumberInField(document.getElementById('zamboni'));setTimeout('delayer()', 5000)">
</script>


Thanks for all your help! You rock!

sentinelace
12-08-2010, 02:52 PM
How can I thank you?

Oh and this isn't a big deal but the code is off by a month. For example, I want to start the date at Oct. 4th but then the numbers are off by a month so I have to put the previous month. How can I fix that?

Old Pedant
12-08-2010, 11:37 PM
I told you that: Month numbers in JS go from 0 to 11. So October *IS* month 9 in JS.

Look in the code:


// 6 December 2010, just for demo purposes:
var startDate = new Date( 2010, 11, 6 );

See? 11, not 12, for December.

sentinelace
12-09-2010, 02:45 PM
Oh I am sorry. Thank you again for so much help!

sentinelace
12-29-2010, 05:12 PM
Now I need to add a 3rd page. When it gets to page 3 it won't go back to page 1. Here is what I have on page 3:


<head>
<meta content="en-us" http-equiv="Content-Language">
<style type="text/css">
.auto-style1 {
text-align: center;
font-size: 75pt;
color: #FF0000;
}
.auto-style3 {
text-align: left;
font-size: x-large;
color: #000080;
}
.auto-style4 {
text-align: center;
font-size: x-large;
color: #000080;
}
</style>
</head>

<p>
<img alt="" height="28" src="../Users/user/pictures/test.png" width="94"></p>
<p class="auto-style1">Safety Policy</p>
<p class="auto-style3">We are committed to providing a
safe workplace for all of its employees, customers and the general public.</p>
<p class="auto-style3">Our company is committed to take reasonable effors to
eliminate the hazards that cause accidents and injuries.</p>
<p class="auto-style3">Disregard or willful violations of this Policy by
employees at any level may be considered cause for disciplinary action in
accordance with the company's policies.</p>
<p class="auto-style4">&nbsp;</p>
<p class="auto-style4">
<img alt="" height="84" src="../Users/user/pictures/test.jpg" width="300"></p>
<p class="auto-style4">User</p><script type="text/javascript">
<script type="text/javascript">
function delayer() {
window.location = "./page1.htm";
}
</script>
</head>
<body onload = "setNumberInField(document.getElementById('zamboni'));setTimeout('delayer()', 15000)">
</script>

Old Pedant
12-29-2010, 09:09 PM
Ummm...that setNumberInField(document.getElementById('zamboni')); was *EXAMPLE* code.

(1) You don't have any element with an ID of "zamboni" on this page.

(2) You don't have a function named setNumberInField() on this page.

Get rid of all that crap.

sentinelace
12-29-2010, 09:16 PM
Still no go with this:

<head>
<meta content="en-us" http-equiv="Content-Language">
<style type="text/css">
.auto-style1 {
text-align: center;
font-size: 75pt;
color: #FF0000;
}
.auto-style3 {
text-align: left;
font-size: x-large;
color: #000080;
}
.auto-style4 {
text-align: center;
font-size: x-large;
color: #000080;
}
</style>
</head>

<p>
<img alt="" height="28" src="../Users/user/pictures/test.png" width="94"></p>
<p class="auto-style1">Safety Policy</p>
<p class="auto-style3">We are committed to providing a
safe workplace for all of its employees, customers and the general public.</p>
<p class="auto-style3">Our company is committed to take reasonable effors to
eliminate the hazards that cause accidents and injuries.</p>
<p class="auto-style3">Disregard or willful violations of this Policy by
employees at any level may be considered cause for disciplinary action in
accordance with the company's policies.</p>
<p class="auto-style4">&nbsp;</p>
<p class="auto-style4">
<img alt="" height="84" src="../Users/user/pictures/test.jpg" width="300"></p>
<p class="auto-style4">User</p><script type="text/javascript">
<script type="text/javascript">
function delayer() {
window.location = "./page1.htm";
}
</script>
</head>
<body onload = "setTimeout('delayer()', 15000)">
</script>

Old Pedant
12-29-2010, 09:31 PM
Your HTML is utterly bogus.

Your ordering of an HTML page needs to be

<html>
<head>
<script>...optional...</script>
<style>...optional...</style>
</head>
<body>
... body contents ...
</body>
</html>

(<script> and <style> can be repeated, in any order, within the <head>)

You have extra </script> and </head> tags. You have your body content *BEFORE* your <body> tag, etc.

You can't expect a page to work if it's not legal HTML.

sentinelace
12-29-2010, 09:47 PM
I know this is wrong but maybe I'm on the right track? Where am I placing these wrong?

<html>
<head>
<meta content="en-us" http-equiv="Content-Language">
<style type="text/css">
.auto-style1 {
text-align: center;
font-size: 75pt;
color: #FF0000;
}
.auto-style3 {
text-align: left;
font-size: x-large;
color: #000080;
}
.auto-style4 {
text-align: center;
font-size: x-large;
color: #000080;
}
</style>

<body>
<p>
<img alt="" height="28" src="../Users/testuser/test.png" width="94"></p>
<p class="auto-style1">Safety Policy</p>
<p class="auto-style3">We are committed to providing a
safe workplace for all of its employees, customers and the general public.</p>
<p class="auto-style3">Our company is committed to take reasonable effors to
eliminate the hazards that cause accidents and injuries.</p>
<p class="auto-style3">Disregard or willful violations of this Policy by
employees at any level may be considered cause for disciplinary action in
accordance with the company&#39;s policies.</p>
<p class="auto-style4">&nbsp;</p>
<p class="auto-style4">
<img alt="" height="84" src="../Users/test/pictures/test.jpg" width="300"></p>
<p class="auto-style4">Username</p>
</body>
<script type="text/javascript">
function delayer() {
window.location = "./safety.htm";
}
</script>

<body onload = "setTimeout('delayer()', 15000)">
</body>
</html>

Old Pedant
12-29-2010, 10:05 PM
You can't have more than one <body>!


<html>
<head>
<meta content="en-us" http-equiv="Content-Language">
<style type="text/css">
.auto-style1 {
text-align: center;
font-size: 75pt;
color: #FF0000;
}
.auto-style3 {
text-align: left;
font-size: x-large;
color: #000080;
}
.auto-style4 {
text-align: center;
font-size: x-large;
color: #000080;
}
</style>
<script type="text/javascript">
function delayer() {
window.location = "./safety.htm";
}
</script>
</head>
<body onload = "setTimeout('delayer()', 15000)">
<p>
<img alt="" height="28" src="../Users/testuser/test.png" width="94"></p>
<p class="auto-style1">Safety Policy</p>
<p class="auto-style3">We are committed to providing a
safe workplace for all of its employees, customers and the general public.</p>
<p class="auto-style3">Our company is committed to take reasonable effors to
eliminate the hazards that cause accidents and injuries.</p>
<p class="auto-style3">Disregard or willful violations of this Policy by
employees at any level may be considered cause for disciplinary action in
accordance with the company's policies.</p>
<p class="auto-style4">&nbsp;</p>
<p class="auto-style4">
<img alt="" height="84" src="../Users/test/pictures/test.jpg" width="300"></p>
<p class="auto-style4">Username</p>
</body>
</html>

sentinelace
12-29-2010, 10:14 PM
Perfect!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum