Alarm / Wecker / Erinnerung - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App

Besucher Statistik
» 1 Online
» 3 Heute
» 47 Gestern
» 380 Woche
» 1040 Monat
» 15303 Jahr
» 301217 Gesamt
Record: 1144 (01.02.2020)
Gesamt Downloads:
Direkt zum Seiteninhalt

Alarm / Wecker / Erinnerung

Scripte > Daytime

Stress am PC oder Laptop - einfach wecken lassen!

Eingeschlafen bei der Arbeit, das kann passieren. Stell' Dir doch einfach einen Wecker oder für eine andere Terminerinnerung.
Ein Wecker, sonstiger Alarm oder nur eine Terminvergabe in Javascript, der in der Datei 'wecker.css' der Homepage in Form und Farbe angepasst werden kann.
Einfach die Alarmzeit und den Text für die Erinnerung eingeben, die Auswahl mit Ton oder Licht(effekten) treffen und Alarm starten.
Neben dem Start-Button befindet sich ein Pfeil-Button zum testen.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>...</head> und HTML-Code in den BODY-Bereich <body>...</body> der aufrufenden Datei einfügen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.
Download Button
Downloads:
Uhrzeit  : :
Aufruf im Popup-Fenster:
Wecker anzeigen
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj128_0/wecker.css" />
<script src="wsX5Obj/Obj128_0/wecker.js"></script>
Code für den <BODY> Bereich
<form>
<table id="tabelle">
<tr>
<td title="Aktuelle Uhrzeit">
Uhrzeit&nbsp;
<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">mit Ton</label>
</span>
<span title="Licht einschalten">
<input type="radio" name="option" id="Lichter">
<label for="Lichter">mit Licht</label>
</span>
</th>
</tr>
<tr>
<td colspan="2">
<span title="Text für Weckruf eingeben ...">
<input type="text" id="alarm" value="" placeholder="Text f&uuml;r Erinnerung 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="wsX5Obj/Obj128_0/wecker.ogg" type="audio/ogg">
</audio>

Link für Popup-Fenster:
<script> 
function wecker() {  
window.open("wsX5Obj/Obj128_0/wecker.html", "wecker", "width=500, height=200, left=200, top=300"); 
} 
</script>  
<a href="javascript:wecker()">Wecker anzeigen</a>
Code Datei "wecker.css"
/* Tabelle */
table#tabelle {
width: 400px;
color: #876835;
background-color: #EEF6E9;
box-shadow: inset 0px 0px 8px 5px #876835;
/* border: 1px solid #876835; */
border-radius: 15px;
-moz-border-radius: 15px;
margin: auto;
margin-top: 25px;
margin-bottom: 25px;
cursor: default;
}
table#tabelle td,
table#tabelle th { padding: 10px; }
table#tabelle th { font-weight: normal; }
/* Formular */
form { white-space: nowrap; }
input.eingabe {
width: 30px;
font-size: 1rem;
color: #876835;
background-color: #FFF!important;
padding-left: 15px;
letter-spacing: 2px;
}
input#alarm {
font-size: 1rem;
color: #876835;
background-color: #FFF!important;
letter-spacing: 2px;
padding-left: 15px;
width: 350px;
}
label,
input[type="button"] { cursor: pointer; }
input[type="button"],
input[type="text"] { border: 1px solid #876835; letter-spacing: 2px; transition: box-shadow 0.3s; }
input[type="text"]:invalid { background-color: #FFF!important; }
input[type="button"] {
color: #876835;
padding: 2px 4px 2px 4px;
background-color: #D2E7C5!important;
transition: background-color 0.4s;
}
input[type="button"]:hover { background-color: #B4DA9F!important; }
input[type="button"]:focus,
input[type="text"]:focus { border:0; outline:0; border: 1px solid #876835; box-shadow: 0px 0px 3px 0px #876835; }
input[readonly="readonly"],
input[readonly="readonly"]:focus {
width: 30px;
color: #876835;
font-size: 1rem;
background-color: #FFF!important;
border: 1px solid #876835;
box-shadow: none;
padding-left: 15px;
cursor: default;
}
input[type="radio"]:checked + label { color: #876835; }
/* 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; }
}  
Code Datei "wecker.js"
var AZ = 1, set = 0, AlarmLaeuft = false, UhrTimerID = null;
// Zeit anzeigen
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.
}
}
}
}
}
// Alarm
function Alarm() {
AlarmLaeuft = true;
document.getElementById("Alarmbutton").value = " \u2714 Alarm ";
}
// Alarm Stopp
function StopAlarm() {
AlarmLaeuft = false;
document.getElementById("Alarmbutton").value = " \u2718 Alarm ";
document.getElementById("sound").pause();
document.getElementById("tabelle").classList.remove("LichterStart");
}
// Alarm Ein
function AlarmOn() {
window.localStorage.setItem("Nachricht", document.getElementById("alarm").value);
AZ++;
if (AZ < 3) {
Alarm();
}
if (AZ == 3) {
StopAlarm();
AZ=1;
}
}
// Zwei Ziffern
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");
}
});
Feedbacks zu ""

Keine Kommentare gefunden.

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


          CAPTCHA
          Vielen Dank für Dein Feedback.
          Logo Host Europe
          Button Spenden

          © 2009 - 2021

          Hosting by
          Zurück zum Seiteninhalt