HTML5 タイマーの小さな example_html5 チュートリアルのスキル

html:

复制代码

代码如下:

カウントダウン秒 = 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 = "12pt センチュリー ゴシック";
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, width, height);
context.font = "24pt センチュリー ゴシック";
context.fillText(minStr " : " secStr, width / 2, height / 2);
カウントダウン秒--;
}
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);
}

ワークライフバランスタイマー

作業間隔を選択してください:

分

休憩間隔を選択してください:

分



これはキャンバスです




頑張ってください


休憩

&コピー;著作権所有