Hey there. I'm a semi-newbie and was wondering if anyone could help me build a simple JS counter that essentially do this:
A)Would start at a custom defined number (ie 5000)
B)Count up by a number (400) every second
C)The page's count would be the same to anyone who was viewing it. Basically, after the counter had been running for a day, when a user loaded the page, the loaded number would not be the original 5000, but 5000+400x, when x=amount of time passed.
Any help is appreciated, of course credits to anyone who writes code, perhaps future programming opportunity.
You can try something like this, but understand that you are going to have to hard code the date at which it started running into the window.onload() function. Uncomment the alert to get that information, then it will have to be adapted--otherwise it will start out from the original value which is not what you want it to do.
Code:
<html>
<head>
<script type ="text/javascript">
function createCounter(startTime, startNumber, displayId){
var x = {
displayId: null,
display: 0,
timer: null
};
x.run = function(){
var clock = new Date();
var current = clock.getTime();
x.display = (((current - startTime) * 400) + startNumber);
x.displayId = document.getElementById(displayId);
x.timer = setTimeout(x.advance, 1000);
}
x.advance = function(){
x.display += 400;
var z = document.createTextNode(x.display);
if (x.displayId.firstChild){
x.displayId.removeChild(x.displayId.firstChild);
}
x.displayId.appendChild(z);
x.timer = setTimeout(x.advance, 1000);
}
return x;
}
var clock; //global variable
window.onload = function(){
var d = new Date();
var start = d.getTime();
var original = 5000;
var display = 'counter';
//alert("Copy this value down to hard code into the function" + start);
clock = createCounter(start, original, display);
clock.run();
}
</script>
</head>
<body>
<div id = "counter">
</div>
</body>
</html>
Last edited by Tcobb; 12-27-2010 at 02:06 PM.
Reason: took out alert inserted for debugging purposes
<script>
<!--
var milisec=0
var seconds=0
var number=0
document.d.d2.value='0'
function display(){
if (milisec>=9){
milisec=0
seconds+=1
number = 5000 + 400*seconds
}
else
milisec+=1
You can try something like this, but understand that you are going to have to hard code the date at which it started running into the window.onload() function. Uncomment the alert to get that information, then it will have to be adapted--otherwise it will start out from the original value which is not what you want it to do.
Code:
<html>
<head>
<script type ="text/javascript">
function createCounter(startTime, startNumber, displayId){
var x = {
displayId: null,
display: 0,
timer: null
};
x.run = function(){
var clock = new Date();
var current = clock.getTime();
x.display = (((current - startTime) * 400) + startNumber);
x.displayId = document.getElementById(displayId);
x.timer = setTimeout(x.advance, 1000);
}
x.advance = function(){
x.display += 400;
var z = document.createTextNode(x.display);
if (x.displayId.firstChild){
x.displayId.removeChild(x.displayId.firstChild);
}
x.displayId.appendChild(z);
x.timer = setTimeout(x.advance, 1000);
}
return x;
}
var clock; //global variable
window.onload = function(){
var d = new Date();
var start = d.getTime();
var original = 5000;
var display = 'counter';
//alert("Copy this value down to hard code into the function" + start);
clock = createCounter(start, original, display);
clock.run();
}
</script>
</head>
<body>
<div id = "counter">
</div>
</body>
</html>
Great! Thanks so much. I'm a little confused as to the "alert". I turned the whole thing into an HTML page and it works, but as to the continuity of the timer, I realize it is beyond my grasp. Suppose the beginning date was November 9th, 2010. How would the script look then? Where would I add that information? Once again thanks for the quick reply
Great! Thanks so much. I'm a little confused as to the "alert". I turned the whole thing into an HTML page and it works, but as to the continuity of the timer, I realize it is beyond my grasp. Suppose the beginning date was November 9th, 2010. How would the script look then? Where would I add that information? Once again thanks for the quick reply
If you uncomment the alert, when you start it up that will be the start date and the alert will give you a long number. Take that number and use it in a new replacement 'window.onload()' function:
Code:
window.onload = function(){
var start = that long number you copied down, without quotes around it;
var original = 5000; //this is the custom starting value--change it if you need to
var display = 'counter'; //this is the HTML id of the element that displays the count
clock = createCounter(start, original, display);
clock.run();
}
Need help with javascript counter
Reply With Quote
Originally Posted by Tcobb
Bookmarks