elmerdev30 Posted August 10, 2016 Share Posted August 10, 2016 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 comment Share on other sites More sharing options...
davej Posted August 10, 2016 Share Posted August 10, 2016 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> 1 Link to comment Share on other sites More sharing options...
Ingolme Posted August 10, 2016 Share Posted August 10, 2016 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. 1 Link to comment Share on other sites More sharing options...
elmerdev30 Posted August 11, 2016 Author Share Posted August 11, 2016 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 comment Share on other sites More sharing options...
elmerdev30 Posted August 11, 2016 Author Share Posted August 11, 2016 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 comment Share on other sites More sharing options...
davej Posted August 11, 2016 Share Posted August 11, 2016 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. 1 Link to comment Share on other sites More sharing options...
elmerdev30 Posted August 15, 2016 Author Share Posted August 15, 2016 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 comment Share on other sites More sharing options...
Ingolme Posted August 15, 2016 Share Posted August 15, 2016 It's not that simple. First you need a web host that supports PHP. 1 Link to comment Share on other sites More sharing options...
elmerdev30 Posted August 15, 2016 Author Share Posted August 15, 2016 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 comment Share on other sites More sharing options...
dsonesuk Posted August 15, 2016 Share Posted August 15, 2016 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. 1 Link to comment Share on other sites More sharing options...
davej Posted August 15, 2016 Share Posted August 15, 2016 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. 1 Link to comment Share on other sites More sharing options...
elmerdev30 Posted August 16, 2016 Author Share Posted August 16, 2016 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 comment Share on other sites More sharing options...
elmerdev30 Posted August 16, 2016 Author Share Posted August 16, 2016 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 comment Share on other sites More sharing options...
dsonesuk Posted August 16, 2016 Share Posted August 16, 2016 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 comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now