CODEWITHSUNDEEP
javascriptjqueryhtmltimer
Tyler330
Tyler330

Reputation: 415

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!

Upvotes: 2

Views: 2652

Answers (2)

undefined
undefined

Reputation: 4135

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)

Upvotes: 4

Naper
Naper

Reputation: 21

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 :)

Upvotes: 1

Related Questions