i am just trying to do time counter. when 30 seconds will be over the alert box from another function will popup. i made the code and it's worked for some times too. but now it's not calling the function it only call when i refresh the page.
<html>
<head>
<title>Timer</title>
</head>
<body>
<form name="counter"><input type="text" size="8" name="d2"></form>
<script>
var milisec = 0
var seconds = localStorage.seconds || 30;
document.counter.d2.value = seconds;
function display() {
if (milisec <= 0) {
milisec = 9
seconds -= 1
}
if (seconds <= -1) {
milisec = 0
seconds += 1
}
else{
milisec -= 1
}
if(seconds <= 0 && milisec < 1)
{
console.log("done");
localStorage.clear();
anotherFunction();
}
else
{
localStorage.seconds = seconds;
}
document.counter.d2.value = seconds + "." + milisec;
if (seconds > 0 || (seconds == 0 && milisec > 0)) {
setTimeout(display, 100);
}
else
{
}
}
display();
function anotherFunction()
{
alert("reached");
}
</script>
</body>
</html>
`
here is the code.
I think this ones helps you.
if(seconds<=0)
{
throw '';
}
put this function before the function.
Related
I'm trying to get this to look nice. This countdown is meant to go negative, once it does I'd like the skull and crossbones to be visible, and I'd want it to flash. I'm using this Javascript functionality...
var img = document.getElementById('Image1');
var interval = window.setInterval(function() {
if (img.display == 'hidden'){
img.style.visibility = 'visible';
} else {
img.style.visibility = 'hidden';
}
}, 1000);
Once it's flashing, how do I get it to overlap the countdown span?
http://jsfiddle.net/2Lufxs2t/3/
After var img = document.getElementById('Image1'); add document.getElementById('countdown').style.display='none'; to hide your counter.
Remove your second interval: var interval = window.setInterval(function(){. Just leave the if that toggles the visibility as it is. The problem is that secondPassed() is running every second, and then your second interval is running again every second. So every second your inner interval runs twice and toggles itself.
JSFiddle This worked great for me.
<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
var seconds = 10;
function stopTimer() {
clearTimeout(countdownTimer)
}
function floor(x) {
return x | 0;
}
function pad(n) {
if (n < 0) {
n = -n;
}
if (n < 10) {
return '0' + n.toString();
}
return n.toString();
}
function secondPassed() {
var minutes = pad(floor(seconds / 60));
if (seconds < 0) {
minutes = '-' + minutes;
}
var remainingSeconds = pad(seconds % 60);
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds > 0) {
seconds--;
if (seconds > 8) {
document.body.style.backgroundColor = "green";
} else if (seconds == 5) {
document.body.style.backgroundColor = "yellow";
} else if (minutes == 0 & seconds == 0) {
document.body.style.backgroundColor = "red";
if (seconds%2 == 0) {
document.getElementById('skull').style.display="none";
}
if (seconds%2 != 0) {
document.getElementById('skull').style.display="block";
}
}
} else {
if (seconds%2 == 0) {
document.getElementById('skull').style.display="block";
}
if (seconds%2 != 0) {
document.getElementById('skull').style.display="none";
}
seconds--;
}
}
</script>
</head>
<body>
<img id="skull" src="http://s15.postimg.org/es5w3xpob/skull.gif"style="position:absolute; z-index: -1;display:none;">
<div style=" z-index:10;">
<p align ="center">
<span id="countdown" style="color:black; font-size: 450px; font-weight: bold;" ></span>
</br>
<button onclick="countdownTimer = setInterval('secondPassed()', 1000)">Start</button>
<button onclick="stopTimer()">Stop</button>
</p>
</div>
</body>
</html>
http://jsfiddle.net/vvccvvcc/mu45bptk/
how do I pause the timer? I want it to stop when it gets to 5 seconds
I tried this as seen in the fiddle
else {
isWaiting = true;
seconds--;
if (seconds == 5) {
seconds=seconds;}
}
does not work
The timer is initialized by setInterval(GameTimer, 1000);
if (seconds == 5) {
clearInterval(countdownTimer);
} else {
seconds--;
}
You will need to clear the interval in order to stop calling the function. Alternatively if you don't want to clear the interval you can say
if (seconds > 5) {
seconds--;
}
The way you've written it, second is decreased regardless of the condition (since it's before the if statement) and therefore, second = second becomes irrelevant.
Is this what you are looking for?
Fiddle: http://jsfiddle.net/mu45bptk/2/
var isWaiting = false;
var isRunning = false;
var seconds = 10;
var countdownTimer;
var finalCountdown = false;
function GameTimer() {
if (isWaiting) {
return;
}
var minutes = Math.round((seconds - 30) / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('waiting_time').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
if (finalCountdown) {
clearInterval(countdownTimer);
} else {
finalCountdown = true;
}
} else {
if (seconds == 5) {
isWaiting = true;
} else {
seconds--;
}
}
}
countdownTimer = setInterval(GameTimer, 1000);
You need to set isWaiting only if seconds == 5 and then check isWaiting on every run of GameTimer()
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 have this code for a timer, i am trying to get it to stop at 0:0 but it keeps going into negative numbers. any ideas to fix this would be a help.
<html>
<head>
<script>
function startTimer(m,s)
{
document.getElementById('timer').innerHTML= m+":"+s;
if (s==0)
{
if (m == 0)
{
clearTimeout(t);
}
else if (m != 0)
{
m = m-1;
s = 60;
}
}
s = s-1;
t=setTimeout(function(){startTimer(m,s)},1000);
}
</script>
</head>
<body>
<button onClick = "startTimer(0,5)">Start</button>
<p id = "timer">00:00</p>
</body>
</html>
You're always firing a new timer at the end of startTimer, even when you reach zero. The quick fix is to add a return; after instead of clearTimeout(t);.
you can make the timeout function external and call it when time is more than 0:0 like this:
function startTimer(m,s)
{
document.getElementById('timer').innerHTML= m+":"+s;
if (s==0)
{
if (m == 0)
{
alert('done');
}
else if (m != 0)
{
m = m-1;
s = 60;
t();
}
}
s = s-1;
t();
function t(){setTimeout(function(){startTimer(m,s)},1000)};
}
or shorthand version:
function startTimer(m,s)
{
document.getElementById('timer').innerHTML= m+":"+s;
(s == 0) ? (m == 0 ? alert('done') : (m--, s = 60, t())) : (s--, t());
function t(){ setTimeout(function(){startTimer(m,s)},1000)};
}
jsfiddle
Just a comment—the function can be a lot slimmer:
function pad(n) {
return (n<10? '0':'') + n;
}
function startTimer(m,s) {
document.getElementById('timer').innerHTML = pad(m) + ":" + pad(s);
s -= s? 1 : m-- && -59;
if (m != -1)
setTimeout(function(){startTimer(m,s)},1000);
}
It will slowly drift as setTimeout doesn't run at exactly the time specified so it should use a date object to adjust the lag to the next full second.
its an old code that ive written:
function CountDown(TimeToCount){
if(First)
{
var startDatum=new Date();
First = false;
date.a = startDatum;
bye = TimeToCount-200;
}
if(bye > 0 && CDown){
var zielDatum=new Date();
bye =Math.abs(Math.floor(( ((zielDatum-(TimeToCount-200)-date.a)/1000) - 0.1)*10)/10);
if ( bye * 10 % 10 ==0)
$(".CountDown").html(bye+".0");
else
$(".CountDown").html(bye);
setTimeout(function(){CountDown(TimeToCount)},20);
}
else
{ $(".CountDown").html("0.0");
}
}`
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.