1
진행률 슬라이더를 다음과 같이 만들고 싶습니다. http://www.elotrolado.net/정확히 어떻게이 진도 원을 만드시겠습니까? (Internet Explorer 9과 호환되며 시간이 정확합니다.)
나는 진도의 원을 만들려고했습니다. 하지만 Chrome에서 작동하는 경우에도 Internet Explorer 10 이 4 초 안에 완료되는 대신 7 초가됩니다. 및 IE9는 표시되지 않습니다.
MY CODE : 이전 웹 사이트에서http://jsfiddle.net/r6N2X/1/
모두 작동합니다.
CSS :
body {
margin: 10px;
padding: 10px;
}
#sl-progress {
position: absolute;
z-index: 1;
}
HTML :
<canvas id="sl-progress" width="35" height="35"></canvas>
자바 스크립트 :
window.requestAnimSpinner = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;
})
();
var paused = false;
var finished = false;
var endPercent = 100;
var radius = 11;
var curPerc = 0;
var circ = Math.PI * 2;
var quart = Math.PI/2;
var timeMilli = 4000; // tiempo total
var time = timeMilli/100;
function animate() {
var canvas = document.getElementById('sl-progress');
var x = canvas.width/2;
var y = canvas.height/2;
var context = canvas.getContext('2d');
context.lineWidth = 7;
context.strokeStyle = "#000";
function render(current) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
context.stroke();
curPerc++;
if (curPerc <= endPercent && !paused) {
setTimeout(function() {
requestAnimSpinner(function() {
render(curPerc/100);
});
}, time);
} else if (paused) {
} else {
//curPerc = 0;
//context.clearRect(0, 0, canvas.width, canvas.height);
}
}
render();
}
/* START ANIMATION */
animate();