我为我的办公室工作时间制作了循环进度条。它还显示午餐时间的时间间隔。星期五,我们的工作时间缩短了1个小时。问题出在星期五,午餐时间间隔在进度条上是错误的。它比工作时间更接近应有的结束时间。这是代码:
var bar = document.getElementById('progressbar');
createProgressBar = function(bar) {
var options = {
start: 0,
width: bar.getAttribute('data-width'),
height: bar.getAttribute('data-height'),
percent: 100,
lineWidth: bar.getAttribute('data-linewidth')
},
canvas = document.createElement('canvas'),
paper = canvas.getContext('2d'),
span = document.createElement('span'),
radius = (options.width - options.lineWidth) / 2,
color = paper.createLinearGradient(0, 0, options.width, 0),
end = new Date(),
today = new Date(),
breakStart = new Date(),
breakEnd = new Date();
breakStart.setHours(12, 0, 0);
breakEnd.setHours(13, 0, 0);
if(today.getDay() == 5) {
var full = 480;
end.setHours(17, 00, 0);
}
else {
var full = 540;
end.setHours(18, 0, 0);
}
span.style.width = bar.style.width = options.width + 'px';
span.style.height = bar.style.height = options.height + 'px';
canvas.width = options.width;
canvas.height = options.height;
span.style.lineHeight = options.height + 'px';
span.style.color = 'white';
color.addColorStop(0, '#ff5349');
color.addColorStop(0.5, '#ff5349');
color.addColorStop(1.0, '#ff5349');
bar.appendChild(span);
bar.appendChild(canvas);
function updateTime() {
var now = new Date(),
remaining = end - now,
_second = 1000,
_minute = _second * 60,
_hour = _minute * 60,
_day = _hour * 24,
hours = Math.floor((remaining % _day) / _hour),
minutes = Math.floor((remaining % _hour) / _minute),
seconds = Math.floor((remaining % _minute) / _second),
current = (full - (hours * 60) - minutes) / full * 100,
step = 1.5 + (2 * current / 100),
startb = (breakStart.getHours() * 60 + breakStart.getMinutes()) / full * 100,
endb = (breakEnd.getHours() * 60 + breakEnd.getMinutes()) / full * 100,
startBr = 1.5 + (2 * startb / 100),
endBr = 1.5 + (2 * endb / 100);
createCircle(options, paper, radius, color, Math.PI * 1.5, Math.PI * step);
createBreak(options, paper, radius, color, Math.PI * startBr, Math.PI * endBr);
};
updateTime();
},
createCircle = function(options, paper, radius, color, start, end) {
paper.clearRect(
options.width / 2 - radius - options.lineWidth,
options.height / 2 - radius - options.lineWidth,
radius * 2 + (options.lineWidth * 2),
radius * 2 + (options.lineWidth * 2)
);
paper.beginPath();
paper.arc(options.width / 2, options.height / 2, radius, 0, Math.PI * 2, false);
paper.strokeStyle = 'white';
paper.lineCap = 'butt';
paper.lineWidth = options.lineWidth;
paper.stroke();
paper.closePath();
},
createBreak = function(options, paper, radius, color, start, end) {
paper.beginPath();
paper.arc(options.width / 2, options.height / 2, 171, start, end, false);
paper.strokeStyle = 'orange';
paper.lineCap = 'butt';
paper.lineWidth = 19;
paper.stroke();
paper.closePath();
};
createProgressBar(bar);
body {
background-color: #333;
padding: 0;
font-family: 'sans serif', Verdana, Tahoma, Helvetica;
}
canvas {
position: absolute;
display: block;
left: 0;
top: 0;
}
#progressbar {
position: fixed;
top: 50%;
left: 50%;
margin-top: -180px;
margin-left: -180px;
}
<div id="progressbar" data-width="360" data-height="360" data-linewidth="16"></div>
如果有必要,我可以发布一些屏幕截图,以明确我的意思