我的也是時(shí)鐘可以顯示，但是小球無法生成，感覺addball函數(shù)，無法運(yùn)行，麻煩大家看一下 謝謝
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>倒計(jì)時(shí)時(shí)鐘</title>
? ? <script src="digit.js"></script>
</head>
<body>
<canvas id="canvas" style="display: block;margin: 50px auto;"></canvas>
? ? <script>
? ? ? ? //設(shè)置寬高
? ? ? ? var window_width = 1024;
? ? ? ? var window_height = 600;
? ? ? ? var radius = 8;
? ? ? ? var margintop = 60;
? ? ? ? var marginleft = 30;
? ? ? ? const endtime = new Date(2018, 6, 22, 18, 47, 52);
? ? ? ? var minseconds = 0;
? ? ? ? var balls = [];
? ? ? ? const colors = ["red", "green", "blue", "yellow", "black", "gray", "#376956", "#5ED5d1", "#FF6e97", "#f1aaa6"]
? ? ? ? window.onload = function () {
? ? ? ? ? ? var canvas = document.getElementById("canvas");
? ? ? ? ? ? var context = canvas.getContext('2d');
? ? ? ? ? ? canvas.width = window_width;
? ? ? ? ? ? canvas.height = window_height;
? ? ? ? ? ? minseconds = getCurrentShowTimeSeconds();
? ? ? ? ? ? setInterval(function () {
? ? ? ? ? ? ? ? render(context);
? ? ? ? ? ? ? ? update();
? ? ? ? ? ? }, 50);
? ? ? ? };
function getCurrentShowTimeSeconds() {
? ? ? ? ? ? var curtime = new Date();
? ? ? ? ? ? var ret = endtime.getTime() - curtime.getTime();
? ? ? ? ? ? ret = Math.round(ret / 1000);
? ? ? ? ? ? return ret >= 0 ? ret : 0;
? ? ? ? }
? ? ? ? function update() {
? ? ? ? ? ? var nextseconds = getCurrentShowTimeSeconds();
? ? ? ? ? ? var nexthours = parseInt(nextseconds / 3600);
? ? ? ? ? ? var nextminutes = parseInt((nextseconds - nexthours * 3600) / 60);
? ? ? ? ? ? var nextsecond = nextseconds % 60;
? ? ? ? ? ? var curhours = parseInt(minseconds / 3600);
? ? ? ? ? ? var curminutes = parseInt((minseconds - curhours * 3600) / 60);
? ? ? ? ? ? var curseconds = minseconds % 60;
? ? ? ? ? ? if (nextseconds != curseconds) {
? ? ? ? ? ? ? ? if (parseInt(curhours / 10) != parseInt(nexthours/10)) {
? ? ? ? ? ? ? ? ? ? addballs(marginleft+0, margintop, parseInt(curhours / 10))
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (parseInt(curhours % 10) != parseInt(nexthours%10)) {
? ? ? ? ? ? ? ? ? ? addballs(marginleft+(15*radius+1), margintop, parseInt(curhours % 10))
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (parseInt(curminutes/10) != parseInt(nextminutes/10)) {
? ? ? ? ? ? ? ? ? ? addballs(marginleft + (39 * radius+1), margintop, parseInt(curminutes / 10))
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (parseInt(curminutes % 10) != parseInt(nextminutes % 10)) {
? ? ? ? ? ? ? ? ? ? addballs(marginleft + (54 * radius+1), margintop, parseInt(curminutes % 10))
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (parseInt(curseconds / 10) != parseInt(nextsecond / 10)) {
? ? ? ? ? ? ? ? ? ? addballs(marginleft + (78 * radius+1), margintop, parseInt(curseconds / 10))
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (parseInt(curseconds%10) != parseInt(nextsecond % 10)) {
? ? ? ? ? ? ? ? ? ? addballs(marginleft + (93 * radius+1), margintop, parseInt(curseconds % 10))
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? minseconds = nextseconds;
? ? ? ? ? ? }
? ? ? ? ? ? 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 - radius) {
? ? ? ? ? ? ? ? ? ? balls[i].y = window_height - radius;
? ? ? ? ? ? ? ? ? ? balls[i].vy = -balls[i].vy * 0.75;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? function addballs(x, y, num) {
? ? ? ? ? ? for (var i = 0; i < digit[num].lenght; i++) {
? ? ? ? ? ? ? ? for (var j = 0; j < digit[num][i].length; j++) {
? ? ? ? ? ? ? ? ? ? if (digit[num][i][j] == 1) {
? ? ? ? ? ? ? ? ? ? ? ? var aball = {
? ? ? ? ? ? ? ? ? ? ? ? ? ? x: x + j * 2 * (radius + 1) + (radius + 1),
? ? ? ? ? ? ? ? ? ? ? ? ? ? y: y + i * 2 * (radius + 1) + (radius + 1),
? ? ? ? ? ? ? ? ? ? ? ? ? ? g: 1.5 * Math.random(),
? ? ? ? ? ? ? ? ? ? ? ? ? ? vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,? //取整數(shù)為一? 取負(fù)數(shù)為負(fù)一
? ? ? ? ? ? ? ? ? ? ? ? ? ? vy: -5,
? ? ? ? ? ? ? ? ? ? ? ? ? ? color: colors[Math.floor(Math.random() * colors.length)]
? ? ? ? ? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? ? ? ? ? balls.push(aball);
? ? ? ? ? ? ? ? ? ? ? ?alert("aa");
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? function render(cxt) {
? ? ? ? ? ? cxt.clearRect(0, 0, window_width, window_height);
? ? ? ? ? ? //設(shè)置時(shí)間變量
? ? ? ? ? ? var hours = parseInt(minseconds / 3600);
? ? ? ? ? ? var minutes = parseInt((minseconds - hours * 3600) / 60);
? ? ? ? ? ? var seconds = parseInt(minseconds % 60);
? ? ? ? ? ? renderdigit(marginleft, margintop, parseInt(hours / 10), cxt)
? ? ? ? ? ? renderdigit(marginleft + 15 * (radius + 1), margintop, parseInt(hours % 10), cxt);
? ? ? ? ? ? renderdigit(marginleft + 30 * (radius + 1), margintop, 10, cxt);
? ? ? ? ? ? renderdigit(marginleft + 39 * (radius + 1), margintop, parseInt(minutes / 10), cxt)
? ? ? ? ? ? renderdigit(marginleft + 54 * (radius + 1), margintop, parseInt(minutes % 10), cxt);
? ? ? ? ? ? renderdigit(marginleft + 69 * (radius + 1), margintop, 10, cxt);
? ? ? ? ? ? renderdigit(marginleft + 78 * (radius + 1), margintop, parseInt(seconds / 10), cxt)
? ? ? ? ? ? renderdigit(marginleft + 93 * (radius + 1), margintop, parseInt(seconds % 10), cxt);
? ? ? ? ? ? for (var i = 0; i < balls.lenght; i++) {
? ? ? ? ? ? ? ? ctx.fillStyle = balls[i].color;
? ? ? ? ? ? ? ? ctx.beginPath();
? ? ? ? ? ? ? ? ctx.arc(balls[i].x, balls[i].y, ball.radius, 0, Math.PI * 2, true);
? ? ? ? ? ? ? ? ctx.closePath();
? ? ? ? ? ? ? ? ctx.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 * (radius + 1) + (radius + 1), y + i * 2 * (radius + 1) + (radius + 1), radius, 0, Math.PI * 2);
? ? ? ? ? ? ? ? ? ? ? ? cxt.closePath();
? ? ? ? ? ? ? ? ? ? ? ? cxt.fill();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</body>
</html>
2018-08-21
定義變量為cxt，然后用ctx去畫？
2018-07-23
有幾個(gè)length拼錯(cuò)了，
前面上下文變量錯(cuò)了，后面半徑直接用radius