基本信息
源码名称：html5学习
源码大小：3.28KB
文件格式：.html
开发语言：CSS
更新时间：2014-05-04
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍
html5动画




<!DOCTYPE html> 

<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
Remove this if you use the .htaccess --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title>HTML5 Timer for work-relax balance</title> 
<meta name="description" content=""> 
<meta name="author" content="kevin"> 
<meta name="viewport" content="width=device-width; initial-scale=1.0"> 
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> 
<link rel="shortcut icon" href="/favicon.ico"/> 
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
<script> 
countDownSeconds = 60; 
var handle = null; 
//window load 
function onLoadWindow() { 
aCanvas = document.getElementById("countdownCanvas"); 
context = aCanvas.getContext("2d"); 
var canvasText = "Press to Start..."; 
var xPos = aCanvas.width / 2; 
var yPos = aCanvas.height / 2; 
context.font = "12pt Century Gothic"; 
context.fillStyle = "#008000;"; 
context.textAlign = "center"; 
context.textBaseline = "middle"; 
context.fillText(canvasText, xPos, yPos); 
} 
function updateCanvas(theContext, width, height) { 
if (countDownSeconds < 0) { 
clearInterval(handle); 
handle = null; 
alert("hey, time is up!"); 
return 0; 
} 
minStr = Math.floor(countDownSeconds / 60); 
secStr = countDownSeconds % 60; 
if (minStr < 10) { 
minStr = "0" minStr; 
} 
if (secStr < 10) { 
secStr = "0" secStr; 
} 
context.clearRect(0, 0, width, height); 
context.font = "24pt Century Gothic"; 
context.fillText(minStr " : " secStr, width / 2, height / 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); 
} 
</script> 
</head> 
<body onload="onLoadWindow()"> 
<div align="center"> 
<header> 
<h1>work-life balance timer</h1> 
</header> 
Please choose the work interval: <br />
<input name="workIntervalInput" id="workIntervalInput" type="number" value="25" min="15" max="45" step="5"/> 
minutes 

Please choose the rest interval: <br />
<input name="restIntervalInput" id="restIntervalInput" type="number" value="5" min="3" max="10" step="1"/> 
minutes <br />


<canvas id="countdownCanvas" width="300" height="50" style="border:2px solid black"> 
This is a canvas 
</canvas> 
<br /><br /><br />

<button onclick="startWorkCountDown()"> 
Work Hard 
</button> 
<button onclick="startRestCountDown()"> 
Take A Break 
</button> 
<footer> 
<p> 
&copy; Copyright Reserved 
</p> 
</footer> 
</div> 
</body> 
</html>