I have created this one in JavaScript! It is a timer counting down time from 14:59 to 00:00 minutes. What I need to do is prevent seconds from going into one digit.
For example:
14:05 - allowed and needed to achieve
14:5 - not allowed and I need to get rid of this situation.
<html>
<head>
<script type="text/javascript">
var interval;
var minutes = 14;
var seconds = 05;
window.onload = function () {
countdown('atskaite');
}
function countdown(element) {
interval = setInterval(function () {
var el = document.getElementById(element);
if (seconds == 0) {
if (minutes == 0) {
clearInterval(interval);
return;
} else {
minutes--;
seconds = 60;
}
}
el.innerHTML = minutes + ':' + seconds;
seconds--;
}, 1000);
}
</script>
</head>
<body>
<div id="atskaite"></div>
</body>
</html>
Any help, please?
Quick and easy:
minutes + ':' + ("0"+seconds).slice(-2);
Simply add a check before you assign el.innerHTML, like so:
if (seconds < 10) seconds = '0' + seconds;
Related
I want to make a count of 2 minutes, but I want to give you click to the button "Start", so far, and managed to make it work, but I have an error in the minutes does not run as well back but that appears NaN:seconds.
I show them the code that i am working on.
var timeoutHandle;
function countdown(minutes) {
var seconds = 60;
var mins = minutes
function tick() {
var counter = document.getElementById("timer");
var current_minutes = mins-1
seconds--;
counter.innerHTML =
current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
if( seconds > 0 ) {
timeoutHandle=setTimeout(tick, 1000);
} else {
if(mins > 1){
// countdown(mins-1); never reach “00″ issue solved:Contributed by Victor Streithorst
setTimeout(function () { countdown(mins - 1); }, 1000);
}
document.getElementById("timer").innerHTML = "Finished"
}
}
tick();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="tempo-completo">
<div id="timer">2:00</div>
<button onclick="countdown()">INICIAR</button>
</div>
You are not passing in the number of minutes to the countdown() function.
var timeoutHandle;
function countdown(minutes) {
var seconds = 60;
var mins = minutes
function tick() {
var counter = document.getElementById("timer");
var current_minutes = mins-1
seconds--;
counter.innerHTML =
current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
if( seconds > 0 ) {
timeoutHandle=setTimeout(tick, 1000);
} else {
if(mins > 1){
// countdown(mins-1); never reach “00″ issue solved:Contributed by Victor Streithorst
setTimeout(function () { countdown(mins - 1); }, 1000);
}
document.getElementById("timer").innerHTML = "Finished"
}
}
tick();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="tempo-completo">
<div id="timer">2:00</div>
<button onclick="countdown(2)">INICIAR</button>
</div>
Jeremy Harris' answer is working perfectly fine, but i would like to propose another one.
Don't use setTimeout to make an interval function, use setInterval. Using setTimeout with a recursive loop is overall less precise
With that in mind i've tweek your code to incorporate this idea.
var timeoutHandle;
function countdown(minutes) {
var seconds = 60;
var mins = minutes
var counter = document.getElementById("timer");
var current_minutes = mins-1
// we create an interval variable to clear it later
// we also use an arrow function to have access to variable
// outside of the current function's scope.
let interval = setInterval(() => {
seconds--;
counter.innerHTML =
current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
// our seconds have run out
if(seconds <= 0) {
// our minutes have run out
if(current_minutes <= 0) {
// we display the finished message and clear the interval so it stops.
counter.innerHTML = "Finished"
clearInterval(interval);
} else {
// otherwise, we decrement the number of minutes and change the seconds back to 60.
current_minutes--;
seconds = 60;
}
}
// we set our interval to a second.
}, 1000);
}
<div class="tempo-completo">
<div id="timer">2:00</div>
<button onclick="countdown(2)">INICIAR</button>
</div>
I've been going about this for a while. Whenever I click "start" more than once, it adds up. If you notice, if I click "start" twice, the counting on my clock starts to act funny :
var h1 = document.getElementsByTagName('h1')[0],
start = document.getElementById('start'),
stop = document.getElementById('stop'),
clear = document.getElementById('clear'),
seconds = 0,
minutes = 0,
GG;
function add() {
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
}
}
h1.textContent =
(minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") +
":" + (seconds > 9 ? seconds : "0" + seconds);
timer();
}
function timer() {
GG = setTimeout(add, 1000);
}
timer();
start.onclick = timer;
stop.onclick = function() {
clearTimeout(GG);
}
clear.onclick = function() {
h1.textContent = "00:00";
seconds = 0;
minutes = 0;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="time-container">
<h1><time>00:00</time></h1>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="clear">clear</button>
</div>
</body>
</html>
I have to press STOP , N times as many as START.
If I want to fix this, to make any succeeding presses to START will not matter. Only one counting execution will be running at any time.
Add a variable to check click on start
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="time-container">
<h1><time>00:00</time></h1>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="clear">clear</button>
</div>
</body>
<script>
var h1 = document.getElementsByTagName('h1')[0]
, start = document.getElementById('start')
, stop = document.getElementById('stop')
, clear = document.getElementById('clear')
, seconds = 0
, minutes = 0
, GG
, flag = true;
function add() {
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
}
}
h1.textContent = (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
timer();
}
function timer() {
GG = setTimeout(add, 1000);
}
start.onclick = function () {
if(flag)
{
timer();
flag = false;
}
}
stop.onclick = function () {
clearTimeout(GG);
flag = true;
}
clear.onclick = function () {
h1.textContent = "00:00";
seconds = 0;
minutes = 0;
}
</script>
</html>
I've run the code multiple times trying to fix any error I have found in the code but it just doesn't seem to work.
I'm using the setInterval() loop. The function does not even run once. What could the problem be?
function stopWatch () {
var hours = Number(document.getElementById('hours').innerHTML);
var minutes = Number(document.getElementById('minutes').innerHTML);
var seconds = Number(document.getElementById('seconds').innerHTML);
if (seconds<60) {
seconds++
} else {
seconds = 0;
minutes++
}
if (minutes == 60) {
minutes = 0;
hours++
}
if (seconds.length==2) {
document.getElementById('seconds').innerHTML = seconds;
} else {
document.getElementById('seconds').innerHTML = '0' + seconds;
}
if (minutes.length==2) {
document.getElementById('minutes').innerHTML = minutes;
} else {
document.getElementById('minutes').innerHTML = '0' + minutes;
}
if (hours.length==2) {
document.getElementById('hours').innerHTML = hours;
}
if (hours.length==1) {
document.getElementById('hours').innerHTML = '0' + hours;
}
}
setInterval(stopWatch,1000)
<html>
<head></head>
<body>
<p>
<span id='hours'>00</span>:<span id='minutes'>00</span>:<span id='seconds'>00</span>
</p>
</body>
</html>
Your code only runs once. You need to use a loop of some description.
There are many ways to do this. A simple example would be to use setInterval to call the inners of your function every second.
You also have an error in your logic. You shouldn't be checking the length of the number (seconds.length==2). You should check wether the number is greater than 9 (seconds > 9):
function stopWatch() {
setInterval(function() {
var hours = Number(document.getElementById('hours').innerHTML);
var minutes = Number(document.getElementById('minutes').innerHTML);
var seconds = Number(document.getElementById('seconds').innerHTML);
if (seconds < 60) {
seconds++
} else {
seconds = 0;
minutes++
}
if (minutes == 60) {
minutes = 0;
hours++
}
if (seconds > 9) {
document.getElementById('seconds').innerHTML = seconds;
} else {
document.getElementById('seconds').innerHTML = '0' + seconds;
}
if (minutes > 9) {
document.getElementById('minutes').innerHTML = minutes;
} else {
document.getElementById('minutes').innerHTML = '0' + minutes;
}
if (hours > 9) {
document.getElementById('hours').innerHTML = hours;
} else {
document.getElementById('hours').innerHTML = '0' + hours;
}
}, 1000);
}
stopWatch()
<html>
<head></head>
<body>
<p>
<span id='hours'>00</span>:<span id='minutes'>00</span>:<span id='seconds'>00</span>
</p>
</body>
</html>
You mean why the stopwatch is not running?
You should wrap it in a setInteraval for it to update every second:
setInterval(function() {
stopWatch()
},1000);
i keep getting error said: Cannot set property 'innerHTML' of null.
i try to change innerHTML ->innerText. still not working.
what am i missing here???
function countdown(minutes) {
var seconds = 60;
var mins = minutes
function tick() {
var counter = document.getElementById("timer");
var current_minutes = mins-1;
seconds--;
counter.innerHTML =
current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
if( seconds > 0 ) {
setTimeout(tick, 1000);
} else {
if(mins > 1){
// countdown(mins-1); never reach “00″ issue solved:Contributed by
Victor Streithorst
setTimeout(function () { countdown(mins - 1); }, 1000);
}
}
}
tick();
}
countdown(3);
html
<div id="timer"></div>
You're calling countdown(), which calls tick(), which calls document.getElementById("timer"), before that element has even been parsed.
Try doing it like this:
<div id="timer"></div>
<script type="text/javascript">
function countdown(minutes) {
var seconds = 60;
var mins = minutes
function tick() {
var counter = document.getElementById("timer");
var current_minutes = mins-1
seconds--;
counter.innerHTML = current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
if( seconds > 0 ) {
setTimeout(tick, 1000);
} else {
if(mins > 1) {
// countdown(mins-1);
setTimeout(function () { countdown(mins - 1); }, 1000);
}
}
}
tick();
}
countdown(3);
</script>
In this case, order matters. You want to make sure the document has encountered that element before accessing it via the DOM.
I am trying to create a timeout on my webpage by counting down from 1min to 0 seconds, then displaying a message. If the user moves the mouse (i.e is still active on the page) the timer gets reset. I cant get the reset function to reset my values. What it is doing is counting down the time faster than before and getting stuck in an unbreakable cycle.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var mins = 1;
var secs = 0;
var timer;
function start()
{
timer = setInterval("update()", 1000);
}
function reset() {
var mins = 1
var secs = 0;
var timer;
start();
}
function update()
{
var timeField = document.getElementById("time");
if (secs == 0)
{
if (mins == 0)
{
timeField.innerHTML = "Time's up!";
clearInterval(timer);
alert("Time's up");
return;
}
mins--;
secs = 59;
}
else
{
secs--;
}
if (secs < 10)
{
timeField.innerHTML = 'Time left: ' + mins + ':0' + secs;
}
else
{
timeField.innerHTML = 'Time left: ' + mins + ':' + secs;
}
}
</script>
</head>
<body onload="start();" onmousemove="reset();">
<div id="time" >
</div>
</body>
</html>
How can I get it to reset the countdown and start again? I am new to javascript so please be patient.
Modify your reset function,
function reset() {
mins = 1;
secs = 0;
window.clearInterval(timer);
start();
}
Declare timer outside of all functions.