「德國時間」選項鬧鐘 - 在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構建的模擬鬧鐘。

當然，我寧願理解並且會從頭開始寫，我不指望任何人爲我構建它，但任何指向相關教程或技術的指針都將非常感激。

謝謝，保羅

來源

2013-04-24 Paul

這個問題在我看來，是

第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步，你將有值作爲數由於期權價值的期權的指數相匹配的工作在這方面。

來源

2013-04-24 17:11:48

感謝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下拉框中了。

來源

2013-04-24 17:13:01

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

「德國時間」選項鬧鐘 - 在JavaScript

回答

相關問題