Jump to content

help on my timer count up - indicating the last update


Recommended Posts

Hi,

 

I am new to html and css but I learned a thing or two through the tutorials.

I am trying create a timer that indicates the last update of a post. So, the timer should count from 0 and stop when ever I update a new post. And, then, start the count again from 0.

 

I was able to formulate one with the help of the tutorials, but I can't make it the way that I wanted. Instead, the timer automatically restarts when I refresh the page.

Here's what I've made. I am not sure about the minutes and hours.

<p id="p1">Last update:

<label id="hours">00</label>:<label id="minutes">00</label>:<label id="seconds">00</label>
    <script type="text/javascript">
        var hoursLabel = document.getElementById("hours");
        var minutesLabel = document.getElementById("minutes");
        var secondsLabel = document.getElementById("seconds");
        var totalSeconds = 0;
        setInterval(setTime, 1000);

        function setTime()
        {
            ++totalSeconds;
            secondsLabel.innerHTML = pad(totalSeconds%60);
            minutesLabel.innerHTML = pad(parseInt(totalSeconds/60));

            ++totalMinutes;
            minutesLabel.innerHTML = pad(totalMinutes%60);
            hoursLabel.innerHTML = pad(parseInt(totalMinutes/60));

            ++totalHours;
            hoursLabel.innerHTML = pad(totalHours%24);
            hoursLabel.innerHTML = pad(parseInt(totalMinutes/60));
        }

        function pad(val)
        {
            var valString = val + "";
            if(valString.length < 2)
            {
                return "0" + valString;
            }
            else
            {
                return valString;
            }
        }
    </script></p>

Could anyone help me out with how to make this not restart whenever the page is refreshed?

 

I would really appreciate your help.

 

Thanks.

 

Link to post
Share on other sites

I am trying create a timer that indicates the last update of a post.

 

Normally a post is going to be entered into a table in the database. That entry would include a timestamp. So it isn't clear to me what you are trying to do.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>time</title>
</head>
<body>

<p id="p1">Last update:
<span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>
</p>

<script>
// This code is rather strange as it accumulates seconds and minutes and hours 
// as independent semi-equivalent totals

        var hoursLabel = document.getElementById("hours");
        var minutesLabel = document.getElementById("minutes");
        var secondsLabel = document.getElementById("seconds");
        var totalSeconds = 0, totalMinutes = 0, totalHours = 0;
        setInterval(setTime, 1000);

        function setTime()
        {
	    'use strict';
            ++totalSeconds;
            secondsLabel.innerHTML = pad(totalSeconds%60);
			
	    if (totalSeconds%60 == 0){
			
		++totalMinutes;
		minutesLabel.innerHTML = pad(totalMinutes%60);
				
		if (totalMinutes%60 == 0){
				
		    ++totalHours;
		    hoursLabel.innerHTML = pad(totalHours);
		}
	    }
        }

        function pad(val)
        {
           var valString = val + "";
            if(valString.length < 2)
            {
                return "0" + valString;
            }
            else
            {
                return valString;
            }
        }
</script>
</body>
</html>
  • Like 1
Link to post
Share on other sites

You're going to need to store the starting time on the server side with a language like PHP and load that time onto the page for Javascript to use.

  • Like 1
Link to post
Share on other sites

 

 

Normally a post is going to be entered into a table in the database. That entry would include a timestamp. So it isn't clear to me what you are trying to do.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>time</title>
</head>
<body>

<p id="p1">Last update:
<span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>
</p>

<script>
// This code is rather strange as it accumulates seconds and minutes and hours 
// as independent semi-equivalent totals

        var hoursLabel = document.getElementById("hours");
        var minutesLabel = document.getElementById("minutes");
        var secondsLabel = document.getElementById("seconds");
        var totalSeconds = 0, totalMinutes = 0, totalHours = 0;
        setInterval(setTime, 1000);

        function setTime()
        {
	    'use strict';
            ++totalSeconds;
            secondsLabel.innerHTML = pad(totalSeconds%60);
			
	    if (totalSeconds%60 == 0){
			
		++totalMinutes;
		minutesLabel.innerHTML = pad(totalMinutes%60);
				
		if (totalMinutes%60 == 0){
				
		    ++totalHours;
		    hoursLabel.innerHTML = pad(totalHours);
		}
	    }
        }

        function pad(val)
        {
           var valString = val + "";
            if(valString.length < 2)
            {
                return "0" + valString;
            }
            else
            {
                return valString;

 

Hi dave, thank you for responding to my post.

 

What I am actually trying to put here is a timer that counts up in hours, minutes and seconds. Say, for instance, by the time I click the 'Post' button to this reply, the time will begin to count up to (maximum) 24 hours, because I will be updating the site every single day. So, I know the gap in hours, minutes and seconds when the site was last updated.

 

I admit the code was strange since I only added the minutes and hours based on the seconds, which is the original code I followed:

++totalSeconds;
            secondsLabel.innerHTML = pad(totalSeconds%60);
            minutesLabel.innerHTML = pad(parseInt(totalSeconds/60));

Based on that, I formulated the minutes and hours, which resulted to this: http://screencast.com/t/Sy44tLESatc

Obviously, the hours never showed a number, except '00' and the minutes went to over 100 and counting. However, when I refresh the page, the numbers of minutes and seconds also restart.

 

I don't want it to refresh when I refresh the page or even if I close it. I want the counting to continue until the next day.

 

I am hoping that this code you formulated is correct.

  {
	    'use strict';
            ++totalSeconds;
            secondsLabel.innerHTML = pad(totalSeconds%60);
			
	    if (totalSeconds%60 == 0){
			
		++totalMinutes;
		minutesLabel.innerHTML = pad(totalMinutes%60);
				
		if (totalMinutes%60 == 0){
				
		    ++totalHours;
		    hoursLabel.innerHTML = pad(totalHours);
		}
	    }
        }

The website is built using bootstrap css and fontawesome, which I never have any idea. The developer only left me ftp login. I was clueless what to do next, except to do google search, etc.

Thanks to the tutorials at w3schools.com, I was able to find the timer tutorial and the members' posts on this forum. But I never found what I wanted so I created a new topic here.

 

I don't know if I am allowed to put the site here so you'll know exactly what I mean. But, I think this screenshot

 

As I've said, I don't have any background on css, javascript, or html. I just learned about the timer codes through the tutorials and other posts.

So, I'm hoping to get some help. Please guys....

Link to post
Share on other sites

You're going to need to store the starting time on the server side with a language like PHP and load that time onto the page for Javascript to use.

Can you expound on how to do that?

As I've said, I am new to css, html, etc.

The website is built using bootstrap css and fontawesome, which I never have any idea. The developer only left me with that info and the ftp login.

But now that you brought it up, I might as well search on how to store starting time on server side and study the php language.

 

If you have may, perhaps, share a little info on how it should be done.

Thanks.

Link to post
Share on other sites

The code I provided above is just a Javascript counter. It won't keep time if the page is closed or refreshed. When you post to a webpage that is a server-side operation -- not client-side. The client-side is the browser running Javascript. The Javascript counter above only runs in an open browser. When something like a message is stored to a webpage it is most commonly stored in a database using server-side code such as Php. You might want to look at a Php tutorial. There are many of them online.

 

http://www.w3schools.com/php/

 

As Ingolme says above, if you really want live timers running on the page then Php would need to pass each message post time to the Javascript (perhaps in a hidden field) so that the Javascript could produce that changing elapsed-time display. The Php code runs only when the page is being rendered and loaded but a continuously changing timer value would require that Javascript continuously update the displayed value.

  • Like 1
Link to post
Share on other sites

I just know a little about html or css. Learning a php language is a huge task and time consuming.

I only need to learn about the timer, though. Specifically, the timer count up.

 

Can you guys show me or give me an example using php or server side, or whatever that means?

Pleeeaase.....

Link to post
Share on other sites
What if I add a timer code in the "index.html" to update front page?
I was told to only use plain ftp - important.
The site is built using bootstrap css and fontawesome.

 

Would it be possible to update the index.html with timer code?

Link to post
Share on other sites

You need to be able to store a timestamp of when the post was last updated server-side (php, asp.net), anyone visiting your site, will see a page which will retrieve that timestamp from server-side, ALL WILL BE THE SAME time count down because javascript can use that as a fixed point to count down from, JavaScript is client-side working from the individual users browser, the timestamp would be to when post was visited on that individual browser, the timestamps WILL Be different on EVERY individual browser and lost when browser closed, If you managed to store timestamp using webstorage, the problem remains the same with different timestamps as its still client side which depends on WHEN visited and is lost when cache/history cleared completely.

 

Generally the index.html IS the frontpage.

  • Like 1
Link to post
Share on other sites

 

The website is built using bootstrap css and fontawesome, which I never have any idea. The developer only left me ftp login. I was clueless what to do next, except to do google search, etc.

 

If the website displays the message and also a date/time stamp for each message -- then you could write Javascript to use that date/time stamp.

 

If such a date/time stamp is not provided then the server-side code (probably Php) would need to be modified.

  • Like 1
Link to post
Share on other sites

Generally the index.html IS the frontpage.

Yes, I was told it is the frontpage.

 

But I have placed the html for Facebook and Twitter buttons. It even showed the number of Facebook likes.

 

So, I was thinking I could probably do that with the timer as well.

Link to post
Share on other sites

 

If the website displays the message and also a date/time stamp for each message -- then you could write Javascript to use that date/time stamp.

 

If such a date/time stamp is not provided then the server-side code (probably Php) would need to be modified.

Can you show me an example of a javascript for this? If it's not big enough of a request...

Link to post
Share on other sites

DO YOU HAVE a date/time currently showing? Related to post you are referring to, if you are using plugin, embedded code that retrieves data from external site which will be the server-side time provided by them, then you can probably access that textual date by targeting the element it is within and use in count down script.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...