Like 0
Fork 0

Last active 1745376926

adien's Avatar adien revised this gist 1745376926. Go to revision

1 file changed, 258 insertions

blink.html(file created)

@@ -0,0 +1,258 @@
1 + <!DOCTYPE html>
2 + <html lang="en">
3 + <head>
4 + <meta charset="UTF-8">
5 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 + <title>LED Blinking Duration Demo</title>
7 + <style>
8 + body {
9 + font-family: Arial, sans-serif;
10 + max-width: 800px;
11 + margin: 0 auto;
12 + padding: 20px;
13 + background-color: #f5f5f5;
14 + }
15 +
16 + .container {
17 + display: flex;
18 + justify-content: space-around;
19 + flex-wrap: wrap;
20 + gap: 20px;
21 + }
22 +
23 + .action-container {
24 + background-color: white;
25 + border-radius: 8px;
26 + padding: 20px;
27 + box-shadow: 0 2px 5px rgba(0,0,0,0.1);
28 + width: 300px;
29 + }
30 +
31 + h1 {
32 + text-align: center;
33 + color: #333;
34 + }
35 +
36 + h2 {
37 + color: #444;
38 + margin-top: 0;
39 + }
40 +
41 + .led {
42 + width: 80px;
43 + height: 80px;
44 + border-radius: 50%;
45 + background-color: #ccffcc;
46 + margin: 20px auto;
47 + box-shadow: 0 0 10px rgba(0,255,0,0.2);
48 + transition: all 0.1s ease;
49 + }
50 +
51 + .led.on {
52 + background-color: #00ff00;
53 + box-shadow:
54 + 0 0 10px rgba(0,255,0,0.8),
55 + 0 0 20px rgba(0,255,0,0.6),
56 + 0 0 30px rgba(0,255,0,0.4);
57 + }
58 +
59 + label {
60 + display: block;
61 + margin: 10px 0 5px;
62 + font-weight: bold;
63 + }
64 +
65 + input[type="range"] {
66 + width: 100%;
67 + }
68 +
69 + .value-display {
70 + text-align: right;
71 + font-size: 0.9em;
72 + color: #666;
73 + }
74 +
75 + button {
76 + background-color: #4CAF50;
77 + color: white;
78 + border: none;
79 + padding: 10px 15px;
80 + border-radius: 4px;
81 + cursor: pointer;
82 + margin-top: 15px;
83 + width: 100%;
84 + font-size: 16px;
85 + }
86 +
87 + button:hover {
88 + background-color: #45a049;
89 + }
90 + </style>
91 + </head>
92 + <body>
93 + <h1>LED Blinking Duration Demo</h1>
94 +
95 + <div class="container">
96 + <div class="action-container">
97 + <h2>Action 1: Quick Blinks</h2>
98 + <div id="led1" class="led"></div>
99 +
100 + <div class="controls">
101 + <label for="onTime1">ON Duration (ms): <span id="onTimeValue1" class="value-display">200</span></label>
102 + <input type="range" id="onTime1" min="50" max="1000" value="200" step="50">
103 +
104 + <label for="offTime1">OFF Duration (ms): <span id="offTimeValue1" class="value-display">300</span></label>
105 + <input type="range" id="offTime1" min="50" max="1000" value="300" step="50">
106 +
107 + <button id="toggleButton1">Start Blinking</button>
108 + </div>
109 + </div>
110 +
111 + <div class="action-container">
112 + <h2>Action 2: Slow Blinks</h2>
113 + <div id="led2" class="led"></div>
114 +
115 + <div class="controls">
116 + <label for="onTime2">ON Duration (ms): <span id="onTimeValue2" class="value-display">800</span></label>
117 + <input type="range" id="onTime2" min="50" max="2000" value="800" step="50">
118 +
119 + <label for="offTime2">OFF Duration (ms): <span id="offTimeValue2" class="value-display">800</span></label>
120 + <input type="range" id="offTime2" min="50" max="2000" value="800" step="50">
121 +
122 + <button id="toggleButton2">Start Blinking</button>
123 + </div>
124 + </div>
125 + </div>
126 +
127 + <script>
128 + // LED 1 elements
129 + const led1 = document.getElementById('led1');
130 + const onTime1 = document.getElementById('onTime1');
131 + const offTime1 = document.getElementById('offTime1');
132 + const onTimeValue1 = document.getElementById('onTimeValue1');
133 + const offTimeValue1 = document.getElementById('offTimeValue1');
134 + const toggleButton1 = document.getElementById('toggleButton1');
135 +
136 + // LED 2 elements
137 + const led2 = document.getElementById('led2');
138 + const onTime2 = document.getElementById('onTime2');
139 + const offTime2 = document.getElementById('offTime2');
140 + const onTimeValue2 = document.getElementById('onTimeValue2');
141 + const offTimeValue2 = document.getElementById('offTimeValue2');
142 + const toggleButton2 = document.getElementById('toggleButton2');
143 +
144 + // Variables to track intervals
145 + let interval1 = null;
146 + let interval2 = null;
147 + let led1State = false;
148 + let led2State = false;
149 +
150 + // Update display values for sliders
151 + onTime1.addEventListener('input', () => {
152 + onTimeValue1.textContent = onTime1.value;
153 + if (interval1) {
154 + stopBlink(1);
155 + startBlink(1);
156 + }
157 + });
158 +
159 + offTime1.addEventListener('input', () => {
160 + offTimeValue1.textContent = offTime1.value;
161 + if (interval1) {
162 + stopBlink(1);
163 + startBlink(1);
164 + }
165 + });
166 +
167 + onTime2.addEventListener('input', () => {
168 + onTimeValue2.textContent = onTime2.value;
169 + if (interval2) {
170 + stopBlink(2);
171 + startBlink(2);
172 + }
173 + });
174 +
175 + offTime2.addEventListener('input', () => {
176 + offTimeValue2.textContent = offTime2.value;
177 + if (interval2) {
178 + stopBlink(2);
179 + startBlink(2);
180 + }
181 + });
182 +
183 + // Toggle button handlers
184 + toggleButton1.addEventListener('click', () => {
185 + if (interval1) {
186 + stopBlink(1);
187 + toggleButton1.textContent = 'Start Blinking';
188 + } else {
189 + startBlink(1);
190 + toggleButton1.textContent = 'Stop Blinking';
191 + }
192 + });
193 +
194 + toggleButton2.addEventListener('click', () => {
195 + if (interval2) {
196 + stopBlink(2);
197 + toggleButton2.textContent = 'Start Blinking';
198 + } else {
199 + startBlink(2);
200 + toggleButton2.textContent = 'Stop Blinking';
201 + }
202 + });
203 +
204 + // Functions to start and stop blinking
205 + function startBlink(ledNum) {
206 + if (ledNum === 1) {
207 + led1State = true;
208 + led1.classList.add('on');
209 +
210 + interval1 = setInterval(() => {
211 + if (led1State) {
212 + // LED is on, turn it off
213 + led1.classList.remove('on');
214 + led1State = false;
215 + setTimeout(() => {
216 + if (interval1) { // Check if still blinking
217 + led1.classList.add('on');
218 + led1State = true;
219 + }
220 + }, parseInt(offTime1.value));
221 + }
222 + }, parseInt(onTime1.value) + parseInt(offTime1.value));
223 + } else {
224 + led2State = true;
225 + led2.classList.add('on');
226 +
227 + interval2 = setInterval(() => {
228 + if (led2State) {
229 + // LED is on, turn it off
230 + led2.classList.remove('on');
231 + led2State = false;
232 + setTimeout(() => {
233 + if (interval2) { // Check if still blinking
234 + led2.classList.add('on');
235 + led2State = true;
236 + }
237 + }, parseInt(offTime2.value));
238 + }
239 + }, parseInt(onTime2.value) + parseInt(offTime2.value));
240 + }
241 + }
242 +
243 + function stopBlink(ledNum) {
244 + if (ledNum === 1) {
245 + clearInterval(interval1);
246 + interval1 = null;
247 + led1.classList.remove('on');
248 + led1State = false;
249 + } else {
250 + clearInterval(interval2);
251 + interval2 = null;
252 + led2.classList.remove('on');
253 + led2State = false;
254 + }
255 + }
256 + </script>
257 + </body>
258 + </html>
Newer Older

Powered by Opengist ⋅ Load: 24ms⋅

English