“德国时间”选项闹钟 - 在JavaScript

问题描述：

保罗在这里。我是新来的JavaScript，并试图建立类似于这个问题描述的闹钟：从Whakkee“德国时间”选项闹钟 - 在JavaScript

Why does my alarmclock script stop working?

工作演示：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视频并通过粘贴网址进行提醒。我在功能上发现了一个类似的例子，但代码对我来说非常复杂..：http://onlineclock.net/video/
'德国时间模式'复选框：'（一切都提前10分钟，所以你永远不会迟到。） '

如果时间允许： - 复选框‘复古风格’的一种替代的CSS样式表的切换。这可能包括我可以用CSS构建的模拟闹钟。

当然，我宁愿理解并且会从头开始写，我不指望任何人为我构建它，但任何指向相关教程或技术的指针都将非常感激。

谢谢，保罗

答

这个问题在我看来，是

第1部分

我怎样才能从<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对象用户的选择也不能使用数 S上当前的代码，它使用字符串 S（为<option>值）。这意味着要减去10分钟就必须使用一个（或者做一些过于复杂的事情）。因为你在这里没有使用日期，所以我会在回答中避免它（尽管你可能想要考虑学习它）。

要做你想要的，你需要添加几个步骤。在下面，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步，你将有值作为数由于期权价值的期权的指数相匹配的工作在这方面。

感谢Paul S，这真的很有帮助，尤其是转换的想法。而第3部分的负面分钟真的很酷，我会尽量让它在今晚工作。 – Paul 2013-04-25 05:09:59

嗨，好吧，我得到了这个工作到一个点。 http://paulodonovan.net/Experiments/JavaScript/rise-and-shine/rise-and-shine_0.8.html问题出现在一小时之后，例如， 18:00，然后添加一个新号码，即18：000任何想法？再次感谢！ Paul – Paul 2013-04-25 16:20:19

您选择了我发布的原始变量名称，它与代码的不同部分发生冲突 - 请参阅23小时前我的编辑中的不同之处 – 2013-04-25 16:49:45

答

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

这就是你需要从小时下降到这个值。

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

你可能需要做同样的在你的mins下拉框中了。

谢谢javapirate :-) – Paul 2013-04-25 05:13:40

“德国时间”选项闹钟 - 在JavaScript

相关推荐