-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathUntitled-1.html
129 lines (107 loc) · 3.19 KB
/
Untitled-1.html
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
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
#clock {
font-size: 5em;
margin-top: 100px;
}
#signature {
font-size: 0.5em;
color: gray;
}
#clown {
position: absolute;
transition: all 0.5s;
}
#darkmode {
position: fixed;
top: 10px;
right: 10px;
font-size: 2em;
cursor: pointer;
}
</style>
</head>
<body>
<div id="clock"></div>
<div id="signature">happy clown</div>
<span id="clown" role="img" aria-label="clown">🤡</span>
<span id="darkmode" role="img" aria-label="dark mode">🌙</span>
<button id="rainbow" role="img" aria-label="rainbow">🌈</button>
<script>
// Get the elements
let clock = document.getElementById("clock");
let signature = document.getElementById("signature");
let clown = document.getElementById("clown");
let darkmode = document.getElementById("darkmode");
// ses dosyası olayı
let honk = new Audio("honk.mp3");
// saati saniye başı güncelle
setInterval(updateClock, 1000);
// emojiyi 5 saniyede bir güncelle
setInterval(updateClown, 5000);
// emojiyi tıklanabilir yap
clown.addEventListener("click", playHonk);
// dark mode'u tıklanabilir yap
darkmode.addEventListener("click", toggleDarkMode);
// saati güncelle
function updateClock() {
// saat kaç amk
let date = new Date();
// format
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
// düzenlemece
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
// saat
clock.innerHTML = hours + ":" + minutes + ":" + seconds;
}
// emojinin yeri boyutu
function updateClown() {
// pencere boyutu
let width = window.innerWidth;
let height = window.innerHeight;
// random tp
let x = Math.floor(Math.random() * width);
let y = Math.floor(Math.random() * height);
// random boyut
let size = Math.floor(Math.random() * 151) + 50;
// bilmiyom
clown.style.left = x + "px";
clown.style.top = y + "px";
clown.style.transform = "scale(" + size / 100 + ")";
}
// düt düt
function playHonk() {
// oyna devam
honk.play();
}
// aç kapa artema
function toggleDarkMode() {
// şu anki arkaplanın rengini al
let bgColor = window.getComputedStyle(document.body).backgroundColor;
// beyazsa siyaha siyahsa beyaza dönüştür
if (bgColor === "rgb(255, 255, 255)") {
document.body.style.backgroundColor = "black";
clock.style.color = "white";
signature.style.color = "white";
darkmode.innerHTML = "🌞";
darkmode.setAttribute("aria-label", "light mode");
} else {
document.body.style.backgroundColor = "white";
clock.style.color = "black";
signature.style.color = "gray";
darkmode.innerHTML = "🌙";
darkmode.setAttribute("aria-label", "dark mode");
}
}
</script>
</body>
</html>