用canvas做一个酷炫的倒计时效果，一起来看下咯。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
#canvas {
width: 100%;
height: 100%;
display: block;
}
</style>
<body style="height: 100%;width: 100%;">
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
digit =
[
[
[0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
],//0
[
[0,0,0,1,1,0,0],
[0,1,1,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[1,1,1,1,1,1,1]
],//1
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1]
],//2
[
[1,1,1,1,1,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//3
[
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,0],
[0,0,1,1,1,1,0],
[0,1,1,0,1,1,0],
[1,1,0,0,1,1,0],
[1,1,1,1,1,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,1]
],//4
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,1,1,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//5
[
[0,0,0,0,1,1,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//6
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0]
],//7
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//8
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,1,1,0,0,0,0]
],//9
[
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]
]//:
];
</script>
<script>
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var R = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;
//var endTime = new Date();
//endTime.setTime(endTime.getTime()+3600*1000)
var curShowTimeSeconds = 0;
const colors = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"];
var balls = [];
window.onload = function() {
WINDOW_WIDTH = document.body.clientWidth
WINDOW_HEIGHT = document.body.clientHeight
MARGIN_LEFT = Math.round(WINDOW_WIDTH / 10);
R = Math.round(WINDOW_WIDTH * 4 / 5 / 108) - 1;
MARGIN_TOP = Math.round(WINDOW_HEIGHT / 5);
//使用context绘制
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
curShowTimeSeconds = getCurrenShowTimeSeconds();
setInterval(
function() {
render(context);
update();
}, 50);
//获取截止时间
function getCurrenShowTimeSeconds() {
var curTime = new Date();
//倒计时 var ret = endTime.getTime() - curTime.getTime();
// ret = Math.round(ret / 1000)
// return ret >= 0 ? ret : 0;
var ret = curTime.getHours() * 3600 + curTime.getMinutes() * 60 + curTime.getSeconds();
return ret;
}
//
function update() {
var nextShowTimeSeconds = getCurrenShowTimeSeconds();
var nh = parseInt(nextShowTimeSeconds / 3600);
var nm = parseInt((nextShowTimeSeconds - nh * 3600) / 60);
var ns = nextShowTimeSeconds % 60;
var ch = parseInt(curShowTimeSeconds / 3600);
var cm = parseInt((curShowTimeSeconds - ch * 3600) / 60);
var cs = curShowTimeSeconds % 60;
if(ns != cs) {
if(parseInt(ch / 10) != parseInt(nh / 10)) {
addBalls(MARGIN_LEFT + 0, MARGIN_TOP, parseInt(ch / 10))
}
if(parseInt(ch % 10) != parseInt(nh % 10)) {
addBalls(MARGIN_LEFT + 15 * (R + 1), MARGIN_TOP, parseInt(ch / 10))
}
if(parseInt(cm / 10) != parseInt(nm / 10)) {
addBalls(MARGIN_LEFT + 39 * (R + 1), MARGIN_TOP, parseInt(cm / 10))
}
if(parseInt(cm % 10) != parseInt(nm % 10)) {
addBalls(MARGIN_LEFT + 54 * (R + 1), MARGIN_TOP, parseInt(cm % 10))
}
if(parseInt(cs / 10) != parseInt(ns / 10)) {
addBalls(MARGIN_LEFT + 78 * (R + 1), MARGIN_TOP, parseInt(cs / 10))
}
if(parseInt(cs % 10) != parseInt(ns % 10)) {
addBalls(MARGIN_LEFT + 93 * (R + 1), MARGIN_TOP, parseInt(ns % 10))
}
curShowTimeSeconds = nextShowTimeSeconds;
}
updateBalls();
}
//
function updateBalls() {
for(var i = 0; i < balls.length; i++) {
balls[i].x += balls[i].vx;
balls[i].y += balls[i].vy;
balls[i].vy += balls[i].g;
if(balls[i].y >= WINDOW_HEIGHT - R) {
balls[i].y = WINDOW_HEIGHT - R;
balls[i].vy = -balls[i].vy * 0.75;
}
}
var cnt = 0
for(var i = 0; i < balls.length; i++)
if(balls[i].x + R > 0 && balls[i].x - R < WINDOW_WIDTH)
balls[cnt++] = balls[i]
while(balls.length > Math.min(300, cnt)) {
balls.pop();
}
}
//
function addBalls(x, y, num) {
for(var i = 0; i < digit[num].length; i++)
for(var j = 0; j < digit[num][i].length; j++)
if(digit[num][i][j] == 1) {
var aBall = {
x: x + j * 2 * (R + 1) + (R + 1),
y: y + i * 2 * (R + 1) + (R + 1),
g: 1.5 + Math.random(),
vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,
vy: -5,
color: colors[Math.floor(Math.random() * colors.length)]
}
balls.push(aBall)
}
}
//绘制数字
function render(cxt) {
cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
var h = parseInt(curShowTimeSeconds / 3600);
var m = parseInt((curShowTimeSeconds - h * 3600) / 60);
var s = curShowTimeSeconds % 60;
renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(h / 10), cxt);
renderDigit(MARGIN_LEFT + 15 * (R + 1), MARGIN_TOP, parseInt(h % 10), cxt);
renderDigit(MARGIN_LEFT + 30 * (R + 1), MARGIN_TOP, 10, cxt);
renderDigit(MARGIN_LEFT + 39 * (R + 1), MARGIN_TOP, parseInt(m / 10), cxt);
renderDigit(MARGIN_LEFT + 54 * (R + 1), MARGIN_TOP, parseInt(m % 10), cxt);
renderDigit(MARGIN_LEFT + 69 * (R + 1), MARGIN_TOP, 10, cxt);
renderDigit(MARGIN_LEFT + 78 * (R + 1), MARGIN_TOP, parseInt(s / 10), cxt);
renderDigit(MARGIN_LEFT + 93 * (R + 1), MARGIN_TOP, parseInt(s % 10), cxt);
for(var i = 0; i < balls.length; i++) {
cxt.fillStyle = balls[i].color;
cxt.beginPath();
cxt.arc(
balls[i].x, balls[i].y, R, 0, 2 * Math.PI, true
);
cxt.closePath();
cxt.fill();
}
}
function renderDigit(x, y, num, cxt) {
cxt.fillStyle = "rgb(0,102,153)";
for(var i = 0; i < digit[num].length; i++)
for(var j = 0; j < digit[num][i].length; j++)
if(digit[num][i][j] == 1) {
cxt.beginPath();
cxt.arc(
x + j * 2 * (R + 1) + (R + 1), y + i * 2 * (R + 1) + (R + 1), R, 0, 2 * Math.PI
);
cxt.closePath();
cxt.fill();
}
}
}
</script>
</html>
网友评论文明上网理性发言 已有0人参与
发表评论: