Sound oder Licht Wecker

Stell dir ein Wecker und lass dich mit Sound oder Licht wecken
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wecker - Event-Kalender</title> <style> body { font-family: Verdana, Arial, Sans-Serif; font-size: 1rem; height:100vh; text-shadow: 1px 1px 2px #FFFFFF; background: linear-gradient(#D1D1D1 1%, #FFFFFF 50%, #D1D1D1); } form { white-space: Nowrap; } /* Tabelle */ table#tabelle { box-shadow: inset 0px 0px 35px 3px rgb(255, 255, 255), 0px 0px 3px 0px rgb(83, 83, 83); border-radius: 15px; border: Solid 2px rgb(137, 188, 243); padding: 5px; margin: Auto; margin-top: 25px; cursor: Default; } table#tabelle td, table#tabelle th { padding: 5px; } table#tabelle th { font-weight: Normal; } /* Formular */ input.eingabe { width: 40px; font-size: 1rem; color: rgb(50, 50, 50); padding-left: 15px; letter-spacing: 2px; } input#alarm { font-size: 1rem; color: rgb(50, 50, 50); letter-spacing: 2px; padding-left: 5px; width: 400px; } label, input[type="button"] { cursor: Pointer; } input[type="button"], input[type="text"] { border: Solid 1px rgb(255, 255, 255); letter-spacing: 2px; transition: box-shadow 0.3s; } input[type="text"]:invalid { background-color: #FFDBDB; } input[type="button"] { padding: 2px 4px 2px 4px; background-color: rgb(226, 226, 226); transition: background-color 0.4s; } input[type="button"]:hover { background-color: rgb(210, 210, 210); } input[type="button"]:focus, input[type="text"]:focus { border:0; outline:0; /* Chromium */ border: Solid 1px rgb(255, 255, 255); box-shadow: 0px 0px 3px 2px rgb(255, 255, 255); } input[readonly="readonly"], input[readonly="readonly"]:focus { width: 40px; font-size: 1rem; background-color: Transparent; border: Solid 1px rgb(255, 255, 255); box-shadow: None; padding-left: 15px; cursor: Default; } input[type="radio"]:checked + label { text-decoration: Underline; } /* Animation: Lichter */ .LichterStart { animation:Lichter 1.7s infinite; } @keyframes Lichter { 0% { box-shadow: 3.5em -3.5em 3.4em Red, 3.5em 3.5em 3.4em Gold, -3.6em 3.5em 3.4em Lime, -3.7em -3.7em 3.20em Blue; } 25% { box-shadow: 3.5em -3.5em 3.4em Blue, 3.5em 3.5em 3.4em Red, -3.6em 3.5em 3.4em Gold, -3.7em -3.7em 3.20em Lime; } 50% { box-shadow: 3.5em -3.5em 3.4em Lime, 3.5em 3.5em 3.4em Blue, -3.6em 3.5em 3.4em Red, -3.7em -3.7em 3.20em Gold; } 75% { box-shadow: 3.5em -3.5em 3.4em Gold, 3.5em 3.5em 3.4em Lime, -3.6em 3.5em 3.4em Blue, -3.7em -3.7em 3.20em Red; } 100% { box-shadow: 3.5em -3.5em 3.4em Red, 3.5em 3.5em 3.4em Gold, -3.6em 3.5em 3.4em Lime, -3.7em -3.7em 3.20em Blue; } } </style> <script> var AZ = 1, set = 0, AlarmLaeuft = false, UhrTimerID = null; function ZeigeZeit() { var Jetzt = new Date(); document.getElementById("Uhrstunden").value = ZZ(Jetzt.getHours()); document.getElementById("Uhrminuten").value = ZZ(Jetzt.getMinutes()); document.getElementById("Uhrsekunden").value = ZZ(Jetzt.getSeconds()); UhrTimerID = setTimeout("ZeigeZeit()", 1000); if (set == 0) { var Jetzt = new Date(); document.getElementById("Alarmstunden").value = ZZ(Jetzt.getHours()); document.getElementById("Alarmminuten").value = ZZ(Jetzt.getMinutes()); set = 1; } var st = document.getElementById("Uhrstunden").value; var mi = document.getElementById("Uhrminuten").value; var se = document.getElementById("Uhrsekunden").value; var ast = document.getElementById("Alarmstunden").value; var ami = document.getElementById("Alarmminuten").value; var ase = document.getElementById("Alarmsekunden").value; if (AlarmLaeuft) { if (st == ast) { if (mi == ami) { if (se == ase) { if (document.getElementById("Signal").checked) { document.getElementById("sound").loop = true; document.getElementById("sound").play(); } if (document.getElementById("Lichter").checked) { document.getElementsByTagName("body")[0].classList.add("LichterStart"); } window.setTimeout(function () { StopAlarm(); AZ=1; },10000); // 10 sec. } } } } } function Alarm() { AlarmLaeuft = true; document.getElementById("Alarmbutton").value = " \u2714 Alarm "; } function StopAlarm() { AlarmLaeuft = false; document.getElementById("Alarmbutton").value = " \u2718 Alarm "; document.getElementById("sound").pause(); document.getElementsByTagName("body")[0].classList.remove("LichterStart"); } function AlarmOn() { AZ++; if (AZ < 3) { Alarm(); } if (AZ == 3) { StopAlarm(); AZ=1; } } function ZZ(x) { return(((x < 10) ? "0" : "") + x); } function AlarmTest() { if (document.getElementById("Signal").checked) { document.getElementById("sound").play(); } if (document.getElementById("Lichter").checked) { document.getElementsByTagName("body")[0].classList.add("LichterStart"); } } function WeckerSetzen() { if (window.location.search != "") { var zeit = window.location.search.split("|"); var stunde = zeit[0].substring(1, 3); var minute = zeit[1]; var txt = zeit[2]; var col = decodeURIComponent(zeit[3]); if (txt != "") { txt = " - " + decodeURIComponent(txt); } if (col != "") { // document.getElementById("tabelle").style.backgroundColor= col; document.getElementById("tabelle").style.border="Solid 2px " + col; } document.getElementById("Alarmstunden").value = stunde; document.getElementById("Alarmminuten").value = minute; document.getElementById("alarm").value = "Event um " + stunde + ":" + minute + " Uhr" + txt; var Heute = new Date(); var hstunde = Heute.getHours(); hstunde = ZZ(hstunde); if (hstunde != stunde) { document.getElementById("Alarmsekunden").value = "00"; } } } window.addEventListener("load", ZeigeZeit); window.addEventListener("load", WeckerSetzen); </script> </head> <body> <form> <table id="tabelle"> <tr> <td title="Aktuelle Uhrzeit"> Uhrzeit <input type="text" id="Uhrstunden" readonly="readonly" tabindex="-1000"> : <input type="text" id="Uhrminuten" readonly="readonly" tabindex="-1000"> : <input type="text" id="Uhrsekunden" readonly="readonly" tabindex="-1000"> </td> <th> <span title="Ton abspielen"> <input type="radio" name="option" id="Signal" checked="checked"> <label for="Signal">Ton</label> </span> <span title="Licht einschalten"> <input type="radio" name="option" id="Lichter"> <label for="Lichter">Licht</label> </span> </th> </tr> <tr> <td colspan="2"> <span title="Nachricht eingeben ..."> <input type="text" id="alarm" placeholder="Nachricht eingeben ..." maxlength="100" tabindex="1"> </span> </td> </tr> <tr> <td> <label><span title="Alarm einstellen">Alarm&nbsp; </span> <input type="text" id="Alarmstunden" value="00" class="eingabe" required="required" pattern="[0-9]{2}" tabindex="2" title="Stunden (00-23, zweistellige Zahlen eingeben)"> </label> <label>: <input type="text" id="Alarmminuten" value="00" class="eingabe" required="required" pattern="[0-9]{2}" tabindex="3" title="Minuten (00-59, zweistellige Zahlen eingeben)"> </label> <label>: <input type="text" id="Alarmsekunden" value="59" class="eingabe" required="required" tabindex="4" pattern="[0-9]{2}" title="Sekunden (00-59, zweistellige Zahlen eingeben)"> </label> </td> <th> <input type="button" id="Alarmbutton" onclick="AlarmOn();" value=" &#10008; Alarm " tabindex="5" title="Alarm: &#10004; Ein oder &#10008; Aus"> <input type="button" name="Test" onclick="AlarmTest();" value="&thinsp;&#10151;" title="Alarm testen"> </th> </tr> </table> </form> <audio id="sound" loop="false"> <source src="daten_webseite/sierene.ogg" type="audio/ogg"> </audio> </body> </html>