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 :)
Related
I'm trying to create a div in an HTML page and write random value in it, then, I want the div to refresh itself every X seconds so that the number in it change, but the entire page is not reloaded, just the div.
My idea was that :
<body>
<div id="people" onload="rand();"> </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function autoRefresh_div()
{
$("#people").load("load.html");// a function which will load data from other file after x seconds
}
setInterval('autoRefresh_div()', 0.5); // refresh div after 5 secs
function rand(){
document.getElementById("people").innerHTML = Math.random();
}
</script>
</body>
</html>
But nothing appear in my div. I tried to change "Math.random()" with some text but nothings change.
Can someone explain me why?
You don't need an onload event. Just setInterval() with a function which will set a new value in a div:
function autoRefreshDiv() {
document.getElementById("people").innerHTML = Math.random();
}
setInterval(autoRefreshDiv, 1000); // Time is set in milliseconds
<div id="people"></div>
setInterval will run the function every X milliseconds.
I've only been working with javascript for the past 3 days and I have an assignment to do. (Don't ask me why they're making me create a game on my first js assignment) I've made this game you can view it here http://nwdevelopment.host56.com/game.html
How it should work: Click the start button, then the start button goes away and the animation starts on the character. Timer will still go until 30 seconds are up. (1 second currently for testing purposes) Game ends and displays amounts of clicks in pop up ( + 50 to win). Start button comes back up and you can play again.
The problem i'm having is:
1: I need to make the button go away when clicked, but still continue to count down until the end of the game but come back up when the game ends. Where can I learn to do this? Direct me to a site or show me please.
2: During all of this, when you press start game, i need Ganon to move around slowly while you click on him and the score goes up. I got the score to go up but I can't get him to move and I'm not even sure where to start. Also, when you click on him I need it to move 10 pixels randomly on the screen.
I need this in the simplest form you can give me with javascript. Can you point me in the right direction for tutorials or something? Here is the code so far, sorry the CSS and scripts are in one file currently. (leaving out the CSS as i don't think you need it.)
<div id="textWrapper">
<h1>Try to Defeat<br /> Ganon!</h1>
<p class="description">Click on Ganon and watch your score rise! If you hit Ganon enough times before the time runs out, you win!</p>
<ul>
<li>Home</li>
<li>UNIT3A</li>
<li>UNIT3B</li>
<li>Game</li>
</ul>
<br />
<!-- Counter -->
<div id="numberCounter">
<p>0</p>
</div>
</div>
<div id="backgroundImageWrapper">
<div id="ganonWrapper">
<img src="ganon.png" alt="ganon" onclick="myFunction()"/>
</div>
<div id="buttonWrapper">
<button id="button" onclick="myTimer()">Start Game</button>
</div>
</div>
<!-- START JAVASCRIPT -->
<script>
var counter = 0;
function add() {
return counter += 1;
}
function myFunction(){
document.getElementById("numberCounter").innerHTML = add();
}
function myTimer() {
setTimeout(function(){ alert("Game over!"); }, 1000);
}
</script>
Maybe this little fiddle can help you get the timer things to work.
http://jsfiddle.net/2zfdLf0q/2/
// lets put everything in our game object
var game = {
//this is the init function (we call this function on page load (see last line))
init: function(){
//we attach a click event on the button
document.getElementById('start').addEventListener('click', function(){
//we hide the button
document.getElementById('start').style.display = "none";
//on click we start the timer
game.timer.start();
});
},
//this is the timer object
timer: {
startTime: 5, //the time we start with (used to reset)
currentTime: 5, //the counter used to remember where the counter is
interval: null, //the interval object is stored here so we can stop it later
start: function(){
//when we start the timer we set an interval to execute every 1000 miliseconds
game.timer.interval = setInterval(function(){
game.timer.currentTime -= 1; //we minus 1 every second to the timer current time
//update the textbox to show the user what the time is
document.getElementById('counter').value = game.timer.currentTime + ' seconds';
//if timer hits 0 we show the game is over and reset the game, we also clear the timer
//so it wouldn't count below zero
if(game.timer.currentTime == 0){
alert('game over');
game.reset();
clearTimeout(game.timer.interval);
}
},1000);
}
},
//this is the reset function
reset: function(){
document.getElementById('start').style.display = 'inline-block';
game.timer.currentTime = game.timer.startTime;
document.getElementById('counter').value = game.timer.currentTime + ' seconds';
}
}
//we start the game on page load
//you should wrap this in
//window.onload = function(){}
//but jsFiddle does this automaticly
game.init();
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>
I want to create a timer that will add or remove divs ( inline divs ) based on time function in Javascript or Jquery.
E.g With each second i want to add a div or remove a div.
Can i get some ideas on this?
<html>
<head>
<title>Testing</title>
<script>
var i = 0;
var myVar=setInterval(function () {myTimer()}, 1000);
function myTimer()
{
document.getElementById('Container').innerHTML += "<div id='"+i+"'>This is the Div with New ID 'i'</div>";
i++;
}
</script>
</head>
<body>
<div id='Container'>
</div>
</body>
</html>
This Should Create a DIV each second inside the Div with id 'Container'
Use setInterval.
var diff = 1000, // how long between adds in milliseconds
totalTime = 0, // how long we have run
maxTime = 1000*60*60*5, // how long we want to run
interval = setInterval(function() {
$(".parentDiv").append($("<div>new div</div>"));
totalTime += diff; // keep track of all of our time
if (totalTime >= maxTime) {
clearInterval(interval);
}
},diff);
Note that the time is in milliseconds.
And to get rid of it
clearInterval(interval);
Beware that it will keep running, and if any of your actions take too long or slow down, you could find yourself with quite the mess stumbling over each other.
You can make use of setTimeout(function, mili seconds)
var testTimer;
function timer()
{
// Do your stuff
testTimer = setTimeout("timer()",1000);
}
This will call your timer function every one second. and you can do your stuff in this function
To stop this timer function you can do
window.clearTimeout(testTimer);
OK, this is a bit of a tricky one, and I've got a deadline. So anybody who can solve this riddle in the next six hours (by 7am pacific time) gets $100 sent to them via paypal. If not, you still have my undying gratitude for solving the mystery.
I've got an idangero.us swiper with three slides in it. In each slide is a jquery countdown timer from here: http://github.com/rendro/countdown/
Here's how this thing is supposed to work:
When the page loads, you should see a timer count from 3-1 over 3 seconds. When the countdown is finished, it toggles a couple of things. Then there's supposed to be a five second delay, after which, it should automatically slide to the next slide, and the process should repeat. If you manually swipe to another slide, the process should also start over on that slide. Problem is that the timer count doesn't reset. The amount of time does, but the number doesn't. And the timeout function is kinda sketchy. It seems like it skips a beat sometimes.
Here is a dumbed down live example
And here is the Fiddle
And the script:
$(document).ready(function() {
/* initialize swiper */
var mySwiper = new Swiper('.videos',{
loop:true,
grabCursor: true,
onSlideChangeEnd: function(swiper, direction) {
$(".countdown").data('countdown').update(+(new Date) + 3000).start();
}
})
/* create countdown */
$(function() {
$('.countdown').countdown({
date: +(new Date) + 3000,
render: function(data) {
$(this.el).text(this.leadingZeros(data.sec, 0));
},
/* when countdown ends, do this */
onEnd: function() {
$(this.el).addClass('ended');
$(".swiper-slide-active").addClass("loaded");
/* when video is loaded, start timer, and slide to next video */
setTimeout( function() {
$(".swiper-slide").removeClass('loaded');
mySwiper.swipeNext();
},5000);
}
});
});
});
So
Hello im not sure, but You did tried to use function named setInterval...
timerId = setInterval(function()
{
//
}
and then to reset it:
clearInterval(timerId)
Another thing is that the countdown ist working. Is method render really exist in jQuery countdown?
Try following:
/* create var*/
var counter = +(new Date) + 3000;
/* create countdown */
$(function() {
$('.countdown').countdown({
until: counter
},
$('.countdown').countdown(destroy ? 'destroy' : {until: counter });
Maybe destroying and creating countdown every slide would work.
http://keith-wood.name/countdown.html