Stell dir ein Wecker und lass dich mit Sound oder Licht wecken
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 </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>