Site Notice

hello, world

Difference between revisions of "Progress"

From Project-EPB Commons
([InPageEdit] 没有编辑摘要)
m ([InPageEdit] 没有编辑摘要)
 
(19 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<button onclick="start()">开始</button>
+
<button onclick="$('.ipe-progress').toggleClass('done')">切换</button>
−
<div id="progress" style="width: 80%; margin: auto 10%; height: 1em; border: 1px solid #c5c5c5; padding: 2px"><div id="bar" style="transition: width .1s ease-in-out; height: 100%; width: 0%; background: #a3a2a2;"><span id="num"></span></div></div>
+
 
 +
<div class="ipe-progress" style="width:100%;">
 +
  <div class="progress-bar"></div>
 +
</div>
 +
 
 +
<div class="ipe-progress" style="width:80%;">
 +
  <div class="progress-bar"></div>
 +
</div>
 +
 
 +
<div class="ipe-progress" style="width:60%;">
 +
  <div class="progress-bar"></div>
 +
</div>
 +
 
 +
<div class="ipe-progress" style="width:40%;">
 +
  <div class="progress-bar"></div>
 +
</div>
 +
 
 +
<div class="ipe-progress" style="width:200px;">
 +
  <div class="progress-bar"></div>
 +
</div>
 +
 
 +
<div class="ipe-progress" style="width:50px;">
 +
  <div class="progress-bar"></div>
 +
</div>
 +
 
 
<script>
 
<script>
−
function start() {
+
 
−
  var goprogess = setInterval(function () {
 
−
    if (typeof x === 'undefined') x = 0;
 
−
    x = Number($('#progress #bar').css('width').replace('%','').replace('px',''));
 
−
    if (x < 50) {
 
−
      x = x + 1;
 
−
    } else if (x < 80) {
 
−
      x = x + 0.5;
 
−
    } else if (x < 90) {
 
−
      x = x + 0.25;
 
−
    } else {
 
−
      x = x + 0.125;
 
−
    }
 
−
    if (x > 100) {
 
−
      clearInterval(goprogess);
 
−
      $('#progress').after('<center id="done">DONE</center>');
 
−
      $('#progress #bar').delay(3000).css('width','0%');
 
−
    } else {
 
−
      $('#progress #bar').css('width',x+'%');
 
−
      $('#progress #num').text(x);
 
−
      $('#done').remove();
 
−
    }
 
−
  }, 100);
 
−
}
 
 
</script>
 
</script>
 +
<style>
 +
 +
</style>
 +
 
</html>
 
</html>

Latest revision as of 11:12, 23 November 2019

<html> <button onclick="$('.ipe-progress').toggleClass('done')">切换</button>

<div class="ipe-progress" style="width:100%;"> 

 <div class="progress-bar"></div>

</div>

<div class="ipe-progress" style="width:80%;"> 

 <div class="progress-bar"></div>

</div>

<div class="ipe-progress" style="width:60%;"> 

 <div class="progress-bar"></div>

</div>

<div class="ipe-progress" style="width:40%;"> 

 <div class="progress-bar"></div>

</div>

<div class="ipe-progress" style="width:200px;"> 

 <div class="progress-bar"></div>

</div>

<div class="ipe-progress" style="width:50px;"> 

 <div class="progress-bar"></div>

</div>

<script>

</script> <style>

</style>

</html>

Retrieved from "https://common.epb.wiki/index.php?title=Progress&oldid=1230"