Added:
Ok to add some additional details as I thought you had to keep the questions concise
but it has been downvoted for lack of research. This script was about the third or fourth
that I had tried to do what I wanted and work across the various browsers. When it did
not work I did search for resources to help and thought it may be the way the countdown is output in that IE doesn't like the Input ID so tried other ways to display it but couldn't get it to work hence the question. There is no error displayed one IE it just doesn't show anything - hence it is just a guess about the input id.
I found this Javascript code - maybe even off here and it does exactly what I want
and shows up fine in FF & Chrome. Unfortunately though it doesn't show the countdown
at all in IE and wondered if there is any way of changing the way the countdown is
output that would be compatible with IE.
Here's the code i'm using:
<script type="text/javascript">
// set minutes
var mins = 5;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
function countdown() {
setTimeout('Decrement()',1000);
}
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
secs--;
setTimeout('Decrement()',1000);
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return mins;
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return secs-Math.round(mins *60);
}
</script>
And displaying it like this:
<div id="timer">
Time Ending In: <input id="minutes" type="text"> minutes and <input id="seconds" type="text"> seconds.
</div>
<script>
countdown();
</script>
As I say the above displays fine in FF & Chrome - is there any way to get it to work in IE?
Thanks in advance.
<script type="text/javascript">
var minutes, seconds;
// set minutes
var mins = 5;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
function countdown() {
setTimeout('Decrement()',1000);
}
function Decrement() {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
secs--;
setTimeout('Decrement()',1000);
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return mins;
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return secs-Math.round(mins *60);
}
</script>
<div id="timer">
Time Ending In: <input id="minutes" type="text"> minutes and <input id="seconds" type="text"> seconds.
</div>
<script>
countdown();
</script>
<script type="text/javascript">...
var minutes, seconds;
...
Related
I currently have a JS code that takes the amount of seconds and make a live countdown, but I would like to convert the seconds to minutes and seconds, so instead of it saying: You have to wait 602 seconds, I would like to to say: You have to wait 6 minutes and 2 seconds.
This is my javascript:
function timeleft(timeleft_sec, elementID){
var timeleft = timeleft_sec;
var downloadTimer = setInterval(function(){
timeleft--;
document.getElementById(elementID).textContent = timeleft;
if(timeleft <= 0)
location.reload();
},1000);
}
This is my HTML:
You have to wait <t id="countdowntimer">602</t> seconds
<script> timeleft(602, "countdowntimer"); </script>
I have tried googling but I can only find answers where it count down from a certain date, not an amount of seconds.
602 seconds equal to 10 minutes and two seconds
So time counting is starting from 10 minutes and 2 seconds.
function timeleft(timeleft_sec, elementID) {
var timeleft = timeleft_sec;
var downloadTimer = setInterval(function () {
timeleft--;
document.getElementById(elementID).textContent = secondToMinutes(timeleft);
if (timeleft <= 0)
location.reload();
}, 1000);
}
function secondToMinutes(totalSeconds) {
let minutes;
let seconds;
minutes = Math.floor(totalSeconds / 60);
seconds = totalSeconds - minutes * 60;
return `${minutes} minutes and ${seconds} seconds`;
}
timeleft(602, "countdowntimer");
You have to wait <t id="countdowntimer">10 minutes and 2 seconds</t>
Use this function to convert the time -
function convertTime(seconds){
let minutes = 0;
while(seconds > 59) {
minutes++;
seconds -= 60;
}
return `${minutes} min ${seconds} sec`;
}
document.getElementById("time").innerText = convertTime(602);
<div id="time"></div>
I'm new to JS and I'm stuck trying to figure out what's causing my countdown timer not to countdown. The user enters the time in 00:00:00 format minutes, seconds, and milliseconds. Afterwards, I convert that format to seconds to begin the process of counting down. I think the calculations is fine, but something is not causing it not to behave as it should be. I've tested and see that the code runs in terms of entering the time and showing up in the output. I see the countdown decrementing, for both seconds and milliseconds at the same time but it should go from 10:00:00 to 09:59:99.. 09:59:98... Basically seconds won't change until milliseconds reaches zero. so 09:59:00 will be 09:58:99... Please any help is greatly appreciated. I've been going at this and been stuck.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var running = 0; //Glob variable for starting/pausing timer
function startPause(){
var time = document.getElementById("timeEntered").value; //Not sure if needed but I just have the time entered be converted to seconds.
var a = time.split(":");
var timeToSeconds = (+a[0]) * 60 + (+a[1]) * 60 + (+a[2]);
if(running == 0){ //If off, turn it on.
running = 1;
countDown();
document.getElementById("startPause").innerHTML = "Start/Stop";
}else{
running = 0;
document.getElementById("startPause").innerHTML = "Resume";
}
}
function countDown() {
var time = document.getElementById("timeEntered").value; //Take user input and convert 00:00:00 format to seconds.
var a = time.split(":");
if(!timeToSeconds)
var timeToSeconds = (+a[0]) * 60 + (+a[1]) * 60 + (+a[2]);
if(running == 1){ //When user clicks start it will calculate the minutes, seconds, and milliseconds.
var minutes = Math.floor(timeToSeconds / 60);
var seconds = timeToSeconds % 60;
var milli = timeToSeconds % 100;
if(minutes <= 9) { //Add leading zeroes to display countdown in 00:00:00 format.
minutes = "0" + minutes;
}
if(seconds <= 9) {
seconds = "0" + seconds;
}
if(milli <= 9) {
milli = "0" + milli;
}
timeToSeconds--; //Decrement the time entered.
console.log(timeToSeconds);
document.getElementById("output").innerHTML = minutes + ":" + seconds + ":" + milli //Display the time 00:00:00 format.
if(timeToSeconds !== -1){
setTimeout('countDown()',100);
}
if(timeToSeconds == 0){ //When time is 00:00:00 the message will show.
document.getElementById("output").innerHTML = "The time is over."
}
}
}
</script>
</head>
<body>
<h1>Countdown Timer</h1>
<div id="mainCont">
<input type="text" id="timeEntered">
<p>
<button id="startPause" onclick="startPause()">Start/Stop</button>
</p>
<div id="output">00:00:00</div>
</div>
</body>
</html>
There are a handful of problem here, so I will go over each one and show you the solution. The first problem is that the value of timeToSeconds is the same on each iteration. The reason for this is because you are getting the value from the same unchanging source, decrementing does nothing as the value is lost on the next function call. To fix this have your function take a parameter in which you pass the remaining seconds off after you modified it:
function countDown(timeToSeconds) {
...
timeToSeconds-=0.1; //Decrement the time entered.
if(timeToSeconds <= 0){ //When time is 00:00:00 the message will show.
document.getElementById("output").innerHTML = "The time is over."
return;
}
else if(timeToSeconds !== -1){
setTimeout(function(){countDown(timeToSeconds)},100);
}
Notice I only subtracted 0.1 because our setTimeout is called after 100 milliseconds (0.1 seconds). I've also switched around the checks, as before hand you would call the timer even if timeToSeconds was 0.
The next thing was you conversion to seconds was off, in your code here:
var timeToSeconds = (+a[0]) * 60 + (+a[1]) * 60 + (+a[2]);
Both minutes and seconds are calculated in the same way, a[1] is the seconds value and should not be multiplied. And a[2] is actually 10*milliseconds (1 seconds = 1000 milliseconds). That value should be divide by 100:
if(!timeToSeconds)
var timeToSeconds = (+a[0]) * 60 + (+a[1]) + (Math.floor(+a[2]/100));
The if-statement is a basic check if the value is true (being any number). In our case it can work as a "Does this value exist" check, since we are only dealing with positive numbers. And the following conversions should be:
var minutes = Math.floor(timeToSeconds / 60) % 60;
var seconds = Math.floor(timeToSeconds) % 60;
var milli = Math.floor(timeToSeconds*100) % 100;
For the most part, your values for minutes and seconds where correct. Although the reason why milli and seconds appeared the same was because you never converted milli to it's correct value, as such they will have the same value apart from the % applied.
Here is the final result
One last thing I would like to point out is that this timer will not be exact. As it takes some time between the computation and the setTimeout call. For a more accuracy value you will want to use Date.now() and find the different between the start time and the current timer. This question uses such a method to do so, which can be applied to the countdown timer in the same fashion.
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.
<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
// set minutes
var mins = 1;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
function countdown() {
setTimeout('Decrement()',1000);
}
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
secs--;
setTimeout('Decrement()',1000);
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return mins;
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return secs-Math.round(mins *60);
}
</script>
</head>
<body>
<div id="timer">
Time Left: 00:<input id="minutes" type="text" style="width: 20px; border: none; background-color:none; font-size: 16px; font-weight: bold;">:<input id="seconds" type="text" style="width: 26px; border: none; background-color:none; font-size: 16px; font-weight: bold;">
</div>
<script>
countdown();
</script>
In this java script code the timer get executing after the time is over and time goes in minus example (00-1:30).
So I want to stop the timer when it reaches the 00:00. And it should give alert when the time is completed or submit the page.
There are a couple of issues, the biggest being that you are testing the seconds and not seconds.value, so you are always entering the else block. However, you also don't have a condition for when it reaches zero. Here is a jsfiddle that should fix those things, http://jsfiddle.net/psQb5/.
there are two possibilities. One is to use the function setInterval instead of setTimeout. Like this.
<script type="text/javascript">
// set minutes
var mins = 1;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
var intervalVar;
function countdown() {
intervalVar = setInterval('Decrement()',1000);
}
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
secs--;
if (secs == 0) {
window.clearTimeout(intervalVar);
alert('timeout');
}
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return mins;
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return secs-Math.round(mins *60);
}
</script>
use setInterval() function instead of setTimeout().
when you want to stop timer using clearInterval() function.
for basic understanding of above function click below
w3schools.
I made this function that does two things: returns the amount of time until the next thirty minute mark, and calls the halfHour function when the timer reaches zero. If the time was 12:06:27, output would be 24:33 (mm:ss)
function checkTime() {
var time = new Date();
var mins = time.getMinutes();
mins = (60-mins) % 30;
var secs = time.getSeconds();
if (secs != 60){
secs = (60-secs) % 60;
} else {
secs = 00;
}
time = [Number(mins),Number(secs)];
if (mins == 0 && secs == 0){
halfHour();
}
return time;
}
This works, but there is a strange glitch. When the minute rolls over, it shows...
24:02
24:01
23:00
23:59
23:58
It also calls halfHour(); one minute too soon, at the false 0:00 mark in the last sequence: 1:02 1:01 0:00 0:59
How can we correct this?
Solved
Commenters dbrin and njzk2 have the solution. It's subtracting minutes and seconds from 59 instead of 60. Below is the modified working code. Sorry it's messy.
function checkTime() {
var time = new Date();
var mins = time.getMinutes();
mins = (59-mins) % 30;
var secs = time.getSeconds();
if (secs != 60){
secs = (59-secs) % 60;
} else {
secs = 00;
}
time = [Number(mins),Number(secs)];
if (mins == 0 && secs == 0){
halfHour();
}
return time;
}
Why reinvent the wheel when JavaScript has a built in setInterval(code, delay); to acheive this.
setInterval(function() {
alert("I will fire after every 2 seconds")
}, 2000);
The way you measure the time is flawed. The number of minutes and the number of seconds cannot be considered separately, as I showed in my earlier comment.
An easier way is to start by measuring the total number of seconds, and then format it:
var time = new Date();
var totalS = 60 * ((60 - time.getMinutes()) % 30) - time.getSeconds()
var secs = totalS % 60
var mins = (totalS - secs) / 60