Countdown Timer that doesn't reset when you refresh the page? - javascript

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! :)

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().

Include the jQuery library in the head section of your page.
Download and include the jQuery Countdown CSS and JavaScript in the head section of your page.
Alternately, you can use the minimised version jquery.countdown.min.js (13.5K vs 31.4K, 4.4K when zipped).
Connect the countdown functionality to your divs.
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!

If you want to use that script then you'll have to count by date and not a custom countdown value in order for it not to get reset on page refresh: 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>
Your can also try:
window.onbeforeunload = function() {
return "Are you sure you want to quit this exam?";
}
I suggest you take a look at this Countdown timer with cookies

Related

How do I code date / time into a WIX site embed feature?

I am very new to this and have worked some things out but this one has got me. I am trying to embed a code into a WIX site (HTML then Javascript) so text appears that is dependant on the day (ddd) and hour. It is for a local radio station, so for example if it is Monday at 14:00 to 16:00 it's the local news, so the box would say "Live Now - Local News".
I have tried all the codes I can find on here but nothing works. Is anyone able to help me please?
Thank you in advance
This is the code I have so far that doesn't work
<script>
var hour = getHours()
var day = getDay()
document.onload=function timechange() {
if day==1 && hour>17 && hour<18
</script>
<body>
<h1>Phatsoundz Radio Presents : </h1>
<script>
A simple example that will display the Live Now - Local News block if it is Tuesday and the hour is between 1200 & 1800 (6pm):
<html>
<body>
<h1>Phatsoundz Radio Presents : </h1>
<div id="liveNowLocalNews" style="display:none">Live Now - Local News</div>
</body>
<script>
var today = new Date();
var hour = today.getHours();
var day = today.getDay();
if ((day === 2) && (hour > 12) && (hour < 18)) {
document.getElementById('liveNowLocalNews').style.display = "block";
}
</script>
</html>

My javascript application I created only works once and then can't be replicated unless I delete the file

I hope I'm not asking a "duhish" question with what I'm asking but I do need some clarification on what's going on in the "background". I created a simple clock exercise for myself this weekend. It works, it shows up on my browser and shows the current time just like I want it to. That said, when I try to create it again with a different HTML file and Javascript file.... it doesn't work again. It shows up in the original file I created but on the same file that has the same code... It doesn't show the timer.
Here's the HTML I wrote down in the original
<html>
<head>
<title>Kenneth's clock</title>
<meta charset="UTF-8">
<link rel='stylesheet' type='text/css' href=''>
<script src='clock.js'></script>
</head>
<body>
<p id ='clock'></p>
</body>
</html>
Then the Javascript.
function getTime() {
var now = new Date();
var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
setTimeout('getTime()', 1000);
function checkTime(time) {
if(time<10) {
time = "0" + time;
}
return time;
}
}
window.onload = function() {
getTime();
}
Imagine if I recreated that entire thing again and I changed the id on the new HTML file to digitalclock. I make the new code in javascript to getElementById('digitalclock') and viola.. new exercise to learn basic javascript....
For some reason, it doesn't work. What's going on in the backend to make it so that I can't get it to work?

countdown.js setting it to midday

I recently discovered this (countdown.js) beautiful script. But it is not documented. So I have huge difficulty in trying to understand its algorithm.
My Goal
I am trying to set a counter just like the one used by amazon for delivery time left.
So it should countdown until midday and reset itself at midday for the next midday. And obviously it also changes the text showed just like amazon.
EXAMPLE
June 15, 8.00 AM; the timer should be like this:
Want it tomorrow, June 16? Order within 4 hrs 0 mins and choose
One-Day Shipping at checkout.
June 15, 1.00 PM; the timer should be like this:
Want it on June 17? Order within 23 hrs 0 mins and choose One-Day
Shipping at checkout.
I hope I'm clear enough. Thank you in advance.
Here is an example that I took from a site but it ends at midnight:
<html>
<head>
</head>
<body>
<h4 id="midnight-countdown"></h4>
<script src="https://smalldo.gs/js/countdown.min.js"></script>
<script>
var clock1 = document.getElementById("midnight-countdown"),
tdy = new Date();
clock1.innerHTML = countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate() + 1)).toString();
setInterval(function() {
clock1.innerHTML = countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate() + 1)).toString();
}, 1000);
</script>
</body>
</html>
Please include your full time! Not just the date. Syntax here:
var timespan = countdown(start|callback, end|callback, units, max, digits);
In your code:
<h4 id="midnight-countdown"></h4>
</blockquote>
<p>Here is how to do a custom live countdown on your page using pure javascript (no jQuery needed).</p>
<script src="https://smalldo.gs/js/countdown.min.js"></script>
<script>
var clock1 = document.getElementById("midnight-countdown")
, tdy = new Date();
clock1.innerHTML = countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate() + 1, tdy.getHours(), tdy.getMinutes()) ).toString();
setInterval(function(){
clock1.innerHTML = countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate() + 1, tdy.getHours(), tdy.getMinutes()) ).toString();
}, 1000);
</script>

How to get TimeZone wise local time using moment.js

i am working with two js library to get browser timezone id and browser local time
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.4/jstz.min.js"></script>
<script src="Scripts/moment-timezone.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var tz = jstz.determine(); // Determines the time zone of the browser client
alert(tz.name());
alert(moment.tz(tz.name()).format());
});
</script>
this below code return perfect timezone id
var tz = jstz.determine(); // Determines the time zone of the browser client
alert(tz.name());
but this code is not working alert(moment.tz(tz.name()).format()); not giving user local time.
am i missing something in code? do i need to add any momentjs related other file ?
please guide me. i want to get user local time using moment.js. thanks
UPDATE Working Version
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jstz.min.js"></script>
<script src="Scripts/moment.min.js" type="text/javascript"></script>
<script src="Scripts/moment-timezone-with-data-2010-2020.min.js" type="text/javascript"></script>
</head>
<body>
<form method="post" action="WebForm1.aspx" id="form1">
<div>
<script type="text/javascript">
$(document).ready(function () {
var tz = jstz.determine(); // Determines the time zone of the browser client
alert(tz.name());
var format = 'YYYY/MM/DD HH:mm:ss ZZ';
alert(moment.tz('Europe/London').format(format));
alert(moment.tz(tz.name()).format(format));
});
</script>
</div>
</form>
</body>
</html>
My solution of this case (this is part of the page code):
function toLocalTime(time) {
if (time <= 0)
return '';
var m = moment.tz(time, 'America/Chicago'); //CDT
var tz = jstz.determine(); // Determines the time zone of the browser client
m.tz(tz.name()); // Convert CDT to local time
return m.format('HH:mm:ss');
}
<script src="js/jstz.min.js"></script>
<script src="js/moment.js"></script>
<script src="js/moment-timezone-with-data-2010-2020.js"></script>
...........
<script th:inline="javascript">document.write(toLocalTime(<<TIME IN MILLISECONDS HERE>>));</script>

Load script only for returning USER - once!

I need a script which will load another script only for returning user!
The script which will need to load this script
<a href="http://www.w3.org/" >W3C</a>
I have a script which loads a popup only for new customers:
<SCRIPT LANGUAGE="JavaScript">
<!-- Script courtesy of http://www.web-source.net - Your Guide to Professional Web Site Design and Development
function GetCookie(name) {
var arg=name+"=";
var alen=arg.length;
var clen=document.cookie.length;
var i=0;
while (i<clen) {
var j=i+alen;
if (document.cookie.substring(i,j)==arg)
return "here";
i=document.cookie.indexOf(" ",i)+1;
if (i==0) break;
}
return null;
}
var visit=GetCookie("COOKIE1");
if (visit==null){
var expire=new Date();
window.name = "thiswin";
newwin=open("yourpagename.html", "dispwin",
"width=450,height=455,scrollbars=yes,menubar=no");
expire=new Date(expire.getTime()+7776000000);
document.cookie="COOKIE1=here; expires="+expire;
}
// -->
</SCRIPT>
Yet I need the script only to load once for the returning customers every 1 day
thanks again
7776000000 equals 90 days.
Make the cookie expire every 24 hours [86400000] and you get once a day.

Categories

Resources