在javascript中的简单闹钟 [英] Simple alarm clock in javascript
问题描述
嗨！
我试图在javascript中创建简单的闹钟应用程序。
我的想法是比较来自的值getHours函数为用户选择的select选项的值。 （到目前为止，我只编写了几个小时没有分钟的代码）。
因为我是编程的初学者，所以我不知道哪里有错误。
我想问你任何想法/帮助我在这段代码中应该考虑什么。
我尝试过：
function loop（）{
var frag = document .createDocumentFragment（）;
for （i = 1 ; i< 25 ; i ++）{
var op = document .createElement（< span class =code-string> option）;
op.textContent = i;
frag.appendChild（op）;
};
document .getElementById（ 小时）的appendChild（FRAG）。
};
loop（）;
function loop2（）{
var fragm = document .createDocumentFragment（）;
for （i = 0 ; i< 60 ; i ++）{
var op2 = document .createElement（ option）;
op2.textContent = i;
fragm.appendChild（op2）;
};
document .getElementById（ min).appendChild(fragm）;
};
loop2（）;
// console.log（（new date（））。getHours （））;
// function aaa（s）{
// var s = document.getElementById（hours）;
// console.log（'Valueprzechowujewartość：'+ s.value）;
// }
// aaa（）;
function play（）{
var s = document .getElementById （ hours）;
var currentTime = new 日期（）调用getHours（）;
if （s.value == currentTime.value）{
alert（'' yey'）;
console .log（play）;
}
}
play（）;
< pre lang =HTML> < head > < / head >
< body >
< div id = alarm < span class =code-keyword>>
< p > 选择闹铃时间< / p >
< 选择 id = hours >
< / select >
< select id = min >
< / select >
< / div >
< audio id = alert src = assets / alert.mp3 preload = auto > < / audio >
< / body > 创建小时数时在
< select> 列表中的分钟数，将选择第一项。
然后，您可以立即检查是否需要发出警报。只有在凌晨1点运行项目时才会发生这种情况。一旦检查完成，你再也不会检查。
你需要使用setInterval [ ^ ]或 setTimeout [ ^ ]。
// 使用setInterval：
function play（）{...}
setInterval（play， 1000 ）; // 每秒检查一次
// 或 - 使用setTimeout：
function play（） {
...
setTimeout（play， 1000 ）; // 一秒钟再次检查
}
play（ ）;
您可能还想在达到闹钟时间时播放MP3文件：
< span class =code-sdkkeyword> document .getElementById（ alert）。 play（）;
HTMLMediaElement .play（） - Web API | MDN [ ^
Hi!
Im trying to create simple alarm clock application in javascript.
My idea for it is to compare the value from getHours function to the value from select's option that is chosen by user. (so far ive been writing the code only for hours without minutes).
As I am the beginner in programming I have no idea where there can be a bug.
I would like to ask you for any ideas/help what I should consider in this code.
What I have tried:
function loop () {
var frag = document.createDocumentFragment();
for(i = 1; i < 25; i++) {
var op = document.createElement("option");
op.textContent = i;
frag.appendChild(op);
};
document.getElementById("hours").appendChild(frag);
};
loop();
function loop2 () {
var fragm = document.createDocumentFragment();
for(i = 0; i < 60; i++) {
var op2 = document.createElement("option");
op2.textContent = i;
fragm.appendChild(op2);
};
document.getElementById("min").appendChild(fragm);
};
loop2();
//console.log((new Date()).getHours());
//function aaa (s) {
//var s = document.getElementById("hours");
// console.log('Value przechowuje wartość: '+s.value);
//}
//aaa();
function play () {
var s = document.getElementById("hours");
var currentTime = new Date().getHours();
if (s.value == currentTime.value) {
alert('yey');
console.log(play);
}
}
play();
<head></head>
<body>
<div id="alarm">
<p>Choose time of alarm ring</p>
<select id="hours">
</select>
<select id="min">
</select>
</div>
<audio id="alert" src="assets/alert.mp3" preload="auto"></audio>
</body>When you create the hours and minutes in your<select>lists, the first item will be selected.
You then immediately check whether the alarm needs to sound. This will only happen if you run your project at 1 AM. Once that check is complete, you never check again.
You need to run your test in a loop, using either setInterval[^] or setTimeout[^].
// Using setInterval: function play() { ... } setInterval(play, 1000); // Check the time every second // OR - using setTimeout: function play() { ... setTimeout(play, 1000); // Check again in one second } play();
You probably also want to play the MP3 file when the alarm time is reached:
document.getElementById("alert").play();
这篇关于在javascript中的简单闹钟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
