这里是保罗。我是 JavaScript 的新手,正在尝试构建一个类似于这个问题中描述的闹钟:
Why does my alarmclock script stop working?
来自 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 分钟,因此您永远不会迟到。)”
如果时间允许: - 选中“复古风格”的复选框可打开替代 CSS 样式表。这可能包括我可以用 CSS 构建的模拟闹钟。
当然,我更愿意理解并会从头开始编写,我不希望有人为我构建它,但是任何指向相关教程或技术等的指针将不胜感激。
谢谢,保罗
最佳答案
这个问题在我看来,是
第 1 部分
How can I get the chosen value from 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 部分
How can I subtract 10 minutes from the time?
您当前使用的代码未使用 Date对象供用户选择,也不使用 Number ,它使用 String (作为 <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 步。转换回字符串。
form_min = (form_min < 10 ? "0" : "") + form_min;
form_hours = (form_hours < 10 ? "0" : "") + form_hours;
如果您使用 .selectedIndex
(60 个选项从 0 开始表示分钟等)您可以跳过第 1 步,因为选项值与此上下文中选项的索引相匹配,因此您将获得 Number 的值。
关于javascript - 带 'German Time' 选项的闹钟 - 在 JavaScript 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16197996/