為什么計數器在一個間隔后不起作用
[英]Why counter is not working after one interval
問題描述
我想創建一個倒計時計數器。 我已經創建了一個計數器，但它不能正常工作，以及如何在一個間隔后重置 CSS 的 animation。
有jsfiddle的鏈接： [https://jsfiddle.net/waleedGRT/x4rcj068/10/](https://jsfiddle.net/waleedGRT/x4rcj068/10/)
提前謝謝你。
1 個解決方案
解決方案1
0 已采納 2019-10-20 12:00:05
不確定您正在尋找什么確切的功能，但這應該可以幫助您解決問題。 根據 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>
清除舊計數器后，間隔 id 計數器繼續增長
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.