Countdown Timer that doesnt reset when you refresh the page?

2024/2/27 7:29:05

I Need to have a code for the timer that doesn't reset the countdown timer even you refresh the page.

I saw sample code at keith wood plug in, but don't know how to implement this in my html file. here's the link :

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

I hope somebody could help me! thanks! :)

I just need Hour, Minutes and Seconds to show. And after the Time given, there is a prompt box that will show "Time is up! " . This one is for the online exam we are developing. Thank you so Much! :)

Answer

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

Also bind to the onbeforeunload event and save the new currentTime back into localStorage. This will give you the persisted countdown you are seeking.

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);
}

Note that I would've made a snippet however stackoverflow and other online IDE's are complaining about security breaches. Note that this is perfectly valid and does not breach any security. Save it as a .js and run.

To start the "countdown" again, invoke localStorage.clear().

http://en.ppmy.cn/q/41949.html

Related Q&A

setTimeout function doesnt stop execution?

I have stumbled upon a problem with setTimeout.$current.removeClass(class2); setTimeout(function(){$current.css(display, none)},1000); if(!$current.is(# + id)){$(# + id).css(display,block);setTimeout(f…

How can I add a button over a video in HTML? [duplicate]

This question already has answers here:How can I position an icon over an image or video?(4 answers)Closed 7 months ago.This is my first time working with HTML other than basic websites.I have a video…

Whats the difference between window.x and x?

Lets say, "x" is a variable that never defined, so it should be undefined. In the following scenario: 1)if(x){//do something} //ReferenceError: x is not defined2)if(window.x){//do something} …

How can I use Multi Media Uploader in the WordPress Plugins?

I try to add the multi uploading options in the wordpress plugins I repeated this code in the plugin(two times) only changing the id name. <script language="JavaScript"> jQuery(document…

Object has no method apply

I am creating a few DOM elements dynamically like,var anchorElement = jQuery(<a />,{text:property.text}); var liElement = jQuery(<li />,{"class":"navlink_"+i,id:"na…

What are the risks of letting users upload and run Javascript

If you have say an HTML5 games arcade, that allows users to upload a script that runs a game with HTML5 and Javascript, assuming you have no filters on their input (apart from only allowing JS and HTML…

How to hide value in Chart JS bar

i try to hide the value inside the bars of my bar chart. The reason for that is that i placed the value on top of the bars, and the value should not be shown twice. I tried different options to hide th…

Detect the error message in the input field

How can I show the message if the user types a restricted symbol? For example, if the user types * in the input field, the error message can show A filename cannot contain any of the following charact…

JQuery total sum of multiple html table cells with specific class

I have a HTML table with many rows, in each row is a cell with .sum class, how can I calculate total sum of all cells that have .sum class//total sum of td with .sum class<table id="mytable&quo…

jQuery/JavaScript Library for avatar creation? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site …