JavaScript：在進度欄上停止動畫
[英]JavaScript: Stop animation on on Progress Bar
問題描述
我需要嘗試執行“停止自動進度”按鈕的以下代碼，需要一些幫助。
單擊此按鈕時，它應導致進度條的增量動畫停止，但是我不確定如何實現這一點。
以下代碼是我到目前為止所擁有的-預先感謝您的幫助：
//Get Current Value of attributes function getProgress() { return document.getElementById("progressbar").getAttribute("aria-valuenow"); return document.getElementById("progressbar").getAttribute("style","width:"); return document.getElementById("progressbar").innerHTML; } //Set value of attributes function setProgress(value) { document.getElementById("progressbar").setAttribute("aria-valuenow",value); document.getElementById("progressbar").setAttribute("style","width: " +value+ "%"); document.getElementById("progressbar").innerHTML = (value+ "%"); } //Call get function assign a variable to this, When value is less than 100 value increases by 1. function increment() { var i = getProgress(); if(i < 100){ i++; setProgress(i); }else{ alert("Progress Complete!"); //Alert presents itself once the value reaches max value. } } //Decrease current value by -1. function decrement() { var d = getProgress(); setProgress(d - 1); } //Current value set back to 0. function resetButton() { var r = getProgress(); setProgress(r = 0); } //Auto complete value to max in this case max is 100 with Interval of 100. function autoProgress() { var elem = document.getElementById("progressbar"); var width = 0; var id = setInterval(frame, 100); function frame(){ if(width == 100){ clearInterval(id); }else{ width++; elem.style.width = width + '%'; elem.innerHTML = width * 1 + '%'; } } } //Stop Auto complete value at current value when button is pressed. function stopProgress(){ //Need Help Here Please. }
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <title>Progress Bar</title> </head> <body> <!-- Container --> <div class="container"> <h1>This Process bar is animated using <br>JavaScript!</h1> <br> <!-- Div For Progress Bar --> <div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="progressbar" >0%</div> </div> <br> <!-- Buttons --> <button type="button" class="btn btn-primary" onclick = "increment()">Increment</button> <button type="button" class="btn btn-dark" onclick="resetButton()">Reset</button> <button type="button" class="btn btn-success" onclick="decrement()">Decrement</button> <button type="button" class="btn btn-warning" onclick="autoProgress()">Start Auto Progress!</button> <button type="button" class="btn btn-danger" onclick="stopProgress()">Stop Auto Progress!</button> <!-- End of Container --> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <script src="Assignment4.js"></script> </body> </html>
2 個解決方案
解決方案1
0 2019-03-13 20:55:40
其實你快到了。 為了能夠停止間隔，您需要將引用存儲在變量中。 那就是您在這里所做的：
var id = setInterval(frame, 100);
不幸的是，這個變量只能在您的autoProgress函數中看到。 因此，首先在函數外部進行全局聲明
var id;
並在autoProgress函數中這樣調用
id = setInterval(frame, 100);
現在，您可以通過調用stopProgress函數來簡單地停止時間間隔
clearInterval(id);
解決方案2
0 已采納 2019-03-13 20:56:20
要停止進度動畫，請考慮使用clearInterval()方法 ，該方法允許您停止驅動增量動畫的基礎間隔。
clearInterval()方法采用一個間隔ID（它是setInterval()函數返回的值），並使相應的間隔回調停止運行。
要將其與代碼集成，您可以將var id autoProgress()函數之外，以便stopProgress()可以訪問它（您將在其中調用clearInterval() ）。 另外，作為一項安全措施，考慮在啟動新變量之前清除id變量上正在運行的所有現有間隔-防止一次運行多個間隔（這可能會破壞進度動畫）。
有關更多詳細信息，請參見下面的片段中的/*Update:*/注釋：
//Get Current Value of attributes function getProgress() { return document.getElementById("progressbar").getAttribute("aria-valuenow"); return document.getElementById("progressbar").getAttribute("style","width:"); return document.getElementById("progressbar").innerHTML; } //Set value of attributes function setProgress(value) { document.getElementById("progressbar").setAttribute("aria-valuenow",value); document.getElementById("progressbar").setAttribute("style","width: " +value+ "%"); document.getElementById("progressbar").innerHTML = (value+ "%"); } //Call get function assign a variable to this, When value is less than 100 value increases by 1. function increment() { var i = getProgress(); if(i < 100){ i++; setProgress(i); }else{ alert("Progress Complete!"); //Alert presents itself once the value reaches max value. } } //Decrease current value by -1. function decrement() { var d = getProgress(); setProgress(d - 1); } //Current value set back to 0. function resetButton() { var r = getProgress(); setProgress(r = 0); } /* Update: Move id out side of autoProgress() */ var id; //Auto complete value to max in this case max is 100 with Interval of 100. function autoProgress() { var elem = document.getElementById("progressbar"); var width = 0; /* Update: stop any previous interval if one exists, and set new interval */ stopProgress(); id = setInterval(frame, 100); function frame(){ if(width == 100){ clearInterval(id); }else{ width++; elem.style.width = width + '%'; elem.innerHTML = width * 1 + '%'; } } } //Stop Auto complete value at current value when button is pressed. function stopProgress(){ /* Update: Stop id interval */ clearInterval(id) id = '' }
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <title>Progress Bar</title> </head> <body> <!-- Container --> <div class="container"> <h1>This Process bar is animated using <br>JavaScript!</h1> <br> <!-- Div For Progress Bar --> <div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="progressbar" >0%</div> </div> <br> <!-- Buttons --> <button type="button" class="btn btn-primary" onclick = "increment()">Increment</button> <button type="button" class="btn btn-dark" onclick="resetButton()">Reset</button> <button type="button" class="btn btn-success" onclick="decrement()">Decrement</button> <button type="button" class="btn btn-warning" onclick="autoProgress()">Start Auto Progress!</button> <button type="button" class="btn btn-danger" onclick="stopProgress()">Stop Auto Progress!</button> <!-- End of Container --> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <script src="Assignment4.js"></script> </body> </html>
如何在特定點停止JavaScript進度欄
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.