进度条无法正常工作

时间:2018-03-30 10:27:22

标签: javascript

我为我的办公室工作时间制作了循环进度条。它还显示午餐时间的时间间隔。星期五,我们的工作时间缩短了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>

如果有必要,我可以发布一些屏幕截图,以明确我的意思

0 个答案:

没有答案