答案＆amp;演示

Question

我正在尝试从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>

欢迎任何帮助！

Answer 1

答案＆amp;演示

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

但是我深入了解代码的内容，并且设法使其工作。这是一个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();
}

说明

变量

开始，设置60，设置120，重置：链接到各自的button元素。
div ：链接到倒计时div元素。
pingSound ：包含“ping”声音的Audio元素。
倒计时：倒计时对象本身，您需要来声明它，传递初始属性并将其保存在变量中。

功能

startCountdown（倒计时）：取任何倒计时对象并启动它的执行，这将使倒计时运行。
setSeconds（倒计时，秒）：取任何倒计时对象并将其设置为秒（可在中期执行中使用）。它首先停止倒计时，然后更新Countdown.settings.seconds属性，即倒计时的实际秒数。

开发

使用那些变量＆amp;方法，我是怎么做的非常简单。

如果您希望隐藏时钟直到您播放它：

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

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

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

为什么？很好，因为插件的运作方式。一旦你创建了倒计时你的div就会被插件变得更大，你需要在那里创建倒计时，因为这是它工作的唯一方式，所以如果你不想要一个空白的正方形（因为我们没有开始倒计时）你必须隐藏div本身。

因此，我们在每个按钮中添加onclick事件：

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

就是这样，我花了一段时间才弄清楚，希望我不会让你生死，我可以建议下次再换一个更好的插件吗？祝你好运：）

如果您希望在加载时显示时钟：

Okey，所以这是对你的请求的更新，如果我们从我的原始代码中分离出来，使div显示在加载上非常简单（这里的JSFiddle和代码已经更新）

我们首先创建倒计时对象，然后启动它并暂时停止它（冻结它直到你再次启动它）。

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

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

现在，我们向按钮添加相同的onclick事件，除了开始按钮，它不再需要将div显示为块，因为它不是隐藏的。

代表start - ＆gt; startCountdown(countdown) - ＆gt;开始倒计时。
（..）

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

要使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 ）
更新了倒计时结束时播放声音的代码（ 2014年2月1日下午6点10分）

Answer 2

首先你没有jquery.js而你正在使用$（'＃countdown'）

您没有任何名为cdreset的功能。

我为你写了一个类似的代码：

<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" />

它将从60开始倒计时到-XXX

你应该添加一个条件，以便将计时器停在0：）

在JQuery Timer中添加时间按钮

2 个答案:

答案＆amp;演示

HTML

的JavaScript

说明

变量

功能

开发

更新