前端之家

  1. 首页
  2. 问答

如何根据用户指定的时间填充100％进度条

• 问答

我正在创建进度条以用于番茄。这个想法是根据番茄时间中指定的时间，该酒吧将被100％填充。例如，如果是30分钟，则在30分钟时必须达到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.com/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.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnqq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmvgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
    <script src="svg.js"></script>
  </body>
</html>

应如何工作：如果用户要放置30分钟，则进度条必须根据时间前进，并且当进度条达到30分钟时，进度条应达到100％

这个想法是用香草javascript而不是jquery来实现的。谢谢您的帮助

fythlhan 回答：如何根据用户指定的时间填充100％进度条

您可以执行以下操作：-

// 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)
,

我不相信使用间隔/超时来进行准确的倒计时。因此，请使用时间戳并计算差异。这里的基本思想显示了如何使用时间戳和基本数学来更新进度元素。 

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>

countdowntimercsshtmljavascriptprogress-bar
本文链接：https://www.f2er.com/3108004.html

大家都在问