javascript - 在JQuery Timer中添加时间按钮

我正在尝试从http://www.jqueryscript.net/time-clock/Simple-jQuery-Html5-Based-360-Degree-Countdown-Timer-countdown360.html调整倒数计时器，以添加确定倒数时间的按钮。

我有点困惑（不，真的很困惑）
a）如何将按钮链接到倒数显示
b）如何停止显示开始，直到我单击所需的按钮为止，并且
c）如何在不重新加载页面的情况下重置进程。

当前，它的初始秒值为10（仅在此处进行测试以查看其作用），但不响应按钮。

这是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>

任何帮助将是最欢迎的！

最佳答案

答案与演示

事实证明，这样做没有合法的方法，事实是，关于该主题的文档不多，并且插件本身不提供这种功能，或者至少不是以用户友好的方式提供。

但是我深入研究了代码的精髓，并设法使它起作用。
这是JSFiddle，我在此演示我理解您想要的内容。

的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();
}

说明

变数

start，set60，set120，reset：链接到它们各自的button元素。
div：链接到倒数div元素。
pingSound：包含“ ping”声音的Audio元素。
countdown：countdown对象本身，您需要这样声明它，传递初始属性并将其保存在变量中。

功能

startCountdown（countdown）：获取任何倒数对象并开始执行，这将使倒数运行。
setSeconds（countdown，seconds）：获取任何倒数对象，并将其设置为第二个对象（可在执行中间使用）。它的工作方式是先停止倒计时，然后更新Countdown.settings.seconds属性，这是倒数运行的实际秒数。

发展历程

使用这些变量和方法，我的工作方式非常简单。

如果要隐藏时钟直到播放，请执行以下操作：

我们首先创建倒数对象并隐藏div。

div = $("#countdown");
div.css( "display" , "none" );

countdown = div.countdown360({..});

为什么？好吧，因为插件的工作原理。一旦创建了倒数计时，插件就会使div变大，并且您需要在那里创建倒数计时，因为那是它唯一的工作方式，因此，如果您不想要一个空白的正方形（因为我们没有开始倒计时），您必须隐藏div本身。

因此，我们向每个按钮添加一个onclick事件：

start-> startCountdown(countdown) , div.css( "display" , "block" );->开始倒计时并显示div。
set60-> setSeconds(countdown,60)->设置倒计时为60秒。
set120-> setSeconds(countdown,120)->设置倒计时为120秒。
为set0-> setSeconds(countdown,0)->设置倒数为0。

就是这样，花了我一段时间才弄清楚，希望我不仅让您感到无聊，还可以建议下次再买一个更好的插件吗？祝好运：）

如果要在加载时显示时钟：

Okey，所以这是根据您的要求进行的更新，如果我们脱离了我的原始代码，使div在加载时显示非常简单（JSFiddle和此处的代码已更新）

我们首先创建一个倒数对象，然后启动它并适度停止它（冻结它直到再次启动它）。

countdown = div.countdown360({..});

countdown.start();
countdown.stop();

现在，我们将相同的onclick事件添加到按钮上，但开始按钮除外，因为开始按钮不再隐藏，因此不再需要将div显示为块。

start-> startCountdown(countdown)->开始倒计时。
（..）

如果您想在倒数计时结束时播放声音：

为了使ping声音最终播放，您只需要创建一个新的Audio对象，并将mp3 / ogg src作为参数：

pingSound = new Audio("http://www.sounddogs.com/previews/2220/mp3/402763_SOUNDDOGS__mu.mp3");

然后，预加载音频以便可以播放（否则，在调用播放时，首先必须加载）。这是可选的，但建议使用。

pingSound.preload = "auto";

然后在倒数计时的Audio.play()事件中调用onComplete函数。

countdown = div.countdown360({
    (..)
    onComplete:function(){
        pingSound.play();
    }
});

就是这样，快乐的编码:)

更新

更新了代码以显示加载时钟（1:43 p.m 31/12/14）
更新了代码以在倒数计时结束时播放声音（14:10 p.m 02/01/14）

关于javascript - 在JQuery Timer中添加时间按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27714959/

javascript - 在JQuery Timer中添加时间按钮

上一篇：JavaScript 彩色显示

下一篇：影响错误元素的 Javascript