Halfway through a CSS book I picked up at the library, I now have a pretty good handle on cascading style sheets. I was able to pick up an old jsp page and create a css file for it. The page now looks much prettier.
When it became pretty, I went ahead and created some java script for it as well. The old page would show a date and time of when it was last displayed in the browser. It is important to the functionality of the page. But now I have a js file that will help show how old the page is. I am not calculating hours/days etc, because after an hour the page is useless anyway and the contents need to be refreshed.
Here is the code from the js file.
// elapsed time calculator. Calculates the elapsed time in minutes.
// note that in js, a declaration with var is for a local, no var is global. in this case starttime is global.
function startTimer() {
starttime = new Date();
}
function updateAge() {
var now = new Date();
var elapsedtime = Math.abs(Math.round((starttime-now)/60000))
document.getElementById("elapsedtime").firstChild.nodeValue = elapsedtime;
}
In the generated html, I included the js in the section like this
<script language="JavaScript" src="elapsedtimecalculator.js"></script>
Then I modified the <body> tag to
<body onload="startTimer(); setInterval('updateAge()', 1000 )">
At the position where the updated time should show, I created a span element as a place holder for the updateAge function to refresh every minute. Like so:
<div id="ageofpage">Updated <span id="elapsedtime">0</span> minutes ago. </div>
That's not bad for a start. I will continue to read the CSS book, then brush up on some JS, then dive into PHP. I noticed that google pages are using strict html and not transitional. I will use strict too.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment