本文介绍了为什么一个间隔后计数器不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建一个计时计数器.我已经创建了一个计数器，但是它不能正常工作，以及如何在一个间隔后重置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的链接:[jsfiddle/waleedGRT/x4rcj068/10/](jsfiddle/waleedGRT/x4rcj068/10/)
There is the link of the jsfiddle: [jsfiddle/waleedGRT/x4rcj068/10/](jsfiddle/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="cdnjs.cloudflare/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>
更多推荐
为什么一个间隔后计数器不工作
发布评论