Здравствуйте! Пишу мини-игру, хочу выяснить один вопрос, но для начала покажу код:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: cursive;
}
#stop {
display: none;
}
.square1, .square2 {
width: 100px;
height: 100px;
background: red;
position: fixed;
}
.square1 {
top: 100px;
animation: s1 linear infinite 7s;
z-index: 1;
}
.square2 {
top: 200px;
animation: s2 linear infinite 7s;
}
@keyframes s1 {
0% {
left: 0px;
}
50% {
left: calc( 100% - 100px );
}
100% {
left: 0px;
}
}
@keyframes s2 {
0% {
right: 0px;
}
50% {
right: calc( 100% - 100px );
}
100% {
right: 0px;
}
}
label {
border: 1px solid black;
border-radius: 3px;
}
.modalbox {
width: 300px;
height: 300px;
border: 1px solid black;
background: lightgrey;
z-index: 2;
position: fixed;
border-radius: 50px 50px 50px 50px / 10px 10px 10px 10px;
left: calc( 50% - 150px );
top: calc( 50% - 150px );
}
.ml {
width: 200px;
height: 40px;
text-align: center;
border: 1px solid black;
border-radius: 10px 10px 10px 10px / 30px 30px 30px 30px;
position: absolute;
left: calc( 50% - 100px );
top: calc( 50% - 20px );
}
#stop ~ .modalbox {
opacity: 0;
}
#stop:checked ~ .modalbox {
opacity: 1;
}
#stop ~ * {
animation-play-state: running;
transition: 0.5s;
}
#stop:checked ~ * {
animation-play-state: paused;
transition: 0.5s;
}
</style>
<script>
function init()
{
sec = 0;
setInterval(tick, 1000);
}
function tick()
{
sec++;
document.getElementById("timer").
childNodes[0].nodeValue = sec;
}
</script>
</head>
<body onload="init()">
<input type="checkbox" id="stop"><br>
<div class="timer_wrapper"><span id="timer">0</span> сек идёт игра</div>
<label for="stop">Стоп</label>
<div class="square1"></div>
<div class="square2"></div>
<div class="modalbox">
<label for="stop"><div class="ml">Продолжить игру</div></label>
</div>
<script>
document.getElementById("stop").checked = false;
</script>
</body>
</html>
Как видно, при нажатии на кнопку "Стоп" происходит остановка анимации блоков, но при этом таймер не останоавливается. Попытался прикрутить функцию типа if (stop.checked = true) {...}, но не прижилось. Не могли бы вы мне помочь остановить таймер? Вопрос простецкий, конечно, но реализовать не получилось
