Почему счетчик не работает после одного интервала - PullRequest
Новая
       1

Почему счетчик не работает после одного интервала

0 голосов
/ 20 октября 2019

Я хочу создать счетчик времени. Я уже создал счетчик, но он не работает должным образом и как сбросить анимацию CSS после одного интервала.

Есть ссылка на jsfiddle: [https://jsfiddle.net/waleedGRT/x4rcj068/10/](https://jsfiddle.net/waleedGRT/x4rcj068/10/)

Заранее спасибо.

1 Ответ

0 голосов
/ 20 октября 2019

Не уверен, какую именно функциональность вы ищете, но это должно решить вашу проблему. РЕДАКТИРОВАТЬ обновленный код согласно ответу OP. 

function counterA(valuea) {
  var tempA = valuea;
  setInterval(function() {
    if (tempA < 1) {
      window.history.go(0);
    }
    $('#time').text(tempA);
    tempA--;
  }, 1000);
}

$(document).ready(function() {
  counterA(11);
});
.wrapper {
  margin: 50px;
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: relative
}

.right {
  border: #3f85a3 solid 15px;
  height: 180px;
  width: 180px;
  border-radius: 120px;
  border-top-color: transparent;
  border-left-color: transparent;
  position: absolute;
  transform: rotate(-45deg);
  animation: rota2 12000ms linear;
  -moz-animation: rota2 12000ms linear;
  -o-animation: rota2 12000ms linear;
  -webkit-animation: rota2 12000ms linear;
}

@keyframes rota2 {
  from {
    transform: rotate(-225deg);
  }
  to {
    transform: rotate(-45deg);
  }
}

@-o-keyframes rota2 {
  from {
    transform: rotate(-225deg);
  }
  to {
    transform: rotate(-45deg);
  }
}

@-moz-keyframes rota2 {
  from {
    transform: rotate(-225deg);
  }
  to {
    transform: rotate(-45deg);
  }
}

@-webkit-keyframes rota2 {
  from {
    transform: rotate(-225deg);
  }
  to {
    transform: rotate(-45deg);
  }
}

.left {
  border: #3f85a3 solid 15px;
  height: 180px;
  width: 180px;
  border-radius: 120px;
  border-bottom-color: transparent;
  border-right-color: transparent;
  position: absolute;
  transform: rotate(315deg);
  animation: rota 24000ms linear;
  -o-animation: rota 24000ms linear;
  -moz-animation: rota 24000ms linear;
  -webkit-animation: rota 24000ms linear;
}

@keyframes rota {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(315deg);
  }
}

@-o-keyframes rota {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(315deg);
  }
}

@moz-keyframes rota {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(315deg);
  }
}

@-webkit-keyframes rota {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(315deg);
  }
}

.middle {
  color: #0987bc;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 180px;
  height: 180px;
  left: 15px;
  top: 15px;
  border-radius: 150px;
  position: relative;
  z-index: 4;
}

.popover {
  background: white;
  width: 80px;
  height: 162px;
  position: absolute;
  top: -3px;
  left: -3px;
  opacity: 0;
  z-index: 2;
  animation: popover 0ms linear;
}

@keyframes popover {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes popover {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes popover {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes popover {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#time {
  font-size: 30px;
}

#timer {
  font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Round E&D</title>
</head>

<body>
  <div>
    <div class="wrapper">
      <div class="right"></div>
      <div class="left"></div>
      <div class="middle">
        <p id="counter"><br />
          <span id="counter">
              <div>
                <span id="timer">
                  0:<span id="time">12</span>
          </span>
      </div>

      </span>
      </p>
    </div>
    <div class="popover"></div>
  </div>

  </div>


</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...