fix: timeout overlapping
This commit is contained in:
parent
f04948e089
commit
7d7b6d5667
11
index.html
11
index.html
@ -116,6 +116,7 @@
|
|||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
let timeoutSeconds = 60;
|
let timeoutSeconds = 60;
|
||||||
|
let timeoutId = null;
|
||||||
let image_position = '';
|
let image_position = '';
|
||||||
function updateImage() {
|
function updateImage() {
|
||||||
const img = document.querySelector('img');
|
const img = document.querySelector('img');
|
||||||
@ -154,8 +155,10 @@
|
|||||||
start.classList.add('removed');
|
start.classList.add('removed');
|
||||||
timeoutInput.classList.add('hidden');
|
timeoutInput.classList.add('hidden');
|
||||||
timeoutInputLabel.classList.add('hidden');
|
timeoutInputLabel.classList.add('hidden');
|
||||||
|
if (timeoutId) {
|
||||||
setTimeout(() => {
|
clearTimeout(timeoutId);
|
||||||
|
}
|
||||||
|
timeoutId = setTimeout(() => {
|
||||||
img.classList.add('bw');
|
img.classList.add('bw');
|
||||||
start.classList.remove('removed');
|
start.classList.remove('removed');
|
||||||
next.classList.add('removed');
|
next.classList.add('removed');
|
||||||
@ -174,10 +177,6 @@
|
|||||||
<img id="pantomime-img" class="hidden" src="animals.png" alt="Pantomime Image" />
|
<img id="pantomime-img" class="hidden" src="animals.png" alt="Pantomime Image" />
|
||||||
</div>
|
</div>
|
||||||
<button type="button" id="button-start" onclick="handleClick()">
|
<button type="button" id="button-start" onclick="handleClick()">
|
||||||
<!-- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"> -->
|
|
||||||
<!---->
|
|
||||||
<!-- <path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z" /> -->
|
|
||||||
<!-- </svg> -->
|
|
||||||
<svg id="svg-next" class="removed" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="18rem"
|
<svg id="svg-next" class="removed" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="18rem"
|
||||||
fill="#e3e3e3">
|
fill="#e3e3e3">
|
||||||
<path d="M660-240v-480h80v480h-80Zm-440 0v-480l360 240-360 240Zm80-240Zm0 90 136-90-136-90v180Z" />
|
<path d="M660-240v-480h80v480h-80Zm-440 0v-480l360 240-360 240Zm80-240Zm0 90 136-90-136-90v180Z" />
|
||||||
|
Loading…
x
Reference in New Issue
Block a user