Question

我已经做了一些js事情来监视工作日。红线显示从9:00（工作日开始）经过的时间，橙色线显示午餐时间（12:15-13:00）。问题是“午餐”行没有在应有的位置开始。好像从13:30开始。附言首先，我在9：00-18：00工作日编写了此脚本。并且脚本正常工作。但是现在工作时间是从9：00-16：45，所以我不得不对代码进行更改，但是出了点问题。

http://jsfiddle.net/csLj7wa5/

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, 15, 0);
	breakEnd.setHours(13, 0, 0);


	const full = 465;
	end.setHours(16, 45, 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 = '#ff5349';

	bar.appendChild(span);
	bar.appendChild(canvas);

	function updateTime() {
		var now = new Date(),
		time = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds(),
		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);

		setTimeout(updateTime, 1000);
	};

	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();

	paper.beginPath();
	paper.arc(options.width / 2, options.height / 2, radius, start, end, false);
	paper.strokeStyle = color;
	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 个答案: