DesignMonkey Posted February 18, 2019 Share Posted February 18, 2019 Hey everyone! I could really use some help making my "countdown" timer count up by days, minutes, seconds. How do I modify the code below to accomplish this! Thanks again! <!-- Display the countdown timer in an element --> <p id="demo"></p> <script> // Set the date we're counting down to var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="demo" document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // If the count down is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000); </script> Link to comment Share on other sites More sharing options...
justsomeguy Posted February 18, 2019 Share Posted February 18, 2019 What happens when you run that? Link to comment Share on other sites More sharing options...
DesignMonkey Posted February 19, 2019 Author Share Posted February 19, 2019 @justsomeguy You can run the code here: https://www.w3schools.com/howto/howto_js_countdown.asp Please give me a hand! Link to comment Share on other sites More sharing options...
justsomeguy Posted February 19, 2019 Share Posted February 19, 2019 I don't know what you're trying to do. Are you trying to show how much time has elapsed from a date in the past instead of how much there is until a date in the future? Link to comment Share on other sites More sharing options...
Funce Posted February 19, 2019 Share Posted February 19, 2019 (edited) This one should be pretty simple, this should count up. Its just as simple as making sure that the 'countDownDate' is set to something in the past. All you need to do is replace two bits // Set the date we're counting down to var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime(); With // Set the date we're counting down to var countDownDate = new Date().getTime(); And then this var distance = countDownDate - now; with var distance = now - countDownDate; Edited February 19, 2019 by Funce Link to comment Share on other sites More sharing options...
DesignMonkey Posted March 19, 2019 Author Share Posted March 19, 2019 (edited) Thank you everyone for all of your help, but this doesn't quite solve my issue. I was a little vague about what I wanted this timer to accomplish I suppose. On my companies website I show the years of experience with a big heading that says "29". Underneath that heading I have some text that says "Years of experience and counting". I'm trying to get the timer to count up from Aug 21 of 2018 to Aug 21 of 2019 to show that with every passing day our company is gaining experience and growing. So it would look something like:29 Years of experience and counting Days, Hours, Minutes, Seconds <- and then the program expires once the timer hits 365 Days. Edited March 19, 2019 by DesignMonkey Link to comment Share on other sites More sharing options...
justsomeguy Posted March 19, 2019 Share Posted March 19, 2019 I would start the counter at the original date 29 years ago instead of 2018. Then you can use the code above. You can get the years and display that in one place, and display the rest of the info somewhere else if you want. Link to comment Share on other sites More sharing options...
DesignMonkey Posted March 19, 2019 Author Share Posted March 19, 2019 Ladies and Gentleman, I have solved my own issue. Please reference this code below if you're ever trying to count up from one date to another. <script> // Set the date we're counting down to var countStartDate = new Date("Aug 21, 2018").getTime(); var countYearStart = new Date ("Jan 1, 2019").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = now - countYearStart + countYearStart - countStartDate ; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="demo" document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // If the count down is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000); </script> Cheers 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