mboehler3 Posted February 21, 2012 Share Posted February 21, 2012 Hi, I'm trying to have a "count-up" timer on my website that displays seconds, minutes, hours, and days that have accumulated since a specific date. I'm not much of a JavaScript coder so I found a script online that seems pretty simple. It works just how I want for seconds, so I copied the code and replicated it for minutes. When I saved and refreshed my page, only the seconds display. http://www.wuzhannanan.com/alex/timeticker.html What do I need to do in order to display both seconds and minutes? Thank you in advance for any help. Link to comment Share on other sites More sharing options...
justsomeguy Posted February 21, 2012 Share Posted February 21, 2012 Both functions are setting the innerHTML of the same element, they are overwriting each other. Link to comment Share on other sites More sharing options...
mboehler3 Posted February 21, 2012 Author Share Posted February 21, 2012 Alright I've taken a step back and am just trying to load this function after removing the innerHTML and window.onload code, but now nothing is displayed: http://www.wuzhannanan.com/alex/timeticker.html I've been looking at examples of JavaScript code and trying them out on my end but nothing seems to work. Link to comment Share on other sites More sharing options...
justsomeguy Posted February 21, 2012 Share Posted February 21, 2012 Now the timeSecs function is never getting executed. Link to comment Share on other sites More sharing options...
mboehler3 Posted February 21, 2012 Author Share Posted February 21, 2012 Ok, now I am getting undefined: http://www.wuzhannanan.com/alex/timeticker.html Link to comment Share on other sites More sharing options...
thescientist Posted February 21, 2012 Share Posted February 21, 2012 why are you using document.write to execute a function? You realize the simplest solution to your original problem was just to create another HTML element to set the seconds too, instead of having them both "write" to the same element? Link to comment Share on other sites More sharing options...
mboehler3 Posted February 21, 2012 Author Share Posted February 21, 2012 why are you using document.write to execute a function? You realize the simplest solution to your original problem was just to create another HTML element to set the seconds too, instead of having them both "write" to the same element? I'm sorry but no, I don't realize it... do you mean copying the code and using a different id? Like "counter2" instead of "counter"? Link to comment Share on other sites More sharing options...
thescientist Posted February 21, 2012 Share Posted February 21, 2012 I don't know what the original code looked like, but it was clear you were trying to output two pieces of information, but to the same element. So it seems as simple as having one element for minutes, and one element for seconds. That's what JSG was trying to tell you. Link to comment Share on other sites More sharing options...
mboehler3 Posted February 21, 2012 Author Share Posted February 21, 2012 Alright I'm sorry for not understanding this but I clearly do not. This code is very simple yet I don't understand how to replicate it. Will someone please show me how I can get two functions loaded on this page? http://www.wuzhannanan.com/alex/timeticker2.html Link to comment Share on other sites More sharing options...
eTianbun Posted February 21, 2012 Share Posted February 21, 2012 Would have love to help, but i use mobile dev' and i cant view the source code. posting the code here, may help! Link to comment Share on other sites More sharing options...
mboehler3 Posted February 21, 2012 Author Share Posted February 21, 2012 Would have love to help, but i use mobile dev' and i cant view the source code. posting the code here, may help! Thank you, here is what I am working with: <div id="counter"><script>var START_DATE = new Date("August 20, 2006"); // put in the starting date herevar INTERVAL = 1; // in secondsvar INCREMENT = 1; // increase per tickvar START_VALUE = 1; // initial value when it's the start datevar count = 0;window.onload = function(){var msInterval = INTERVAL * 1000;var now = new Date();count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;document.getElementById('counter').innerHTML = count;setInterval("count += INCREMENT; document.getElementById('counter').innerHTML = count;", msInterval);}</script></div> Link to comment Share on other sites More sharing options...
justsomeguy Posted February 21, 2012 Share Posted February 21, 2012 Most of the time counters are done they only use one function to update the entire counter. It would look weird if the minutes and seconds changed on different schedules. To do that, first you need to define that function as a regular named function instead of just assigning it to window.onload, like it was before. Instead of setInterval you should use setTimeout, so that each time the function runs it schedules itself to run again on the next interval. The calculation can be changed to this: count = now.valueOf() - START_DATE.valueOf(); You end up with a variable called count which contains the number of milliseconds since the start date. You can use math to figure out how many years, months, days, hours, minutes, etc that represents. There are 86400 seconds in a day, so there are 86400 * 365 * 1000 milliseconds in a year. You would divide the count by that to get the number of years, and subtract from the total to get the remainder (or use the modulus operator). Divide the remainder by 86400 * 1000 to get the number of days remaining, etc. Do the same for hours, minutes, and seconds. Store each of those values in its own variable, and then at the end use the years, days, etc variables to update the element that you want to display the counter inside. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.