javascript - 「ドイツ時間」オプション付き目覚まし時計 - JavaScript

Question

ここにポール。私は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 曲のリストから、URL を貼り付けて、アラートとして再生する Youtube ビデオを選択します。機能に関しては同様の例を見つけましたが、コードは私の目には非常に複雑です..: http://onlineclock.net/video/
「ドイツ時間モード」チェックボックス: 「(すべてが 10 分早く表示されるので、遅れることはありません。)」

時間が許せば: - 代替の CSS スタイルシートに切り替える「ビンテージスタイル」のチェックボックス。これには、CSS で作成できるアナログ目覚まし時計が含まれる可能性があります。

もちろん、私はむしろ理解してゼロから書きたいと思っています。誰かが私のためにそれを構築することは期待していませんが、関連するチュートリアルやテクニックなどへのポインタは大歓迎です。

ありがとう、ポール

score 3 · Accepted Answer

この質問は、私には次のように思えます

パート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オブジェクトを使用せず、 Numberも使用せず、 Stringを (値として)使用し<option>ます。これは、10 分を差し引くには、1 分を使用する (または過度に複雑なことをする) 必要があることを意味します。これでDateを使用していないので、私の答えでは避けます（ただし、とにかくそれについて学ぶことを検討したいかもしれません）。

必要なことを行うには、さらにいくつかの手順を追加する必要があります。以下のform_minとform_hoursは、ユーザーが選択した時間です。

ステップ 1. 分と時間をNumberに変換します。

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;

作業する場合.selectedIndex(0 から始まる 60 のオプションなど) を使用する場合は、オプション値がこのコンテキストのオプションのインデックスと一致するため、数値として値を取得するため、ステップ 1 をスキップできます。

score 1 · Accepted Answer

id属性を追加:<select id="hours" name="hours">

これは、時間のドロップダウンから値を取得する方法です。

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

minsドロップダウンボックスでも同じことを行う必要がある場合があります。

javascript - 「ドイツ時間」オプション付き目覚まし時計 - JavaScript

2 に答える 2

Related

Reference