Fatal编程技术网
  • javascript/
  • 带有“德国时间”选项的闹钟-JavaScript格式

带有“德国时间”选项的闹钟-JavaScript格式

javascript youtube

带有“德国时间”选项的闹钟-JavaScript格式,javascript,youtube,clock,alarm,Javascript,Youtube,Clock,Alarm,我是保罗。我是JavaScript新手，正在尝试构建一个类似于此问题所述的闹钟： Whakkee的工作演示： 但是，我想使用下拉选择而不是文本输入 我的演示我所说的“下拉选择”，这不是一个有效的例子 对于一个实验，我尝试用“选择选项”替换“文本输入”，但我不知道如何集成选择： <html> <body> <div> <form name="frm"> <select name="hour"> <

我是保罗。我是JavaScript新手，正在尝试构建一个类似于此问题所述的闹钟：

Whakkee的工作演示：

但是，我想使用下拉选择而不是文本输入

我的演示我所说的“下拉选择”，这不是一个有效的例子

对于一个实验，我尝试用“选择选项”替换“文本输入”，但我不知道如何集成选择：

    <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视频。在功能方面，我发现了一个类似的示例，但代码在我看来非常复杂

“德国时间模式”复选框：“一切都提前10分钟，所以你永远不会迟到。”

如果时间允许： -选中“复古风格”复选框，打开替代CSS样式表。这可能包括一个模拟闹钟，我可以内置CSS

当然，我更愿意理解并从头开始写，我不希望有人为我构建它，但任何相关教程或技术等方面的指导都将不胜感激

谢谢你，保罗

我觉得这个问题

第一部分

我如何从一个表中获得所选的值

例如，最简单的方法是为对象指定一个id属性

<select id="foobar">
    <option value="00">00</option>
    <option value="01">01</option>
</select>
请记住，id对于整个页面必须是唯一的

第二部分

我怎样才能从时间中减去10分钟

您正在使用的当前代码既不使用对象进行用户选择，也不使用数字s，而是使用字符串s作为值。这意味着要减去10分钟，你必须使用1分钟或做一些过于复杂的事情。当你不使用日期的时候，我会在我的答案中避免它，尽管你可能想考虑学习它。无论如何。 要想做你想做的事情，你需要再添加几个步骤。在下文中，form_min和form_hours是用户选择的时间

第一步。将分钟和小时转换为数字

第二步。减去10分钟

form_min = form_min - 10;
第三步。如果分钟数为负数，减去1小时，再加上60分钟

if (form_min < 0) {
    form_hours = form_hours - 1;
    form_min = form_min + 60;
}
第四步。转换回字符串

如果您使用.selectedIndex 60选项，从0开始，持续几分钟，等等，您可以跳过步骤1，因为您将把该值作为一个数字，因为在这种情况下，该选项的值与该选项的索引匹配。

在我看来，这个问题是

第一部分

我如何从一个表中获得所选的值

例如，最简单的方法是为对象指定一个id属性

<select id="foobar">
    <option value="00">00</option>
    <option value="01">01</option>
</select>
请记住，id对于整个页面必须是唯一的

第二部分

我怎样才能从时间中减去10分钟

您正在使用的当前代码既不使用对象进行用户选择，也不使用数字s，而是使用字符串s作为值。这意味着要减去10分钟，你必须使用1分钟或做一些过于复杂的事情。当你不使用日期的时候，我会在我的答案中避免它，尽管你可能想考虑学习它。无论如何。 要想做你想做的事情，你需要再添加几个步骤。在下文中，form_min和form_hours是用户选择的时间

第一步。将分钟和小时转换为数字

第二步。减去10分钟

form_min = form_min - 10;
第三步。如果分钟数为负数，减去1小时，再加上60分钟

if (form_min < 0) {
    form_hours = form_hours - 1;
    form_min = form_min + 60;
}
第四步。转换回字符串

如果您使用.selectedIndex 60选项，从0开始，持续几分钟，您可以跳过步骤1，因为由于选项值与此上下文中的选项索引匹配，因此您将该值作为一个数字。

将id属性添加到：

以下是从“小时”下拉列表中获取值的方式：

var hourField = document.getElementById("hours");
var obj_hours = hourField.options[hourField.selectedIndex].value;
您可能还需要在mins下拉框中执行相同操作。

将id属性添加到：

以下是从“小时”下拉列表中获取值的方式：

var hourField = document.getElementById("hours");
var obj_hours = hourField.options[hourField.selectedIndex].value;
您可能也需要在mins下拉框中执行同样的操作。

谢谢Paul S，这非常有用，尤其是转换的想法。第三部分处理消极分钟真的很酷，今天晚上我会努力让它工作。嗨，好吧，我把它工作到了一定程度。问题是它在一小时后到达，例如18:00，然后添加一个新的数字，即18:000，有什么想法吗？再次感谢！Paul您选择了我发布的原始变量名，这与代码的不同部分相冲突-请在我23小时前的编辑中查看它的不同之处如果您不想全部重命名它们，请将time_wr设置为time_wr=time_min+：+time_hours；，因为这些已经被填充了。这已经修复了它，谢谢你！在最后一个tweek中，我想播放一个小的.wav文件，例如，当浏览器加载时会播放弹出的声音：但是我想插入它/用闹钟的警报激活它，我不知道这可能吗？如果我要求太多，不用担心，谢谢你
非常有用和有趣：谢谢Paul S，这真的很有帮助，尤其是转化的想法。第三部分处理消极分钟真的很酷，今天晚上我会努力让它工作。嗨，好吧，我把它工作到了一定程度。问题是它在一小时后到达，例如18:00，然后添加一个新的数字，即18:000，有什么想法吗？再次感谢！Paul您选择了我发布的原始变量名，这与代码的不同部分相冲突-请在我23小时前的编辑中查看它的不同之处如果您不想全部重命名它们，请将time_wr设置为time_wr=time_min+：+time_hours；，因为这些已经被填充了。这已经修复了它，谢谢你！在最后一个tweek中，我想播放一个小的.wav文件，例如，当浏览器加载时会播放弹出的声音：但是我想插入它/用闹钟的警报激活它，我不知道这可能吗？如果我要求太多，不用担心，谢谢这非常有用和有趣：