2013-04-24 3 views
1

Пол здесь. Я новичок в JavaScript и пытается построить будильник, аналогичную описанной в этом вопросе:Будильник с возможностью «Немецкого времени» - на 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

Для эксперимента я попробовал заменяющего «ввода текста» с «выбрать с опциями», но я не» t знать, как интегрировать выбор:

<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> 

Это не работает, любые мысли почему? Возможно, мне нужно использовать индекс?

Я надеялся персонализировать этот проект немного, а также добавить некоторые другие функции, например.

  • Выберите видео для Youtube, чтобы играть как предупреждение, из списка из 10 композиций и вставляя URL-адрес. Я нашел аналогичный пример с точки зрения возможностей, но код очень сложный для моих глаз ..: http://onlineclock.net/video/

  • «Немецкий режим времени»: «(все 10 минут раньше, чтобы вы никогда не опоздали»). '

Если позволяет время: - Галочка на 'Vintage Style' переключение на альтернативный стиль CSS листа. Это может включать аналоговый будильник, который я могу встроить в CSS.

Конечно, я бы лучше понял и напишу с нуля, я не ожидаю, что кто-нибудь построит его для меня, но любые указатели на соответствующие учебники или методы и т. Д. Будут высоко оценены.

Спасибо, Paul

ответ

3

Этот вопрос, мне кажется, чтобы быть

Часть 1

Как я могу получить выбранное значение из <select>?

Самый простой способ, чтобы дать атрибут <select>идентификатор, например

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

Теперь в вашем JavaScript, вы можете получить доступ к выбранному значению, используя следующий код

document.getElementById('foobar').value; 

Помните, что Номер ID должен быть уникальный на всю страницу.

Часть 2

Как я могу вычесть 10 минут от времени?

Текущий код, который вы используете, не используйте Date объект для выбора пользователя и не использовать Number с, он использует Строка с (в качестве <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, как вы будете иметь значение как номер в связи с тем, стоимость опциона соответствует индексу опциона в данном контексте.

+0

Спасибо Пол S, это действительно полезно, особенно идея конвертировать. И часть 3 для обработки отрицательных минут действительно классная, я постараюсь заставить ее работать этим вечером. – Paul

+0

Привет, хорошо, я получил эту работу до определенной степени. http://paulodonovan.net/Experiments/JavaScript/rise-and-shine/rise-and-shine_0.8.html Проблема заключается в том, что он добирается сразу после часа, например. 18:00, а затем добавляет новый номер, т. Е. 18: 000 Любые мысли? Еще раз спасибо! Paul – Paul

+0

Вы выбрали исходные имена переменных, которые я опубликовал, которые конфликтуют с другой частью кода - посмотрите, как это изменилось в моем редактировании 23 часа назад. –

1

Добавить id атрибут: <select id="hours" name="hours">

Это, как вам нужно, чтобы получить значение от часы выпадающий:

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

Вы, возможно, потребуется сделать то же самое в вашем mins раскрывающемся списке тоже.

+0

Спасибо javapirate :-) – Paul