[英]how to increment the value of a progress bar when press a button javascript
這是一個非常簡單的程序，當您按下按鈕時，進度欄中的值會增加，直到達到100％。
<!DOCTYPE html> <html> <title>example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <div class="w3-container"> <h2>dynamic Progress bar</h2> <p>example:</p> <div class="w3-light-grey"> <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div> </div> <br> <button class="w3-button w3-green" onclick="move()">Click Me</button> </div> <script> function move() { var elem = document.getElementById("myBar"); var width = 20; var id = setInterval(frame, 10); function frame() { if (width >= 100) { clearInterval(id); } else { width++; elem.style.width = width + '%'; elem.innerHTML = width * 1 + '%'; } } } </script> </body> </html>
當您按下按鈕時，進度條內的任何值（例如10％20％）都將達到100％。 我希望當我按下按鈕時，該值僅增加一定量（例如，如果值為10％，而我按下按鈕時，我希望該值將達到20％）。
謝謝大家！！
一種解決方案是刪除setInterval，因為它將再次調用該函數，而無需單擊按鈕。
該代碼僅在函數外部定義寬度，然后在每次單擊時將寬度增加10並更改進度欄樣式。
var width = 20; function move() { var elem = document.getElementById("myBar"); if (width < 100) { width+=10; elem.style.width = width + '%'; elem.innerHTML = width * 1 + '%'; } }
<!DOCTYPE html> <html> <title>example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>dynamic Progress bar</h2> <p>example:</p> <div class="w3-light-grey"> <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div> </div> <br> <button class="w3-button w3-green" onclick="move()">Click Me</button> </div> </body> </html>
您可以做的是將width的初始值設置為20 ，然后在setInterval回調中將其增加直到40 （可以通過將其余數乘以20來檢查它），依此類推。
if(width % 20 === 0 ) clearInterval(id)
這是片段
var elem = document.getElementById("myBar"); var width = 20; var id = null; var click = false; function move() { if(!click){ click = true; id = setInterval(function() { width++; if (width > 100) width = 20; if (width % 20 === 0){ clearInterval(id); click = false; } elem.style.width = width + '%'; elem.innerHTML = width * 1 + '%'; }, 30); } }
<!DOCTYPE html> <html> <title>example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>dynamic Progress bar</h2> <p>example:</p> <div class="w3-light-grey"> <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div> </div> <br> <button class="w3-button w3-green" onclick="move()">Click Me</button> </div> </body> </html>
為了獲得理想的結果，您應該在width為10的倍數時調用clearInterval(id) 。這將停止調用frame()函數，直到再次調用move()函數（當用戶單擊按鈕時）。
要確定寬度是否為10的倍數，可以使用余數運算符：
if (width % 10 == 0) {
clearInterval(id);
}
width也應該是位於move()函數外部的全局變量，以便可以在兩次單擊之間跟蹤進度。
var width = 20; var id = null; function move() { if (width == 100) { return; } var elem = document.getElementById("myBar"); if (id) { clearInterval(id); } id = setInterval(frame, 10); function frame() { width ++; elem.style.width = width + '%'; elem.innerHTML = width * 1 + '%'; if (width % 10 == 0) { clearInterval(id); } } }
<!DOCTYPE html> <html> <title>example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>dynamic Progress bar</h2> <p>example:</p> <div class="w3-light-grey"> <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div> </div> <br> <button class="w3-button w3-green" onclick="move()">Click Me</button> </div> </body> </html>
這是通過最少的更改即可完成的快速，簡單的方法，首先，您需要聲明一個全局變量，該變量包含“ begin-to-be”的值。 動畫完成后，這是進度條的期望寬度。
接下來，為了清楚起見，我將'width'變量的名稱更改為widthAnim 。 當widthValue的值更改時， widthAnim將遞增直到達到相同值。
將widthIncrement變量更改更改為所需的任何值，並將其增加該數量。
最后，我在frame函數中添加了額外的條件，以確保它僅以widthIncrement的增量遞增。
var widthValue = 20; function move() { var elem = document.getElementById("myBar"); var widthAnim = widthValue; var id = setInterval(frame, 10); var widthIncrement = 10; widthValue = widthAnim + widthIncrement; function frame() { if (widthAnim >= widthValue || widthValue > 100) { clearInterval(id); } else { widthAnim++; elem.style.width = widthAnim + '%'; elem.innerHTML = widthAnim * 1 + '%'; } } }
<!DOCTYPE html> <html> <title>example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>dynamic Progress bar</h2> <p>example:</p> <div class="w3-light-grey"> <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div> </div> <br> <button class="w3-button w3-green" onclick="move()">Click Me</button> </div> </body> </html>
我修改了一些代碼，當附加100％時，它將清除計數器並從0％重新開始。
也許可以幫助您:)
<!DOCTYPE html> <html> <head> <title>example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <div class="w3-container"> <h2>dynamic Progress bar</h2> <p>example:</p> <div class="w3-light-grey"> <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div> </div> <br> <button class="w3-button w3-green" onclick="move()">Click Me</button> </div> <script> function move() { var elem = document.getElementById("myBar"); var width = parseInt(elem.innerHTML); var aim = width + 10; var id = setInterval(frame, 10); function frame() { if (width >= aim) { clearInterval(id); } else if(width >= 100) { width=0; aim = 10; elem.style.width = width + '%'; elem.innerHTML = width * 1 + '%'; } else { width++; elem.style.width = width + '%'; elem.innerHTML = width * 1 + '%'; } } } </script> </body> </html>
單擊增量按鈕時，進度條的寬度將發生變化。 使用Javascript
[英]Progress Bar width to change when increment button clicked. Javascript
如何在pointerdown和pointerup上增加和減少進度條值？
[英]How do I increment and decrement a progress bar value on pointerdown & pointerup?
如何創建可點擊的進度條增量和 20% 的進度條減量值
[英]How to create clickable progress bar increment and decrement value of progress bar with 20%
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.