如何使用Angular或jQuery（而不是JS）來停止此進度欄？
[英]How can I use Angular or jQuery, not JS, to stop this progress bar?
問題描述
一旦按下下面的按鈕，如何使進度條停止增加？ 我嘗試了幾種不同的方法。 我希望能夠使用jQuery使其能夠正常工作或使用angularJS，但香草JS也很棒！
我也在線檢查了一些代碼，但工作不正常。 我只希望進度條在循環中停止增加。 我可能應該使用clearInterval或setInterval。
謝謝！
(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
您可以考慮添加/刪除類以及一些轉換技巧，如下所示：
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>
如何使用howler js更新進度條？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.