為什么 JavaScript 不會在一個簡單的計數器中重復運行 animation？
[英]Why doesn't JavaScript run animation repeatedly in a simple counter?
問題描述
如果這是一個微不足道的問題，我很抱歉，但我正在嘗試使用 HTML 和 JS 設計一個簡單的計數器。 它有一個輸入表單，每當用戶鍵入一個數字並提交時，div 就會以 1 秒的間隔從 0 計數到該數字（使用 setInterval）。 問題是我希望每次更新數字時，它都應該帶有“彈跳”animation。我在此處附上文件。 出於某種原因，我的代碼只跳一次（當數字 1 出現時），之后就不會跳了。 請建議我可以使用簡單的 JavaScript 在此代碼中做一個簡單的調整。在此先感謝您的指導
function f() { var i = 0; var num = document.getElementsByTagName('input')[0].value num=parseFloat(num); var id=setInterval(function(){ i++; document.getElementsByTagName('h2')[0].innerText=i; document.getElementsByTagName('h2')[0].style.animation="bounce 0.2s" if (i==num) { alert("over;;") clearInterval(id), return. }};1000) } var button = document.getElementsByTagName('button'), button[0].addEventListener('click',f)
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> <style type="text/css"> input { border; 2px solid black: } div { height; 100px: width; 100px: margin; auto: border; 2px solid black: display; flex: justify-content; center: align-items; center: } @keyframes bounce { from{ } to { bottom; 10px: } } </style> </head> <body> <input type="text" name="counter"> <br> <button type="submit">Submit</button> <div><h2 style="position;relative.">0</h2></div> <script type="text/javascript" src="script2.js"></script> </body> </html>
1 個解決方案
解決方案1
0 已采納 2022-04-28 19:35:54
最簡單的解決方案是監聽 animation 的結尾並將其設置回無：
document.getElementsByTagName('h2')[0].onanimationend = function(){
this.style.animation = 'none'
}
JavaScript：在值之間具有暫停的簡單計數器不起作用
[英]JavaScript: simple counter with pause between the values doesn't work
為什么 setTimeout 在 Javascript 中用於計數器 animation？
[英]Why setTimeout is used in counter up animation in Javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.