html 代码
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <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>
JavaScript
来源: http://www.qdfuns.com/article/46229/d16245eae7bbfddaec83b236f40c270d.html