All geek questions in one place

A countdown timer that doesn't reset when you refresh the page?

I need to have code for a timer that does not reset the countdown timer even when the page is refreshed.

I saw a sample code in the tree cache , but I don’t know how to implement it in my html file. here is the link:

http://keith-wood.name/countdown.html

I hope someone can help me! thank you :)

I just need an Hour, Minutes and Seconds to show. And after the set time, a window will appear with a prompt in which it will show "Time is up!". This is for the online exam we are developing. Thanks a lot!:)

+4
source share
3 answers

If you know that the user will use the local cache and be able to store data, you can save 2 values ​​to localStorage , 1 for currentTime and 1 for targetTime . Then you compare 2 in the interval, and if currentTime > targetTime , display your message.

Also bind to the onbeforeunload event and save the new currentTime back to localStorage . This will give you the constant countdown you are looking for.

Here is an example of how you can do this:

 var interval; let minutes = 1; let currentTime = localStorage.getItem('currentTime'); let targetTime = localStorage.getItem('targetTime'); if (targetTime == null && currentTime == null) { currentTime = new Date(); targetTime = new Date(currentTime.getTime() + (minutes * 60000)); localStorage.setItem('currentTime', currentTime); localStorage.setItem('targetTime', targetTime); } else{ currentTime = new Date(currentTime); targetTime = new Date(targetTime); } if(!checkComplete()){ interval = setInterval(checkComplete, 1000); } function checkComplete() { if (currentTime > targetTime) { clearInterval(interval); alert("Time is up"); } else { currentTime = new Date(); document.write( "\n <font color=\"white\"> Seconds Remaining:" + ((targetTime - currentTime) / 1000) + "</font>"); } } document.onbeforeunload = function(){ localStorage.setItem('currentTime', currentTime); }

Please note that I would do a snippet, however stackoverflow and other online environment complain about security breaches. Please note that this is completely true and does not violate any security. Save it as .js and run.

To start the countdown again, call localStorage.clear() .

+1
source
  • Include the jQuery library in the chapter section of your page.
  • Download and enable jQuery Countdown CSS and JavaScript in the main section of your page. Alternatively, you can use the minimized version of jquery.countdown.min.js (13.5K versus 31.4K, 4.4K with zipped).
  • Connect the countdown function to your div.

So your final code will be:

 <html> <head> <title>jQuery Countdown</title> <style type="text/css">@import "jquery.countdown.css";</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.countdown.js"></script> <script type="text/javascript"> $(function () { var year = new Date(); year = new Date(year.getFullYear(), 11 - 1, 20); $('#dvCountDown').countdown({until: year, format: 'HMS'}); $('#year').text(austDay.getFullYear()); }); </script> </head> <body> <h1>jQuery Countdown Basics</h1> <p>Counting down to 20 November <span id="year">2012</span>.</p> <div id="dvCountDown"></div> </body> </html>

Hope this helps!

0
source

If you want to use this script, you will need to count by date, not a custom countdown value, so that it does not get reset when the page is refreshed: http://jsfiddle.net/qWERa/1/

 //Custom countdown value starting on page load $('#CountdownbyValue').countdown({until: '+0h +0m +8s', format: 'HMS',onExpiry: liftOff,}); //Countdown by Date $('#CountdownbyDate').countdown({until: new Date(2012, 11-1, 17, 10, 10, 10), format: 'HMS',onExpiry: liftOff,}); //Time is up dialog! function liftOff() { alert('Time is up!'); }

Full code:

 <html> <head> <title>Demo</title> <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script> <script type='text/javascript' src='http://keith-wood.name/js/jquery.countdown.js'></script> <link rel="stylesheet" type="text/css" href="http://keith-wood.name/css/jquery.countdown.css"> <script type='text/javascript'> $(window).load(function(){ //Starts from time of page load $('#CountdownbyValue').countdown({until: '+0h +0m +8s', format: 'HMS',onExpiry: liftOff,}); //Counts by Date $('#CountdownbyDate').countdown({until: new Date(2012, 11-1, 17, 10, 10, 10), format: 'HMS',onExpiry: liftOff,}); //Time is up! function liftOff() { alert('Time is up!'); } }); </script> </head> <body> <div id="CountdownbyValue"></div> <div id="CountdownbyDate"></div> </body> </html>

You can also try:

 window.onbeforeunload = function() { return "Are you sure you want to quit this exam?"; }

I suggest you take a look at this cookie countdown timer .

0
source

Source: https://habr.com/ru/post/1446388/

More articles:


All Articles