Creating a Countdown in HTML/JS - javascript

I created a simple test page for a timer that counts down from 10 to 0. There should be a bar as well as text showing the progress. So I created this page:
<html>
<head>
</head>
<body>
<script>
function ProgressCountdown(timeleft, bar, text) {
return new Promise((resolve, reject) => {
var countdownTimer = setInterval(() => {
timeleft--;
document.getElementById(bar).value = timeleft;
document.getElementById(text).textContent = timeleft;
if (timeleft <= 0) {
clearInterval(countdownTimer);
resolve(true);
}
}, 1000);
});
}
</script>
<div>
<div>
<progress value="10" max="10" id=pageBeginCountdown"></progress>
<p> Beginning in <span id=pageBeginCountdownText">10 </span> seconds</p>
</div>
</div>
</body>
</html>
It is not working, both bar and text do not budge. Where did I go wrong? The page is at https://geheimbund.ddnss.de/test.html - I have been debugging this for hours, but I just cannot get it to work. Would be super-thankful for any help.
I tried everything I could think of. I expect this to work, i.e. the bar and the text should count down to 0.

Based on the posted code alone, you would need an event that runs your function.
Also, as pointed out, the functions' variables aren't defined.
window.addEventListener('load', () => {
ProgressCountdown();
});

Related

How do I stop this clock in JavaScript [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 months ago.
I am having trouble to find the way to stop this clock in JavaScript
I was expecting the clock to stop working after pressing stop but it keeps going
<!DOCTYPE html>
<html>
<head>
<h1> Welcome to the clock. Press the stop button to stop the clock <h1>
<h2> This clock goes for 24 hours at 100 miloseconds</h2>
<div id="clock"></div>
<script>
const clockElement = document.querySelector('#clock');
const stopButton = document.querySelector('#stopbutton');
let clockInterval = setInterval(() => {
let currentTime = new Date();
clockElement.innerHTML = currentTime.toLocaleTimeString();
}, 100);
stopButton.addEventListener('click', () => {
clearInterval(clockInterval);
});
</script>
<button id="stopbutton">Stop</button>
The code in the script tag is running before the browser "rendered" the button.
You should put the button element above the script tag or tell the code to wait until the entire website has loaded with window.onload
Move this to the end of code should work, it will explain what happened
<script>
const stopButton = document.querySelector('#stopbutton');
stopButton.addEventListener('click', () => {
clearInterval(clockInterval);
});
</script>

How to do an action when a variable hits a specific number javascript

So basically I have done this code down bellow and I am trying to have a button that adds 1 to a variable and when that variable hits the specific number it plays an action. My final goal is to make it so when the variable hits the specific number it redirects to another page. I have tried for way too long and my friends don't know the solution either.
<!DOCTYPE html>
<head> </head>
<!DOCTYPE html>
<html>
<head>
<title> click tester </title>
<Meta charset="utf-8">
</head>
<body>
<script>
var theClicks = 1;
const win = 25;
if(theClicks >= win) {
alert('over 25');
}
</script>
<button onclick=theClicks++;>Button that adds1 to variable</button>
</body>
</html>
<button onclick=theClicks++;>Button that adds1 to variable</button>
Just increments the variable. To expand that you could add more actions in the button onclick event, but it's much better to just put it all in a function you can call.
<script>
var theClicks = 1;
const win = 25;
function doThing() {
if (++theClicks >= win) {
alert('over 25');
}
}
</script>
<button onclick='doThing()'>Button that adds1 to variable</button>
You could take an approach like below. Basically create a function that keeps track of a counter variable (i.e., i). Next add a click event listener to the button and increment the counter on each click. When the counter reaches 25 then do some action (I made it only needed to be clicked 3 times in the code below for demo convenience) .
For example:
// Reference to the DOM elements
const countEl = document.querySelector('#count-el');
const buttonEl = document.querySelector('button');
// Init a counter variable and return a function that increments it
const increment = (() => {
let i = 1;
return () => i++;
})();
// The click event listener
buttonEl.addEventListener('click', () => {
// Increment the count and update the UI if current click count is 3
if (increment() === 3) {
countEl.textContent = 'Do action now!';
}
});
<span id="count-el"></span>
<br />
<button>Click 3 times to do action</button>

progress-bar updated with setInterval zero still takes time to finish

Sorry for being very noob, but I started to learn JavaScript and have a little problem.
In the following code sample, the progress bar goes from 0 to 100 in 1 second, however, the "time" variable is set to 0 milliseconds, used by setInterval. I would expect the progressbar to be instantly at 100% when I press the button. (I will have progresses that will take less than a second to finish and I want to show them properly.) Looks like the setInterval is not using the given time as milliseconds.
So my question is, how can I set up the setInterval to use milliseconds, as it should be? (I know it will behave strange if you click the button a second time, but now this does not matter.)
Thanks!
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<button id="theButton">click</button>
<progress id="progressbar" min="0" value="0" max="100"></progress>
<span class="progress-value">0%</span>
<script>
$('#theButton').click(function(){
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = 0,
value = progressbar.val();
var loading = function() {
value += 1;
addValue = progressbar.val(value);
$('.progress-value').html(value + '%');
if (value == max) {
clearInterval(animate);
}
};
var animate = setInterval(function() {
loading();
}, time);
});
</script>

Adding Time Buttons in JQuery Timer

I am trying to adapt the countdown timer from http://www.jqueryscript.net/time-clock/Simple-jQuery-Html5-Based-360-Degree-Countdown-Timer-countdown360.html to add buttons which determine the time to count down.
I am a little confused (no, really a lot confused) about
a) how to link the buttons to the countdown display,
b) how to stop the display starting until I have clicked the desired button, and
c) how to reset the process without reloading the page.
Currently it takes the initial seconds value of 10 (put there just to test to see what it is doing) but does not respond to the buttons.
Here is the html:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="../src/jquery.countdown360.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container">
<div id="countdown"></div>
<script type="text/javascript" charset="utf-8">
$("#countdown").countdown360({
radius : 50,
seconds : 10,
fontColor : '#FFFFFF',
autostart : false,
onComplete : function () {//will ring bell
}
}).start()
</script>
<script>
window.onload = init;
function init(){
document.getElementById('btnStart1').onclick = start1;
document.getElementById('btnStart2').onclick = start2;
document.getElementById('btnReset').onclick = cdreset;
start.countdown360();
}
function start1(){ // starts 1 min countdown
seconds = 60;
countdown360();
}
function start2(){ // starts 2 min countdown
seconds = 120;
countdown360();
}
function reset() { // resets countdown
seconds=0;
//???
}
</script>
</div>
<div id="container">
<div id="countdown"></div>
<input type="button" value="1 min" id="btnStart1"/>
<input type="button" value="2 min" id="btnStart2"/>
<br>
<input type="button" value="Reset" id="btnReset"/>
</body>
</html>
Any help would be most welcome!
Answer & Demo
So it turns out there isn't a legit way of doing this, truth be told there isn't a lot of documentation about the subject and the plugin itself doesn't provide such functionability, or at least not in a user friendly way.
But I went down to the guts of the code and managed to make it work.
Here is a JSFiddle where I demonstrate what I understood you wanted.
HTML
<div id="countdown"></div>
<button id="start">Start</button>
<button id="set60">Set 60s</button>
<button id="set120">Set 120s</button>
<button id="reset">Reset</button>
JavaScript
start = document.querySelector("#start");
set60 = document.querySelector("#set60");
set120 = document.querySelector("#set120");
reset = document.querySelector("#reset");
div = $("#countdown");
pingSound = new Audio("http://www.sounddogs.com/previews/2220/mp3/402763_SOUNDDOGS__mu.mp3");
pingSound.preload = "auto"; //<- Optional but recommended
countdown = div.countdown360({
radius: 50,
seconds: 30,
fontColor: '#FFFFFF',
autostart: false,
onComplete: function () {
pingSound.play();
}
});
countdown.start(); //This right here is for showing the clock on load.
countdown.stop();
start.onclick = function () {
startCountdown(countdown);
}
set60.onclick = function () {
setSeconds(countdown, 60);
}
set120.onclick = function () {
setSeconds(countdown, 120);
}
reset.onclick = function () {
setSeconds(countdown, 0);
}
function startCountdown(countdown) {
countdown.start();
}
function setSeconds(countdown, seconds) {
countdown.stop();
countdown.settings.seconds = seconds;
countdown.start();
}
Explanation
Variables
start, set60, set120, reset : Link to their respective button elements.
div : Link to the countdown div element.
pingSound : Audio element that contains the "ping" sound.
countdown : The countdown object itself, you need to declare it like this, passing the initial properties and saving it in a variable.
Functions
startCountdown(countdown) : Takes any countdown object and start's it's execution, this will get the countdown running.
setSeconds(countdown,seconds) : Takes any countdown object and set's it second (it can be used in mid-excecution). It works by first stopping the countdown, then updating the Countdown.settings.seconds property, which is the actual seconds the countdown will run.
Development
With those variables & methods, how I did it is pretty straight forward.
If you want the clock hidden until you play it:
We first create the countdown object and hide the div.
div = $("#countdown");
div.css( "display" , "none" );
countdown = div.countdown360({..});
Why? Well because of how the plugin works. As soon as you create the countdown your div is made bigger by the plugin, and you need to create the countdown there because that's the only way it works, so if you don't want a blank square of nothing (since we haven't started the countdown) you have to hide the div itself.
So, we add an onclick event to each button:
for start -> startCountdown(countdown) , div.css( "display" , "block" ); -> Starts the countdown and shows the div.
for set60 -> setSeconds(countdown,60) -> Sets the countdown to 60s.
for set120 -> setSeconds(countdown,120) -> Sets the countdown to 120s.
for set0 -> setSeconds(countdown,0) -> Sets the countdown to 0s.
And that's it, it took me a while to figure out, hopefully I didn't just bore you to death, and may I suggest getting a better plugin next time? Good luck :)
If you want the clock displayed on load:
Okey, so this is an update upon your request, if we part from my original code, to make the div appear on load is quite simple (JSFiddle & code here have been updated)
We first create the countdown object, then start it and inmeadiatly stop it (freezing it until you start it again).
countdown = div.countdown360({..});
countdown.start();
countdown.stop();
Now, we add the same onclick events to the buttons except for the start button, which will no longer have to display the div as block as it isn't hidden.
for start -> startCountdown(countdown) -> Starts the countdown.
(..)
If you want to play a sound at the end of the countdown:
For the ping sound to play in the end, you just need to create a new Audio object with the mp3/ogg src as a parameter:
pingSound = new Audio("http://www.sounddogs.com/previews/2220/mp3/402763_SOUNDDOGS__mu.mp3");
Then, preload the audio so it's ready to play (otherwise when you call play it will first have to load). This is optional but recommended.
pingSound.preload = "auto";
And then call the Audio.play() function in the countdown's onComplete event.
countdown = div.countdown360({
(..)
onComplete:function(){
pingSound.play();
}
});
That's it, happy coding :)
Updates
Updated code to display the clock on load (1:43p.m 31/12/14)
Updated code to play sound in the end of countdown(6:10p.m 02/01/14)
First you don't have jquery.js and you are using $('#countdown')
You don't have any function called cdreset .
Well I wrote a similar code for you :
<script>
var m = setInterval(start, 1000), // init the interval , every 1 sec will call start function
s = 60;
function start(){
s = s -1;
document.getElementById("count").innerHTML = s;
}
function stop(){
clearInterval(m);
}
</script>
<p id="count">60</p>
<input type="submit" onclick="stop()" value="stop" />
it will count down starting from 60 to -XXX
You should add a condition so as to stop the timer at 0 :)

JavaScript Countdown Timer not starting [Code Included]

I'm trying to make a countdown timer using JS, obviously.
I think my code is correct, but it does not work.
Objective of the code:
The code suppose to show a timer decreasing until it show the content which is DONE in the alst line of the code.
Problem: I've tried making an HTML page on my local machine and tested it but it didn't work, also I've uploaded it on my website and it does not work too.
Code:
<body>
<div
id="JSPractice5"
style="border-style:dotted;
padding:10px;
font-size:24px;
width:200px;
text-align:center;">
Countdown Starting
</div>
<script type="text/javascript">
var containerID = "JSPractice5";
var number = 100;
var timerID = setInterval("CountdownTimer()",1000);
function CountdownTimer() {
if(number > 1) {
number--;
ReplaceContentInContainer(containerID,number); //Mark1
}
else {
clearInterval(timerID);
ReplaceContentInContainer(containerID,'DONE!!');
}
}
</script>
</body>
If the solution of the problem is easy/stupid and you thought of down voting it, please don't do, because I'm very new to SOF and JS :)
Thanks in Advance guys.
You're missing
function ReplaceContentInContainer(id, content)
{
document.getElementById(id).innerHTML = content;
}
Redo your setInterval call to specify the function itself, rather than a string containing a call.
See http://jsfiddle.net/2zwbV/2/ for a working example.
<body>
<div
id="JSPractice5"
style="border-style:dotted;
padding:10px;
font-size:24px;
width:200px;
text-align:center;">
Countdown Starting
</div>
<script type="text/javascript">
var containerID = "JSPractice5";
var number = 100;
function CountdownTimer() {
if(number > 1) {
number--;
ReplaceContentInContainer(containerID,number);
}
else {
clearInterval(timerID);
ReplaceContentInContainer(containerID,'DONE!!');
}
}
var timerID = setInterval(CountdownTimer(),1000);
</script>
</body>
First, the timerID should be after CountdownTimer function because if not you are going to call a non existing function, second is that the function CountdownTimer should't be in quotes.

Categories