Question

我正在使用HTML和JavaScript构建闹钟。

我有一个播放歌曲playSound(soundfile)的函数，以及另一个在给定时间playSound调用Acordar(h, m)函数的函数。这两种方法都可以自行运行。

我还有一个表格，我输入一小时一分钟，当我按下保存按钮时，它会调用Acordar给出小时和分钟。

问题是，当我以这种方式拨打Acordar时，声音立即播放（播放前不会等待所需的时间）声音）。但是，正如我之前提到的，这两种功能都可以自行运行。

这是我的代码：

playSound功能：

function playSound(soundfile) {
    document.getElementById("dummy").innerHTML= "<embed 
src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}

Acordar功能：

function Acordar(h, m) {
    var now = new Date();
    var espera = new Date(now.getFullYear(), now.getMonth(), now.getDate(), h, m, 0, 0) - now;
    if (espera < 0) {
        espera += 86400000;
    }
    setTimeout(function() {
        document.getElementById("dummy").innerHTML="<embed src=\""+'starwars.mp3'+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
        }, espera);
}

这是我的HTML表单：

<div class="defTime" id="defTime">
<label id="hora" for="hora"></label>
<select size="1" id="hora" name="hora">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="19">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
</select>
<label for="minuto"></label>
<select size="1" id="minuto" name="minuto">
    <option value="0">0</option>
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
    <option value="25">25</option>
    <option value="30">30</option>
    <option value="35">35</option>
    <option value="40">40</option>
    <option value="45">45</option>
    <option value="50">50</option>
    <option value="55">55</option>
</select>

<button id="save" type="submit" style="border: 0; background: transparent" class="save" onclick="Acordar(hora.value, minuto.value)"><img src="save.png" width="50" height="50" alt="submit"  />

Answer 1

问题是您传递的小时值是undefined，因为您有两个具有相同id的元素。 id必须是唯一的。

更改或删除您的id attribue： <label id="hora" for="hora"></label>

Answer 2

问题＆amp;溶液

首先，您需要从第一个public void send(Message m){ jmsTemplate.convertAndSend(topic, m); } @JmsListener(destination = "${jsa.activemq.topic}") public void receive(Message msg){ System.out.println("Recieved Message: " + msg); }中移除id hora以获取任何可用的内容。 <label>是唯一标识符，因此您需要在任何给定页面上仅使用相同的id一次。

您无法像在表单中那样访问HTML元素。

要获取ID为id的select的值，请使用hora，而应使用hora.value。

您使用的语法是在尝试调用变量上的方法时使用的语法。但是，在这种情况下，变量不存在。

如果您在JavaScript代码中声明了变量（在所有内容都加载完毕后）将工作。

document.getElementById("hora").value

或者如果您只是使用：

var hora;
var minuto;
window.onload = function() {
    hora = document.getElementById("hora");
    minuto = document.getElementById("minuto");
}

那么，为什么声音会立即播放？

未定义变量<button id="save" type="submit" style="border: 0; background: transparent" class="save" onclick="Acordar(document.getElementById("hora").value, document.getElementById("minuto").value)"><img src="save.png" width="50" height="50" alt="submit" />和hora，您尝试访问它们。这会在JavaScript中返回值minuto。

当您尝试在需要数字的上下文中使用undefined时，会将其转换为undefined。

因此，您使用两个undefined值调用0，这两个值都变为Acordar，因此它在0小时和0分钟内运行该函数，因此它看起来好像立即被召唤了。

Answer 3

一些事情。

从
更改此行
```
<label id="label" for="hora"></label>
```

到

    <label id="hora-label" for="hora"></label>

原因：页面上的ID必须是唯一的。

从以下位置更改此行：

document.getElementById("dummy").innerHTML= "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";

为：

    document.getElementById("dummy").innerHTML = "<embed src=\""+ soundfile +"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";

解决语法错误。

从以下位置更改此HTML：

<button id="save" type="submit" style="border: 0; background: transparent" class="save" onclick="Acordar(hora.value, minuto.value)"><img src="save.png" width="50" height="50" alt="submit"  />

为：

    <button id="save" type="submit" style="border: 0; background: transparent" class="save" onclick="Acordar()"><img src="save.png" width="50" height="50" alt="submit"  />

访问输入的语法不正确，输入可以在函数本身访问，如下所示：

    function Acordar() {
      var sH = document.getElementById("hora");
      var sM = document.getElementById("minuto");
      var nH = Number(sH.options[sH.selectedIndex].text);
      var nM = Number(sM.options[sM.selectedIndex].text);
      var now = new Date();
      var espera = new Date(now.getFullYear(), now.getMonth(), now.getDate(), nH, nM, 0, 0) - now;

      if (espera < 0) {
        espera += 86400000;
      }

      setTimeout(function() {
        document.getElementById("dummy").innerHTML = document.getElementById("dummy").innerHTML="<embed src=\""+'starwars.mp3'+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
      }, espera);
    }

HTML表单按钮无法正常工作

3 个答案:

问题＆amp;溶液

那么，为什么声音会立即播放？