Wecker
Einfach die Seite auflassen und Wecker stellen. Du wirst mit Ton und Lichteffekte geweckt
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</title>
<style>
body {
font-family: Verdana, Arial, Sans-Serif;
font-size: 1rem;
text-shadow: 1px 1px 1px #FFFFFF;
background: linear-gradient(#D1D1D1 1%, #FFFFFF 50%, #D1D1D1);
}
table#tabelle {
background-color: rgb(224, 237, 252);
box-shadow: inset 0px 0px 25px 3px rgb(34,132,230), 0px 0px 3px 0px rgb(83, 83, 83);
border-radius: 15px;
border: Solid 2px rgb(34,132,230);
padding: 5px;
margin: Auto;
margin-top: 25px;
cursor: Default;
}
table#tabelle td,
table#tabelle th {
padding: 5px;
}
table#tabelle th {
font-weight: Normal;
}
form {
white-space: Nowrap;
}
input.eingabe {
width: 40px;
font-size: 1rem;
color: rgb(20, 104, 188);
padding-left: 15px;
letter-spacing: 2px;
}
input#alarm {
font-size: 1rem;
color: rgb(20, 104, 188);
letter-spacing: 2px;
padding-left: 15px;
width: 390px;
}
label,
input[type="button"] {
cursor: Pointer;
}
input[type="button"],
input[type="text"] {
border: Solid 1px rgb(20, 109, 199);
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(222, 236, 252);
transition: background-color 0.4s;
}
input[type="button"]:hover {
background-color: rgb(202, 225, 251);
}
input[type="button"]:focus,
input[type="text"]:focus {
border:0; outline:0; /* Chromium */
border: Solid 1px rgb(34,132,230);
box-shadow: 0px 0px 3px 0px rgb(34,132,230);
}
input[readonly="readonly"],
input[readonly="readonly"]:focus {
width: 40px;
font-size: 1rem;
background: transparent;
border: Solid 1px rgb(20, 109, 199);
box-shadow: None;
padding-left: 15px;
cursor: Default;
}
input[type="radio"]:checked + label {
color: rgb(21, 113, 204);
}
.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>
/* Wecker
* 07.09.2021
* werner-zenk.de */
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.getElementById("tabelle").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.getElementById("tabelle").classList.remove("LichterStart");
}
function AlarmOn() {
window.localStorage.setItem("Nachricht", document.getElementById("alarm").value);
AZ++;
if (AZ < 3) {
Alarm();
}
if (AZ == 3) {
StopAlarm();
AZ=1;
}
}
function ZZ(x) {
return(((x < 10) ? "0" : "") + x);
}
// Alarm testen
function AlarmTest() {
if (document.getElementById("Signal").checked) {
document.getElementById("sound").play();
}
if (document.getElementById("Lichter").checked) {
document.getElementById("tabelle").classList.add("LichterStart");
}
}
window.addEventListener("load", ZeigeZeit);
window.addEventListener("load", function () {
if (window.localStorage.getItem("Nachricht")) {
document.getElementById("alarm").value = window.localStorage.getItem("Nachricht");
}
});
</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="checkbox" name="option[]" id="Signal" checked="checked"> <label for="Signal">Ton</label>
</span>
<span title="Licht einschalten">
<input type="checkbox" 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" value="Die Pizza ist fertig!" placeholder="Nachricht eingeben ..." maxlength="100" tabindex="1">
</span>
</td>
</tr>
<tr>
<td>
<label><span title="Alarm einstellen">Alarm </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=" ✘ Alarm " tabindex="5" title="Alarm: ✔ Ein oder ✘ Aus">
<input type="button" name="Test" onclick="AlarmTest();" value=" ➧" title="Alarm testen">
</th>
</tr>
</table>
</form>
<audio id="sound" loop="false">
<source src="/daten_webseite/sierene.ogg" type="audio/ogg">
</audio>
</body>
</html>