Wecker

Ein Wecker in JavaScript, für den Fall das die Pizza noch im Ofen ist

» Wecker zeigen
Der Wecker öffnet sich in einem neuen Fenster/Tab.
Die Bedienung des Weckers dürfte selbsterklärend sein!

Quelltext „wecker.htmKopierenAusblendenZeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Wecker</title>

  <style>
  body {
   font-family: Verdana, Arial, Sans-Serif;
   font-size: 1rem;
   text-shadow: 1px 1px 1px #C0C0C0;
   background-color: Black;
  }

  table#wecker {
   background-color: #EBEBEB;
   border: double 4px #FFD700;
   border-radius: 20px;
   padding: 5px;
   margin: Auto;
   margin-top: 25px;
   cursor: Default;
   box-shadow:  0.5em -0.5em 0.4em Red, 0.5em 0.5em 0.4em Gold,
    -0.6em 0.5em 0.4em Lime, -0.7em -0.7em 0.20em Blue;
  }

  table td,
  table th {
   padding: 5px;
  }

  table th {
   background-color: #e1e1e1;
   font-weight: Normal;
  }

  input[type="number"] {
   width: 40px;
  }

  input[readonly="readonly"] {
   background: #F5F5F5;
   border: Solid 1px #C0C0C0;
   cursor: Default;
  }
  </style>


  <script>
  /* Wecker
   * 22.10.2018
   * werner-zenk.de */

   var AZ = 1, set = 0, AlarmLaeuft = false, UhrTimerID = null;

  function ZeigeZeit() {
   var Jetzt = new Date();
   document.Uhr.Uhrstunden.value = ZZ(Jetzt.getHours());
   document.Uhr.Uhrminuten.value = ZZ(Jetzt.getMinutes());
   document.Uhr.Uhrsekunden.value = ZZ(Jetzt.getSeconds());
   UhrTimerID = setTimeout("ZeigeZeit()", 1000);

   if (set == 0) {
    var Jetzt = new Date();
    document.Uhr.Alarmstunden.value = ZZ(Jetzt.getHours());
    document.Uhr.Alarmminuten.value = ZZ(Jetzt.getMinutes());
    set = 1;
   }

   var st = document.Uhr.Uhrstunden.value;
   var mi =document.Uhr.Uhrminuten.value;
   var se = document.Uhr.Uhrsekunden.value;
   var ast = document.Uhr.Alarmstunden.value;
   var ami = document.Uhr.Alarmminuten.value;
   var ase = document.Uhr.Alarmsekunden.value;

   if (AlarmLaeuft) {
    if (st == ast) {
     if (mi == ami) {
      if (se == ase) {
       if (document.Uhr.Alarmton.checked) {
        document.getElementById("sound").play();
        document.getElementById("sound").loop = true;
       }
        alert("Alarmzeit: " +
        ZZ(Jetzt.getHours()) + "." +
        ZZ(Jetzt.getMinutes()) + "." +
        ZZ(Jetzt.getSeconds()) + "\n=> " +
        document.Uhr.alarm.value);
        StopAlarm();
        AZ=1;
      }
     }
    }
   }
  }

  function Alarm() {
   AlarmLaeuft = true;
   document.Uhr.Alarm.value = " \u2714 Alarm ";
  }

  function StopAlarm() {
   AlarmLaeuft = false;
   document.Uhr.Alarm.value = " Alarm ";
   document.getElementById("sound").pause();
  }

  function AlarmOn() {
   AZ++;
   if (AZ < 3) {
    Alarm();
   }
   if (AZ == 3) {
    StopAlarm();
    AZ=1;
   }
  }

  function ZZ(x) {
   return(((x < 10) ? "0" : "") + x);
  }

  function AlarmTest() {
   document.getElementById("sound").play();
  }

  window.addEventListener("load", ZeigeZeit);
  </script>


 </head>
<body>

<form name="Uhr">
 <table id="wecker">
  <tr>
   <td>
    Uhrzeit:
    <input type="text" name="Uhrstunden" size="2" readonly="readonly"> :
    <input type="text" name="Uhrminuten" size="2" readonly="readonly"> :
    <input type="text" name="Uhrsekunden" size="2" readonly="readonly">
   </td>
   <th>
    <label title="Signalton abspielen"><input type="checkbox" name="Alarmton" checked="checked"> Signalton</label>
   </th>
  </tr>
  <tr>
   <td colspan="2">
    <input type="text" name="alarm" value="Die Pizza ist fertig!" onClick="this.select()" placeholder="Nachricht eingeben ..." size="55" maxlength="38">
   </td>
  </tr>
  <tr>
   <td>
    Alarm:&nbsp; 
    <input type="number" name="Alarmstunden" size="2" min="0" max="23" step="1" required="required" title="Stunden (0-23)"> :
    <input type="number" name="Alarmminuten" size="2" min="0" max="59" step="1" required="required" title="Minuten (0-59, zweistellige Zahlen eingeben!)"> :
    <input type="number" name="Alarmsekunden" size="2" value="59" min="0" max="59" step="1" required="required" title="Sekunden (0-59, zweistellige Zahlen eingeben!)">
   </td>
   <th>
    <input type="button" name="Alarm" onclick="AlarmOn();" value=" Alarm " title="Alarm Ein/Aus">
    <input type="button" name="Test" onclick="AlarmTest();" value="&#9658;" title="Alarm testen">
   </th>
  </tr>
 </table>
 <audio id="sound">
<source src="../../scripte/audio/sierene.mp3" type="audio/mpeg">
</audio>
</form>

</body>
</html>

 

Fenster aufrufen

<script>
function wecker() {
 window.open("wecker.htm", "wecker", "width=450, height=180, left=200, top=300");
}
</script>

<a href="javascript:wecker()">Wecker zeigen</a>