I have created a countdown timer. However, it does not count down properly. Instead of counting down per second or minutes, it counts down by hundreths and does not update properly. I created another counting up timer using the same code but it works properly counting up per increment - it counts up minutes everytime 60 seconds have passed. I'm wondering how I can make this timer count down properly.
JSBin:
http://jsbin.com/funiveremi/6/edit
Updated* Adding in the 60 Seconds Counter:
http://jsbin.com/hohusuvube/2/edit
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>User Input Timer</title>
<script type="text/javascript" src="part2.js"></script>
</head>
<body>
<h1><div id="time">00:00:00</div></h1>
<div id="result"></div>
<button id="start" onclick ="startClock();" >Start</button>
<button id="stop" onclick="stopTimer();">Stop</button>
<button id="clear" onclick="resetTimer();">Reset</button>
</body>
</html>
JAVASCIPT
hundreths = 10;
seconds = 15;
minutes = 20;
document.getElementById("time").innerHTML = minutes + ":" + seconds + ":" + hundreths;
var currentTime = document.getElementById('time');
var t;
function startClock() {
function add() {
hundreths--;
if (hundreths < 0) {
hundreths = 0;
seconds--;
if (seconds < 0) {
seconds = 0;
minutes--;
}
if(minutes < 0) {
seconds= 0;
minutes= 0;
stopTimer();
}
}
if (hundreths > 9 && seconds < 9) {
currentTime.innerHTML = "0" + minutes + ":" + "0" + seconds + ":" + hundreths;
}
else if ((seconds > 9 ) && (hundreths < 9)) {
currentTime.innerHTML = "0" + minutes + ":" + seconds + ":" + "0" + hundreths;
}
else if((seconds > 9) && (hundreths > 9)) {
currentTime.innerHTML = "0" + minutes + ":" + seconds + ":" + hundreths;
}
else if ((minutes > 9) && (seconds < 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
}
else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + "0" + hundreths;
}
else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + hundreths;
}
else {
currentTime.innerHTML = "0" + minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
}
timer();
} // end function add();
function timer() {
t = setTimeout(add, 100);
}
timer();
} // end function startClock();
function stopTimer() {
document.getElementById("result").innerHTML = "<p>" + ("Your time is: " + minutes + " minutes, " + seconds + " seconds, " + "and " + hundreths + " hundreths") + "</p>";
clearTimeout(t);
} // end function stopTimer();
function resetTimer() {
clearTimeout(t);
currentTime.innerHTML = "00:00:00";
} // end function resetTimer();
Just use the Jquery Countdown plugin.
http://hilios.github.io/jQuery.countdown/
The implementation will be easier. something like this.
<div id="getting-started"></div>
<script type="text/javascript">
$("#getting-started").countdown("2016/01/01", function(event) {
$(this).text(event.strftime('%D days %H:%M:%S'));
});
</script>
This will work, you had the logic about when to set seconds incorrect so it was constantly resetting itself. One of the best things to do in these kinds of cases if you're stuck is to simply try changing the if statements, remove some of them and play with different values. It can help teach you what's really happening in a system, and give you a clue as to what is wrong. Another tip is just to read the code aloud to yourself in normal English. As you read it aloud you will often realize you're mistakes by hearing yourself say the logic.
hundreths--;
if (hundreths < 0) {
hundreths = 10;
seconds--;
if (seconds < 0) {
seconds = 59;
minutes--;
}
if(minutes < 0) {
seconds= 0;
minutes= 0;
stopTimer();
}
}
Related
I have developed a countdown timer function.
This function works fine. But the problem is it goes through the minus value too. So I want to stop the counting when its come to the 00:00:00.
How can I do this.please help me?
Javascript
function initCountdown() {
if( seconds == 0 && minutes == 0 && hours == 0 ){
clearInterval( interval ); }
if (seconds < 10) {
outputElement.innerHTML = hours + ": " + minutes + ": " + "0" + seconds + " ";
} else {
outputElement.innerHTML = hours + ": " + minutes + ": " + seconds + " "; }}
function count(){
time[2]--;
if (time[2] == -1) {
time[1]--;
time[2] = 59
}
if (time[1] == -1) {
time[0]--;
time[1] = 59
}
print();
}
var outputElement = document.getElementById('demo');
var time = document.getElementById("picker-dates1").value;
time = time.split(':'); }
HTML
<input type = "text" id = "picker-dates1"/>
<P id="demo"></p>
Replace print(); with if (time[0] >= 0) { print(); }
htmlTable.Append("<script> var seconds = " + ttime + "; function secondPassed() { var minutes = Math.round((seconds - 30) / 60); var remainingSeconds = seconds % 60; if (remainingSeconds < 10) { remainingSeconds = '0' + remainingSeconds; } document.getElementById('countdown').innerHTML = 'Time Left :- ' + minutes + ':' + remainingSeconds; if (seconds == 0) { clearInterval(countdownTimer);document.getElementById('Button1').click(); } else { seconds--; } } var countdownTimer = setInterval('secondPassed()', 1000);</script>");
PlaceHolder1.Controls.Add(new Literal { Text = htmlTable.ToString() });
The above code is used to create a timer in .aspx.cs file. It's an online exam application.
I have this onclick="startTimer({{ $index }},{{ product.time }})" but for obviously reason the databindings doesn't render, so I have to use ng-clickfor rendering the values but ng-clickno working with my jQuery Script
<script>
function startTimer(id, time) {
$("#" + id).next("div").removeClass("claimActive");
$("#" + id).next("div").addClass("claimWait");
$("#" + id).removeClass("timerActive");
$("#" + id).addClass("timerWait");
$("#" + id).next("div").children("a").text("WAIT");
if (time <= 60) {
if (time < 10) $("#" + id).children("#m").text("0" + time);
else $("#" + id).children("#m").text(time);
$("#" + id).children("#s").text("30");
} else {
if (time < 600) $("#" + id).children("#h").text("0" + time / 60);
else $("#" + id).children("#h").text(time / 60);
$("#" + id).children("#m").text("00");
$("#" + id).children("#s").text("30");
}
}
function checkTimers() {
$(".timer").each(function() {
seconds = parseInt($(this).children("#h").text()) * 3600 + parseInt($(this).children("#m").text()) * 60 + parseInt($(this).children("#s").text());
if (seconds > 0) {
hours = parseInt($(this).children("#h").text());
min = parseInt($(this).children("#m").text());
sec = parseInt($(this).children("#s").text());
if (sec > 0) {
if (sec > 10) $(this).children("#s").text(sec - 1);
else $(this).children("#s").text("0" + (sec - 1));
} else if (min > 0) {
if (min > 10) $(this).children("#m").text(min - 1);
else $(this).children("#m").text("0" + (min - 1));
$(this).children("#s").text(59);
} else if (hours > 0) {
if (hours > 10) $(this).children("#h").text(hours - 1);
else $(this).children("#h").text("0" + (hours - 1));
$(this).children("#m").text(59);
$(this).children("#s").text(59);
}
} else {
$(this).next("div").removeClass("claimWait");
$(this).next("div").addClass("claimActive");
$(this).addClass("timerActive");
$(this).removeClass("timerWait");
$(this).next("div").children("a").text("CLAIM");
}
});
}
$(document).ready(function() {
setInterval(checkTimers, 1000);
});
</script>
So I Need this in AngularJS Directives, but I Don't have any idea how to do that all that I already add to my Controller is something like
$scope.startTimer = function($index,productTime) {};
I have one timer and i want it in two different places in my website. But only one is working at the time.
Here is Script + first timer below it.
<script>
var interval;
var minutes = 8;
var seconds = 41;
window.onload = function() {
countdown('countdown');
myFunction();
myFunctiontoo();
}
function countdown(element) {
interval = setInterval(function() {
var el = document.getElementById("timerx");
if(seconds == 0) {
if(minutes == 0) {
el.innerHTML = "Free trial bonus has expired!";
clearInterval(interval);
return;
} else {
minutes--;
seconds = 60;
}
}
if(minutes > 0) {
var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
} else {
var minute_text = '';
}
var second_text = seconds > 1 ? 'seconds' : 'second';
el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
seconds--;
}, 1000);
}
</script>
<div class="countdown"><span style="color:#EA0423;">Free Trial bonus ends in </span><span id="timerx" style="font-weight:bold;">8 minutes and 42 seconds</span>.
</div>
A bit lower in my HTML code i have another timer.
<span style="color:#FFF1D6;">Free Trial bonus ends in </span><span id="timerx" style="font-weight:bold;">8 minutes and 42 seconds</span>.
The second timer unfortunately is not working.
Method getElementById other than getElementsByClassName return only one DOM element.
Method getElementsByClassName returns an array of elements so you can get them using an index
Here is working example: PLUNKER
You can us getElementsByClassName and your code would look like this:
function countdown(element) {
var start_value = "Free trial bonus has expired!"
interval = setInterval(function() {
var el1 = document.getElementsByClassName("timerx")[0];
var el2 = document.getElementsByClassName("timerx")[1];
if(seconds == 0) {
if(minutes == 0) {
el1.innerHTML = start_value;
el2.innerHTML = start_value;
clearInterval(interval);
return;
} else {
minutes--;
seconds = 60;
}
}
if(minutes > 0) {
var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
} else {
var minute_text = '';
}
var second_text = seconds > 1 ? 'seconds' : 'second';
el1.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
el2.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
seconds--;
}, 1000);
}
If you are calling the timer twice in the same page you need to have two IDs. The id="timerx"
<span id="timerx_"<?php echo 'DYNAMIC VARIBALE'; ?>>timer</span>
And use this new ID
As my homework I have to prepare an asp webpage for database frontpage. To gain some extra points we can add a javascript. I deceided to add a clock I've found somewhere in script tutorials and modified it a little, but my skills are not enough to place it correctly
I want to place it in my MasterPage, but whole page dissapears only the clock lefts if I add it like this:
<div id="Zawartosc" onload="showTheTime();">
<%-- clock --%>
<script src="Script.js"></script>
</div>
and here is the clock script:
function showTheTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var ampm = "am";
var colon = '<IMG SRC="clock/colon.gif">';
if (hours < 10) hours = "0" + hours;
else hours = hours + '';
if (minutes < 10) minutes = "0" + minutes;
else minutes = minutes + '';
if (seconds < 10) seconds = "0" + seconds;
else seconds = seconds + '';
document.write('<IMG SRC="clock/' + hours.charAt(0) + '.gif">');
document.write('<IMG SRC="clock/' + hours.charAt(1) + '.gif">');
document.write(colon);
document.write('<IMG SRC="clock/' + minutes.charAt(0) + '.gif">');
document.write('<IMG SRC="clock/' + minutes.charAt(1) + '.gif">');
document.write(colon);
document.write('<IMG SRC="clock/' + seconds.charAt(0) + '.gif">');
document.write('<IMG SRC="clock/' + seconds.charAt(1) + '.gif">');
}
setTimeout("showTheTime()", 1000);
showTheTime();
could you please lead or help me to correct code and make the clock appear correctly with my page?
From w3schools.com
The write() method is mostly used for testing: If it is used after an
HTML document is fully loaded, it will delete all existing HTML.
Give this a try:
<div id="Zawartosc" onload="showTheTime();">
<script src="Script.js"></script>
</div>
function createElementImg(source) {
var img = document.createElement('img');
img.src = source;
return img;
}
function showTheTime() {
var clockEle = document.getElementById("Zawartosc");
while (clockEle.hasChildNodes()) {
clockEle.removeChild(clockEle.lastChild);
}
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var ampm = "am";
var colon = "clock/colon.gif";
if (hours < 10) hours = "0" + hours;
else hours = hours + '';
if (minutes < 10) minutes = "0" + minutes;
else minutes = minutes + '';
if (seconds < 10) seconds = "0" + seconds;
else seconds = seconds + '';
clockEle.appendChild(createElementImg("clock/' + hours.charAt(0) + '.gif"));
clockEle.appendChild(createElementImg("clock/' + hours.charAt(1) + '.gif"));
clockEle.appendChild(createElementImg(colon));
clockEle.appendChild(createElementImg("clock/' + minutes.charAt(0) + '.gif"));
clockEle.appendChild(createElementImg("clock/' + minutes.charAt(1) + '.gif"));
clockEle.appendChild(createElementImg(colon));
clockEle.appendChild(createElementImg("clock/' + seconds.charAt(0) + '.gif"));
clockEle.appendChild(createElementImg("clock/' + seconds.charAt(1) + '.gif"));
}
setTimeout("showTheTime()", 1000);
showTheTime();