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.