const WINDOW_HEIGHT = 768

const RADIUS = 8

const MARGIN_TOP = 60

const MARGIN_LEFT = 30

const endTime = new Date(2022, 2, 9, 14, 00, 00)

let curShowTimeSeconds = 0

window.onload = function () {

? let canvas = document.getElementById('canvas')

? let context = canvas.getContext('2d')

? canvas.width = WINDOW_WIDTH

? canvas.height = WINDOW_HEIGHT

? curShowTimeSeconds = getCurrentShowTimeSeconds()

? setInterval(() => {

? ? render(context)

? ? update()

? }, 50);

}

function getCurrentShowTimeSeconds() {

? let curTime = new Date()

? let ret = endTime.getTime() - curTime.getTime()

? ret = Math.round(ret / 10000)

? return ret >= 0 ? ret : 0

}

function update() {

? let nextShowTimeSeconds = getCurrentShowTimeSeconds()

? let nextHours = parseInt(nextShowTimeSeconds / 3600)

? let nextMinutes = parseInt((nextShowTimeSeconds - nextHours * 3600) / 60)

? let nextSeconds = nextShowTimeSeconds % 60

? let curHours = parseInt(curShowTimeSeconds / 3600)

? let curMinutes = parseInt((curShowTimeSeconds - curHours * 3600) / 60)

? let curSeconds = curShowTimeSeconds % 60

? if (nextSeconds != curSeconds) {

? ? curShowTimeSeconds = nextShowTimeSeconds

? }

}

function render(cxt) {

? // 對矩形進行刷新操作

? cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT)

? let hours = parseInt(curShowTimeSeconds / 3600)

? let minutes = parseInt((curShowTimeSeconds - hours * 3600) / 60)

? let seconds = curShowTimeSeconds % 60

? // 時鐘

? renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt)

? renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt)

? renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt)

? // 分鐘

? renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt)

? renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt)

? renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt)

? // 秒鐘

? renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt)

? renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), cxt)

}

function renderDigit(x, y, num, cxt) {

? cxt.fillStyle = "skyblue"

? for (let i = 0; i < digit[num].length; i++) {

? ? for (let 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, 2 * Math.PI)

? ? ? ? cxt.closePath()

? ? ? ? cxt.fill()

? ? ? }

? ? }

? }

}