如何使用Angular或jQuery（而不是JS）来停止此进度栏？
[英]How can I use Angular or jQuery, not JS, to stop this progress bar?
问题描述
How can I make this progress bar stop increasing once the button below is pressed? 
一旦按下下面的按钮，如何使进度条停止增加？ I tried a couple of different things. 我尝试了几种不同的方法。 I would love to be able to use jQuery to make it work or angularJS but vanilla JS would be great too! 我希望能够使用jQuery使其能够正常工作或使用angularJS，但香草JS也很棒！
I checked some of the code online as well but it wasn't working properly. 我也在线检查了一些代码，但工作不正常。 I just want the progress bar to stop increasing during the loop. 我只希望进度条在循环中停止增加。 I should probably use clearInterval or setInterval. 我可能应该使用clearInterval或setInterval。
Thanks! 谢谢！
(function move(){ var elem=document.getElementById("myBar"); var width=1; var id=setInterval(frame,10); function frame(){ if(width>=100){ // determine state clearInterval(id); } else{ width++; // loop increment elem.style.width=width+"%"; elem.innerHTML=width*1+"millisecs"; } } function stop(){ //need code here to stop the bar from increasing.. } })(); //jQuery.noConflict window.onload = ()=>{ var trt = $(".aaanndd"); trt($("h1").toggle(4000)); };
progress::-moz-progress-bar { color: #3fb6b2; background: #efefef; } #myProgress { font-style:arial; border-color:white; width: 100% background-color: blue; } #myBar { width: 1%; height: 30px; background-color: blue; }
<!DOCTYPE html> <html ng-app> <head> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> <body> <div class="section" position:absolute> <div id="myProgress" position:absolute> <div id="myBar"></div> <h1> Timelimit Indicator</h1> <br /> <button onclick="stop()">Stop Timer </button> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2019-01-11 23:37:37
You can consider adding/removing class and some transition trick like below: 您可以考虑添加/删除类以及一些转换技巧，如下所示：
var elem = document.getElementById("myBar"); setTimeout(function(){elem.classList.add('full');},1); /*manually stop*/ function stop() { elem.classList.add('stop'); } /*stop after a period*/ setTimeout(function(){elem.classList.add('stop');},5000);
progress::-moz-progress-bar { color: #3fb6b2; background: #efefef; } #myProgress { font-style: arial; border-color: white; width: 100% background-color: blue; } #myBar { width: 1%; height: 30px; background-color: blue; transition: 10s all linear; } #myBar.full { width: 100%; } #myBar.stop { transition: 10000s all linear; /*big value to stop*/ width: 100.1%; /*a different value to trigger the new transition*/ }
<div id="myBar"></div> <br> <button onclick="stop()">Stop Timer </button>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.