admin管理员组

文章数量:1429451

I'm making a typing game, there is a 1-second interval function in my game already but I need something animated in UI. It will visually show the user how the time is running out.

In this code, I wanted to increase the progress bar from 0% to 100% in 7 seconds. Though I want decrease actually

How can I do this with pure javascript?

Timing is Important here, The whole decrease/increase process should be done within my given time 

function move() {
  var elem = document.getElementById("myBar");   
  var width = 0;
  var id = setInterval(frame, 1);
  // i want it to be done in 7 seconds
  var time = 7000;
  function frame() {
    if (width >= time) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = (100*width)/time + '%'; 
      elem.innerHTML = Math.round((100*width)/time)  + '%';
    }
  }
}
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}
<!DOCTYPE html>
<html>
<body>
<div id="myProgress">
  <div id="myBar">0%</div>
</div>
<br>
<button onclick="move()">Start</button> 
</body>
</html>

I'm making a typing game, there is a 1-second interval function in my game already but I need something animated in UI. It will visually show the user how the time is running out.

In this code, I wanted to increase the progress bar from 0% to 100% in 7 seconds. Though I want decrease actually

How can I do this with pure javascript?

Timing is Important here, The whole decrease/increase process should be done within my given time 

function move() {
  var elem = document.getElementById("myBar");   
  var width = 0;
  var id = setInterval(frame, 1);
  // i want it to be done in 7 seconds
  var time = 7000;
  function frame() {
    if (width >= time) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = (100*width)/time + '%'; 
      elem.innerHTML = Math.round((100*width)/time)  + '%';
    }
  }
}
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}
<!DOCTYPE html>
<html>
<body>
<div id="myProgress">
  <div id="myBar">0%</div>
</div>
<br>
<button onclick="move()">Start</button> 
</body>
</html>

  • javascript
  • html
  • css
Share Improve this question edited Jun 26, 2019 at 13:47 Shovan asked Jun 26, 2019 at 13:32 ShovanShovan 1362 silver badges14 bronze badges 6
  • 1 Your question is not clear. Do you mean you want to decrease the bar? – Bhaskar Dabhi Commented Jun 26, 2019 at 13:36
  • yes i want to decrease the bar – Shovan Commented Jun 26, 2019 at 13:37
  • Not sure I get where the trouble is. To have it decrease just do elem.style.width = 100 - ((100*width)/time) + '%'; – Goblinlord Commented Jun 26, 2019 at 13:37
  • I want the whole decrease process will happen in 7 seconds – Shovan Commented Jun 26, 2019 at 13:38
  • 1 Suggestion: I think changing the progress bars' text from percentages to seconds (and tenths of seconds) would be more meaningful to the user. E.g. 4.5 s. – Daan Commented Jun 26, 2019 at 13:53
 |  Show 1 more ment

2 Answers 2

Reset to default 5

I would remend using requestAnimationFrame first. Next, use a timer instead of counting how many times it is called. I made a few minor adjustments (you can call it with a different number to have a different delay).

RAF docs: https://developer.mozilla/en-US/docs/Web/API/window/requestAnimationFrame

function move(delay) {
  var elem = document.getElementById("myBar");
  var end = Date.now() + delay;
  var frame = () => {
    var timeleft = Math.max(0, end - Date.now());
    elem.style.width = (100*timeleft)/delay + '%'; 
    elem.innerHTML = (timeleft/1000).toFixed(1)  + 's';
    if (timeleft === 0) return;
    requestAnimationFrame(frame);
  };
  requestAnimationFrame(frame);
}
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 100%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}
<!DOCTYPE html>
<html>
<body>
<div id="myProgress">
  <div id="myBar">7.0s</div>
</div>
<br>
<button onclick="move(7000)">Start</button> 
</body>
</html>

Like this?

function move() {
  var elem = document.getElementById("myBar");   
  var width = 0;
  var id = setInterval(frame, 1);
  // i want it to be done in 7 seconds
  var time = 7000;
  function frame() {
    if (width >= time) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = 100-(100*width)/time + '%'; 
      elem.innerHTML = 100-Math.round((100*width)/time)  + '%';
    }
  }
}
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 100%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}
<!DOCTYPE html>
<html>
<body>
<div id="myProgress">
  <div id="myBar">100%</div>
</div>
<br>
<button onclick="move()">Start</button> 
</body>
</html>

本文标签： htmlHow to increase or decrease a progress bar width within given time with pure JavaScriptStack Overflow

版权声明：本文标题：html - How to increase or decrease a progress bar width within given time with pure JavaScript? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745543696a2662608.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。