Html/Javascript Digital Uhr mit Datum und Alarmfunktion an bestimmten Tagen und Uhrzeiten
Mein Wunsch ist es, das auf einer Webseite oben rechts die Uhrzeit, darunter das Datum angezeigt wird.
Das ist jetzt nicht so wild, dafür gibt es genug fertige Samples die man übernehmen kann.
Mein Wunsch ist es aber das an bestimmten Tagen wie z.B. Donnerstag um 21 Uhr ein Pop-up-Fenster aufgeht. Am besten ein komplett neues Fenster.
Soll einfach ganz frech aufgehen.
Also Donnerstag um 21 Uhr soll gestartet werden
Wisst ihr wonach ich da suchen müsste, um an sowas ran zu kommen. HTML clock with Alarm Funktion ist irgendwie nicht das wonach ich suche.
Javascript clock with Kalender Funktion gibt auch nicht das, was ich brauche. Mit den richtigen Begriffen könnte ich mich da rein fuchsen.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<style>
body {
height: 100%;
overflow:hidden;
padding:0 20%;
max-width:500px;
background: #333;
text-align: center;
}
div{
display:flex;
}
div *{
flex:1;
}
h1 {
font-size: 4em;
color: #fff;
}
input,select ,option{
cursor: pointer;
margin: 0 5px;
overflow:hidden;
padding: 10px 0px;
text-align:center;
background:#333;
border: 1px solid #ccc;
border-radius: 8px;
outline: 0;
color: #fff;
margin-bottom:20px;
transition: all ease 300ms;
}
button{
cursor: pointer;
margin: 0 5px;
padding: 10px 30px;
background: transparent;
border: 1px solid #ccc;
border-radius: 8px;
outline: 0;
color: #fff;
transition: all ease 300ms;
}
button:hover{
color: #333;
background: #fff;
}
.hide {
display: none;
}
input{
width:80px;
}
@keyframes wecker {
0%, 50%, 100% {
transform: rotate(0deg);
font-size:70px;
color: #fff;
}
25% {
transform: rotate(20deg);
font-size:90px;
color: #FF16D8;
}
75% {
transform: rotate(-20deg);
font-size:90px;
color: #FF16D8;
}
}
@keyframes weckerBox {
0%, 50%, 100% {
box-shadow: inset 0 0 0px yellow;
background-color: #FF0000;
}
25%, 75% {
box-shadow: inset 0 0 30px yellow;
background-color: aqua;
}
}
body.wecken{
animation: weckerBox 2s infinite linear;
}
#clock.wecken{
animation: wecker 2s infinite linear;
}
input:disabled,select:disabled{
cursor:not-allowed;
border:1px solid red;
}
input[type=number]{
position: relative;
padding: 5px;
padding-right: 25px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
opacity: 1;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
-webkit-appearance: inner-spin-button !important;
width: 25px;
position: absolute;
top: 0;
right: 0;
height: 100%;
}
</style>
<h1 id="clock" class="clock"></h1>
<div>
<select id="day">
<option value="0">So</option>
<option value="1">Mo</option>
<option value="2">Di</option>
<option value="3">Mi</option>
<option value="4">Do</option>
<option value="5">Fr</option>
<option value="6">Sa</option>
</select>
<div class="number-wrapper"><input type="number" id="hours"></div>
<div class="number-wrapper"><input type="number" id="minutes"></div>
<div class="number-wrapper"><input type="number" id="seconds"></div>
</div>
<button id="startstop">Set Alarm</button>
</div>
</div>
<script>
var time, alarm, currentH, currentM,
activeAlarm = false,
sound = new Audio("/media/316847_4939433-lq.mp3");
body=document.getElementsByTagName('body')[0];
ho=document.getElementById('hours');
mi=document.getElementById('minutes');
se=document.getElementById('seconds');
da=document.getElementById('day');
cl=document.getElementById('clock');
aa=document.getElementById('startstop');
sound.loop = true;
function displayTime() {
var now = new Date();
time = now.toLocaleTimeString();
cl.textContent = time;
if (time === alarm) {
var dt =new Date();
if(da.value==dt.getDay()){
sound.play();
body.classList.add('wecken');
cl.classList.add('wecken');
}
}
setTimeout(displayTime, 1000);
}
displayTime();
aa.addEventListener('click',function(){
console.log(ho,mi,se,da)
if (activeAlarm === false) {
ho.disabled = true;
mi.disabled = true;
se.disabled = true;
da.disabled = true;
alarm = ho.value + ":" + mi.value + ":" + se.value;
aa.textContent = "Clear Alarm";
activeAlarm = true;
} else {
ho.disabled = false;
mi.disabled = false;
se.disabled = false;
da.disabled = false;
sound.pause();
alarm = "00:00:00";
body.classList.remove('wecken');
cl.classList.remove('wecken');
aa.textContent = "Set Alarm";
activeAlarm = false;
}
})
</script>