JavaScript：在进度栏上停止动画
[英]JavaScript: Stop animation on on Progress Bar
问题描述
I need some help with the code below where I am trying to implement the "Stop Auto Progress" button. 
我需要尝试执行“停止自动进度”按钮的以下代码，需要一些帮助。
When this button is clicked, it should cause the progress bar's incremental animation to stop, however I am not sure how to go about achieving this. 单击此按钮时，它应导致进度条的增量动画停止，但是我不确定如何实现这一点。
The code below is what I have so far - thanks in advance for any help: 以下代码是我到目前为止所拥有的-预先感谢您的帮助：
//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
Actually you're almost there. 其实你快到了。 To be able to stop an interval you need to store a reference in a variable. 为了能够停止间隔，您需要将引用存储在变量中。 That's what you're doing here already: 那就是您在这里所做的：
var id = setInterval(frame, 100);
Unfortunately this variable can just be seen inside your autoProgress function. 不幸的是，这个变量只能在您的autoProgress函数中看到。 So declare it globally, outside of the function first 因此，首先在函数外部进行全局声明
var id;
and call it like this inside the autoProgress function 并在autoProgress函数中这样调用
id = setInterval(frame, 100);
Now you can simply stop the interval inside your stopProgress function by calling 现在，您可以通过调用stopProgress函数来简单地停止时间间隔
clearInterval(id);
解决方案2
0 已采纳 2019-03-13 20:56:20
To stop the progress animation, consider using the clearInterval() method which allows you to stop the underlying interval that is driving your incremental animation. 要停止进度动画，请考虑使用clearInterval()方法 ，该方法允许您停止驱动增量动画的基础间隔。
The clearInterval() method takes an interval id (which is the value that the setInterval() functions returns), and causes the corresponding interval callback to stop running. clearInterval()方法采用一个间隔ID（它是setInterval()函数返回的值），并使相应的间隔回调停止运行。
To integrate this with your code, you could pull the var id outside of the autoProgress() function, so that it is accessible to stopProgress() (where you would call clearInterval() ). 要将其与代码集成，您可以将var id autoProgress()函数之外，以便stopProgress()可以访问它（您将在其中调用clearInterval() ）。 Also, as a safety measure, consider clearing any existing interval that is running on your id variable before starting a new one - the prevents multiple intervals running at once (which would likely mess up your progress animation). 另外，作为一项安全措施，考虑在启动新变量之前清除id变量上正在运行的所有现有间隔-防止一次运行多个间隔（这可能会破坏进度动画）。
See the /*Update:*/ comments in the snippet below for more detail: 有关更多详细信息，请参见下面的片段中的/*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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.