HTML5 타이머 작은 example_html5 튜토리얼 기술

html:

复aze代码

代码如下:

countDownSeconds = 60;
var 핸들 = null;
//창 로드
function onLoadWindow() {
aCanvas = document.getElementById("countdownCanvas");
context = aCanvas.getContext("2d");
var canvasText = "시작하려면 누르세요...";
var xPos = aCanvas.width / 2;
var yPos = aCanvas.height / 2;
context.font = "12포인트 세기 고딕";
context.fillStyle = "#008000;";
context.textAlign = "중심";
context.textBaseline = "중간";
context.fillText(canvasText, xPos, yPos);
}
function updateCanvas(theContext, width, height) {
if (countDownSeconds clearInterval(handle);
핸들 = null;
alert("안녕하세요, 시간이 다 됐어요!");
0을 반환합니다.
}
minStr = Math.floor(countDownSeconds / 60);
secStr = countDownSeconds % 60;
if (minStr minStr = "0" minStr;
}
if (secStr secStr = "0" secStr;
}
context.clearRect(0, 0, 너비, 높이);
context.font = "24포인트 세기 고딕";
context.fillText(minStr " : " secStr, 너비 / 2, 높이 / 2);
countDownSeconds--;
}
function startWorkCountDown() {
if (handle != null) {
clearInterval(handle);
}
countDownSeconds = document.getElementById("workIntervalInput").value * 60;
timeDisplayCanvas = document.getElementById("countdownCanvas");
timeDisplayContext2D = timeDisplayCanvas.getContext("2d");
updateCanvas(timeDisplayContext2D, timeDisplayCanvas.width, timeDisplayCanvas.height);
handle = setInterval(function() {
updateCanvas(timeDisplayContext2D, timeDisplayCanvas.width, timeDisplayCanvas.height);
}, 1000);
}
function startRestCountDown() {
if (handle != null) {
clearInterval(handle);
}
countDownSeconds = document.getElementById("restIntervalInput").value * 60;
timeDisplayCanvas = document.getElementById("countdownCanvas");
timeDisplayContext2D = timeDisplayCanvas.getContext("2d");
updateCanvas(timeDisplayContext2D, timeDisplayCanvas.width, timeDisplayCanvas.height);
handle = setInterval(function() {
updateCanvas(timeDisplayContext2D, timeDisplayCanvas.width, timeDisplayCanvas.height);
}, 1000);
}

일과 삶의 균형 타이머

작업 간격을 선택하세요:

분

휴식 간격을 선택하세요:

분



캔버스입니다




열심히 일하세요


휴식을 취하세요

&복사; 저작권 보유