admin管理员组

文章数量:1405340

I'm creating a progress bar to use in a pomodoro. The idea is that this bar is filled 100% according to the time specified in the pomodoro. Example if it is 30 min then at 30 minutes it must reach 100%.

let progressBar = document.getElementById("progressBar");
let value = 30
let seconds = 120

let dataValue = progressBar.setAttribute("data-value", `${value}`)

dataAttribute = progressBar.getAttribute('data-value');
console.log(dataAttribute)

let bar = 0


progressBar.style.width = bar;

let id = setInterval(function(){
    bar++;
    progressBar.style.width = bar + "%"
    if (bar >=dataAttribute){
        clearInterval(id)
    }
},1000)
.progress {
    width: 100%;
    background-color: #ddd;
    margin-bottom: 15px;
}

.progress-bar {
    width: 0;
    height: 10px;
    background: #c49b66;
    text-align: center;
    line-height: 30px;
    color: white;
    transition-duration: 5s;
    transition-timing-function: ease;
}
<!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=".3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" type="text/css" media="screen" href="svg.css" />
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="progress">
      <div class="progress-bar" id="progressBar">progress</div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src=".3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src=".js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src=".3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
    <script src="svg.js"></script>
  </body>
</html>

I'm creating a progress bar to use in a pomodoro. The idea is that this bar is filled 100% according to the time specified in the pomodoro. Example if it is 30 min then at 30 minutes it must reach 100%.

let progressBar = document.getElementById("progressBar");
let value = 30
let seconds = 120

let dataValue = progressBar.setAttribute("data-value", `${value}`)

dataAttribute = progressBar.getAttribute('data-value');
console.log(dataAttribute)

let bar = 0


progressBar.style.width = bar;

let id = setInterval(function(){
    bar++;
    progressBar.style.width = bar + "%"
    if (bar >=dataAttribute){
        clearInterval(id)
    }
},1000)
.progress {
    width: 100%;
    background-color: #ddd;
    margin-bottom: 15px;
}

.progress-bar {
    width: 0;
    height: 10px;
    background: #c49b66;
    text-align: center;
    line-height: 30px;
    color: white;
    transition-duration: 5s;
    transition-timing-function: ease;
}
<!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./bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" type="text/css" media="screen" href="svg.css" />
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="progress">
      <div class="progress-bar" id="progressBar">progress</div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery./jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
    <script src="svg.js"></script>
  </body>
</html>

How it should work: If the user wants to put 30 min, then the progress bar must advance according to the time and when it reaches 30 min it is when the bar should reach 100%

the idea is to do it in vanilla javascript not jquery. thanks for your help

  • javascript
  • html
  • css
  • progress-bar
  • countdowntimer
Share asked Nov 13, 2019 at 17:26 Carlos TelloCarlos Tello 111 silver badge3 bronze badges 2
  • So add an input and set it in the code. Not sure what the issue is. – epascarello Commented Nov 13, 2019 at 17:37
  • The issue is that for example set up 1 min when the bar progress is in the 60 second the progress bar filled to 60%. And should be min 60 100% filled. – Carlos Tello Commented Nov 13, 2019 at 19:43
Add a ment  | 

2 Answers 2

Reset to default 5

I would not trust using intervals/timeouts to make an accurate countdown. So use timestamps and calculate the difference. Basic idea here showing how to use timestamps and basic math to update a progress element. 

function setUpProgressBar(selector, startTime, endTime, update) {

  var timer
  var elem = document.querySelector(selector)
  var max = endTime - startTime
  elem.max = max

  var setValue = function() {
    var currentTime = new Date().getTime()
    var ellasped = currentTime - startTime
    if (ellasped >= max) {
      ellasped = max
      window.clearTimeout(timer)
    }
    elem.value = ellasped
    var prec = ellasped/max * 100
    elem.setAttribute("data-label", prec.toFixed(2) + '%')
  }

  setValue()
  timer = window.setInterval(setValue, update)
  return
}

var start1 = new Date()
var end1 = new Date()
end1.setMinutes(end1.getMinutes() + 5);

setUpProgressBar("#pb1", start1.getTime(), end1.getTime(), 100)

var start2 = new Date()
start2.setMinutes(start2.getMinutes() - 20);
var end2 = new Date()
end2.setMinutes(end2.getMinutes() + 5);
setUpProgressBar("#pb2", start2.getTime(), end2.getTime(), 1000)

var start3 = new Date()
start3.setMinutes(start3.getMinutes() - 60);
var end3 = new Date()
end3.setMinutes(end3.getMinutes() + 1);
setUpProgressBar("#pb3", start3.getTime(), end3.getTime(), 100)
progress {
  text-align: center;
  height: 1.5em;
  width: 100%;
  -webkit-appearance: none;
  border: none;
  position:relative;
}
progress:before {
  content: attr(data-label);
  font-size: 0.8em;
  vertical-align: 0;
  position:absolute;
  left:0;
  right:0;
}
<progress id="pb1"></progress>

<progress id="pb2"></progress>

<progress id="pb3"></progress>

You can do something like this:-

// Assuming that you want the progress to finish in 10 seconds
let seconds = 10;
let id = setInterval(function(){
    bar++;
    progressBar.style.width = bar + "%"
    if (bar >=dataAttribute){
        clearInterval(id)
    }
}, seconds * 1000 / 100)

本文标签： javascripthow to fill a 100 progress bar according to the time specified by the userStack Overflow

版权声明：本文标题：javascript - how to fill a 100% progress bar according to the time specified by the user - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744884058a2630379.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。