1 html javascript css countdowntimer progress-bar
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.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>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%
这个想法是用普通的 javascript 而不是 jquery 来完成。感谢您的帮助
我不相信使用间隔/超时来进行准确的倒计时。因此使用时间戳并计算差异。这里的基本思想展示了如何使用时间戳和基本数学来更新进度元素。
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>