为什么一个间隔后计数器不工作 [英] Why counter is not working after one interval
本文介绍了为什么一个间隔后计数器不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建一个计时计数器.我已经创建了一个计数器，但是它不能正常工作，以及如何在一个间隔后重置CSS动画.
I want to create a time down counter. I already created a counter but it is not working properly and how to reset animation of CSS after one interval.
有jsfiddle的链接:[https://jsfiddle.net/waleedGRT/x4rcj068/10/](https://jsfiddle.net/waleedGRT/x4rcj068/10/)
There is the link of the jsfiddle: [https://jsfiddle.net/waleedGRT/x4rcj068/10/](https://jsfiddle.net/waleedGRT/x4rcj068/10/)
提前谢谢您.
推荐答案
不确定您要寻找的确切功能是什么，但这应该可以解决您的问题.根据OP响应 EDIT 更新了代码.
Not sure what exact functionality you're looking for, but this should get you past your problem. EDIT updated code as per OP response.
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>
这篇关于为什么一个间隔后计数器不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
