I am just learning html and css, and want to add javascript code that I found on here. This code basicly counts down from specific minute or second.
Here is the code:
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + " minutes " + seconds + " seconds";
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 28.4,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
How could I use this code multiple times? With different time settings. All on same page ofcourse.
I have this code in countdown.js file, and it works great. But If I try to make "countdown2.js" etc, and use that, it wont work. I changed "#time" in code to "time2" etc, and did same in html code.
Sorry for bad explanation. I dont realy know javascript yet, as I havent started learning it quite yet. But I realy need countdown on my site to appear 5 times, each time with different time settings. And I can only display it once.
try this
window.onload = function () {
var timer1 = 60 * 28.4,
display1 = document.querySelector('#time1');
startTimer(timer1, display1);
var timer2 = 60 * 28.5,
display2 = document.querySelector('#time2');
startTimer(timer2, display2);
//... Continues
};
The output will be shown in tags with ids time1 and time2 respectively.
Related
I'm trying to create a timer for 30 seconds and i'm looking to do this on my own, however I seem to be stuck here:
var Starttime = ( needs to be 30 seconds )
var Timeleft = Starttime - 1
if (Timeleft === 0) {
console.log("TIMER FINISHED BEEP BOOP");
}
and through lots of research still not able to find how to declare variable as a simple 30 seconds of time, and I am aware that I would need to do the same for the 1 ( change it to 1 second). TL;DR how do I write 30 seconds
try this function using setinterval() :
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
//this is where you can modifies the time amount.
var minutes= 60 ,
display = document.querySelector('#time');
startTimer(minutes, display);
};
<body>
<div>One minute countdown <span id="time">1:00</span> minutes!</div>
</body>
I am trying to make an hta with a countdown timer. I have a timer that works fine in html but when i put the code in to an hta it gives an error. I have also tried running the html version inside of an iframe n an hta. Any help is appreciated.
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 60,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
</script>
<body>
<font color="red" size="7">
<big>
<div> <span id="time">60:00</span></div>
</big>
</font>
</body>
<body background="image1.jpg">
You need to add your scripts after your body, not before it. I can't really tell based on the code you have posted, but with the closing </script> tag it seems as though this is what you have done.
You can try changing:
display = document.querySelector('#time');
to
document.getElementById('time');
It would be more vanilla JavaScript... Also change the span to a div with inline-block.
var setTimer;
var isTimeSet = false;
if (!isTimeSet) {
setTimer = $('#hdn_timerTime').val();
isTimeSet = true;
}
initialTimer();
function initialTimer() {
var CustomMinutes = 60 * parseInt(setTimer),
display = $('#time');
startTimer(CustomMinutes, display);
}
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
$('#outputmeters').val(JSON.stringify(listItem));
// _hardMeter.UpdateMeterData();
_hardMeter.TempUpdateMeterDataConfirmation();
}
}, 1000);
}
This code I am using but for the first time it work fine than after that it time start reducing and function fire very quickly. I don't know how it happening.
Please help me out in this and if you have some better solution for it. Could you please share it?
You can use setInterval to call the same function repeatedly at set intervals until either the page is unloaded or you call clearInterval:
var timedFunction = function() {
... // Do something
}
setInterval(timedFunction, 60 * 1000);
If your timed function takes arguments which change each time, use setTimeout and call it within the function body as well
var timedFunctionWithArguments = function(iterations) {
console.debug(iterations); // Do something
setTimeout(timedFunctionWithArguments, 60 * 1000, iterations++);
}
timedFunctionWithArguments(0);
I'm having a problem with the time limit coz when the page is reload/refresh the time limit reset.
P.S: I used this time limit to my online quiz program and I'm using a header location to move to next question.
HTML
<label id="time">1:00</label>
JAVASCRIPT
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
localStorage.setItem('time_remaining_min', minutes);
localStorage.setItem('time_remaining_sec', seconds);
var minutes_left = localStorage.getItem('time_remaining_min');
var seconds_left = localStorage.getItem('time_remaining_sec');
display.text(minutes_left + ":" + seconds_left);
if (--timer < 0) {
//finished
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 60 * 5,
display = $('#time');
startTimer(fiveMinutes, display);
});
EDIT:
I tried to use local storage but didn't work
localStorage.setItem('time_remaining_min', minutes);
localStorage.setItem('time_remaining_sec', seconds);
var minutes_left = localStorage.getItem('time_remaining_min');
var seconds_left = localStorage.getItem('time_remaining_sec');
display.text(minutes_left + ":" + seconds_left);
Store timer value either in cookie or in local storage.
Not sure that you will ever be able to get around this with a page refresh. Maybe the better answer would be to not to the page reload, and use AJAX to do whatever you need to do.
You can store the time in a cookie.
//Set cookie
time_remaining = 200;
$.cookie('time_remaining', time_remaining);
//Retrieve cookie
time_remaining = $.cookie('time_remaining');
You should be able to easily implement the above into your code (Hint: whenever the timer decreases, save time remaining in a cookie).
Note that this isn't that secure, users can easily clear and modify cookies in their browser. If you're looking for something more secure you'll need to implement some backend functionality.
I'm following this example of a PHP session timer using an AJAX call to check the 'time'.
I would like to be able to display some kind of display for the user that is simply a javascript countdown timer such as:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var length = 60 * 5,
display = document.querySelector('#time');
startTimer(length, display);
};
but with var length equal to the value specified at $_SESSION['timeOut'] = SomeNumber; in the php file.
How can I set these to be exactly in sync and be able to output the countdown to the screen? Or am I able to just utilize the php timing and not necessarily create a js timer?
you can get time of now measured by seconds using php function time() and then save it as time of login in your DB .every time user refresh the page.you must send him $_SESSION['timeOut'] + ($time_of_login) - time() wich returns how much seconds to reach time out
$time_of_login from DB
so php file will look like:
var length = <? echo $_SESSION['timeOut'] + ($time_of_login) - time(); ?>