1

保罗在这里。我是 JavaScript 新手，正在尝试构建一个类似于此问题中描述的闹钟：

为什么我的闹钟脚本停止工作？

来自 Whakkee 的工作演示：http ://www.obviousmatter.com/testso/hours2.html

但是我想使用下拉选择而不是文本输入。

（我对“下拉选择”的意思的演示，这不是一个工作示例） http://paulodonovan.net/Experiments/JavaScript/rise-and-shine/rise-and-shine_0.2.html

对于一个实验，我尝试用“带有选项的选择”替换“文本输入”，但我不知道如何整合选择：

    <html>

<body>
    <div>
        <form name="frm">

<select name="hour">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</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>   
<select name="mins">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</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>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>

            <input type="button" value="Set Alarm" onclick="justonce=1;">
        </form>
        <font color=#660000 size=20 face=Tahoma><span id="hours"></span></font>
    </div>


</body>
</html>




<script type="text/javascript">
obj_hours=document.getElementById("hours");
justonce=0;

function wr_hours()
{
    time=new Date();

    time_min=time.getMinutes();
    time_hours=time.getHours();

    time_wr=((time_hours<10)?"0":"")+time_hours;
    time_wr+=":";
    time_wr+=((time_min<10)?"0":"")+time_min;

    obj_hours.innerHTML=time_wr;

    if (justonce==1 && frm.mins.value==time_min && frm.hour.value==time_hours) {
            alert('Hello. Rise and Shine. :-)');
            justonce=0;
    }
}

setInterval("wr_hours();",1000);
</script>

这不起作用，任何想法为什么？也许我需要使用索引？

我希望对这个项目进行一些个性化，并添加一些其他功能，例如

  • 从包含 10 首歌曲的列表中选择一个 Youtube 视频作为提醒播放，并粘贴一个 url。我在功能方面找到了一个类似的示例，但是代码对我来说非常复杂..： http: //onlineclock.net/video/

  • '德国时间模式'复选框：'（一切都提前 10 分钟，所以你永远不会迟到。）'

如果时间允许： - 选中“Vintage Style”复选框，打开备用 CSS 样式表。这可能包括一个我可以用 CSS 构建的模拟闹钟。

当然，我宁愿理解并从头开始编写，我不希望有人为我构建它，但任何指向相关教程或技术等的指针将不胜感激。

谢谢，保罗

4

2 回答 2

3

这个问题在我看来是

第1部分

如何从 a 中获取所选值<select>？

最简单的方法是给<select>一个id属性，例如

<select id="foobar">
    <option value="00">00</option>
    <option value="01">01</option>
</select>

现在，在您的JavaScript中，您可以使用以下代码访问所选值

document.getElementById('foobar').value;

请记住，整个页面的id必须是唯一的。

第2部分

如何从时间中减去 10 分钟？

您正在使用的当前代码不使用Date对象进行用户选择，也不使用Number s，它使用String s（作为<option>值）。这意味着要减去 10 分钟，您将不得不使用一个（或做一些过于复杂的事情）。由于您没有在此使用Date，因此我将在回答中避免使用它（尽管您可能仍想考虑学习它）。

要执行您想要的操作，您需要添加更多步骤。下面，form_min和form_hours是用户选择的时间。

步骤 1. 将分钟和小时转换为数字。

form_min   = parseInt(form_min,   10);
form_hours = parseInt(form_hours, 10);

步骤 2. 减去 10 分钟

form_min = form_min - 10;

第 3 步。如果分钟数为负数，则减去 1 小时并增加 60 分钟。

if (form_min < 0) {
    form_hours = form_hours - 1;
    form_min = form_min + 60;
}

步骤 4. 转换回String。

form_min   = (form_min   < 10 ? "0" : "") + form_min;
form_hours = (form_hours < 10 ? "0" : "") + form_hours;

如果您使用（从 0 开始的 60 个选项，以此类推），您可以跳过第 1 步，因为在此上下文中，选项值与选项的索引匹配，因此.selectedIndex您将获得数值作为数字。

于 2013-04-24T17:11:48.647 回答
1

将id属性添加到： <select id="hours" name="hours">

这是您需要从小时下拉列表中获取值的方式：

var hourField = document.getElementById("hours");
var obj_hours = hourField.options[hourField.selectedIndex].value;

您可能也需要在mins下拉框中执行相同的操作。

于 2013-04-24T17:13:01.323 回答