JavaScript實現簡單的倒計時效果

2022-06-19 14:00:49
本文範例為大家分享了JavaScript實現簡單倒計時效果的具體程式碼，供大家參考，具體內容如下
<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="utf8">
        <meta http-equiv="X-UA-Compatible" cotent="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0 initial-scale=1.0, user-scalable=yes">
        <meta name="keywords" content="count down">
        <meta name="description" content="count down">
        <title>倒計時(Count Down)</title>
    </head>
    <body>
        <script>
            var halfPI = Math.PI / 2;
            var doublePI = Math.PI * 2;
            var ctx;

            //畫布大小
            var canvasSize = 200;
            var halfCanvasSize = canvasSize / 2;
            //畫布的外切圓半徑
            var excircleRadius = Math.SQRT2 * halfCanvasSize;
            //線條寬度
            var lineWidth = 2;
            //蒙版顏色
            var maskColor = "rgba(90,90,90,0.4)";
            //單個數位的字型
            var singleNumFont = halfCanvasSize * 1.6 + "px Calibri";
            //兩個數位的字型
            var doubleNumFont = halfCanvasSize * 1.2 + "px Calibri";
            //每秒重新整理的幀數
            var stepCount = 30;
            //定時器執行間隔時間
            var interval = 1000 / stepCount;
            //每幀前進的弧度
            var radianStep = doublePI / stepCount;
            //定時器id
            var intervalId = 0;
            //倒計時
            var countdownTime = 0;
            //當前角度
            var radian = 0;

            function init() {
                var canvas = document.createElement("canvas");
                canvas.innerHTML = "Your browser can not support canvas";
                canvas.width = canvasSize;
                canvas.height = canvasSize;
                canvas.style.backgroundColor = "darkkhaki";
                canvas.style.display = "block";

                var restartBtn = document.createElement("button");
                restartBtn.innerHTML = "restart";
                //注意:canvas的width不能寫單位, 而按鈕的width必須寫單位, 否則無效
                restartBtn.style.width = "200px";
                restartBtn.addEventListener("click", function() {
                    restart();
                });

                document.body.appendChild(canvas);
                document.body.appendChild(restartBtn);

                ctx = canvas.getContext("2d");
                ctx.lineWidth = lineWidth;
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";
                restart();
            }

            function strokeLine(x1, y1, x2, y2) {
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.stroke();
            }

            function strokeCircle(cx, cy, r) {
                ctx.beginPath();
                ctx.arc(cx, cy, r, 0, doublePI);
                ctx.stroke();
            }

            //渲染背景
            function renderBg() {
                ctx.clearRect(0, 0, canvasSize, canvasSize);
                //繪製橫豎線
                ctx.strokeStyle = "black";
                strokeLine(halfCanvasSize, 0, halfCanvasSize, canvasSize);
                strokeLine(0, halfCanvasSize, canvasSize, halfCanvasSize);
                //繪製兩個內圈
                ctx.strokeStyle = "Silver";
                strokeCircle(halfCanvasSize, halfCanvasSize, halfCanvasSize * 0.9);
                strokeCircle(halfCanvasSize, halfCanvasSize, halfCanvasSize * 0.7);
            }

            //渲染蒙版
            function renderMask(radian) {
                //繪製扇形的邊界線
                var x = halfCanvasSize + excircleRadius * Math.sin(radian); 
                var y = halfCanvasSize - excircleRadius * Math.cos(radian);
                ctx.strokeStyle = "black";
                strokeLine(halfCanvasSize, halfCanvasSize, x, y);
                //繪製扇形
                ctx.fillStyle = maskColor;
                ctx.beginPath();
                ctx.moveTo(halfCanvasSize, halfCanvasSize);
                ctx.arc(halfCanvasSize, halfCanvasSize, excircleRadius, -halfPI, -halfPI + radian);
                ctx.closePath();
                ctx.fill();
            }

            //渲染數位
            function renderNum(num) {
                ctx.fillStyle = "black";
                ctx.font = num < 10 ? singleNumFont : doubleNumFont;
                ctx.fillText(num, halfCanvasSize, halfCanvasSize);
            }

            //渲染
            function render() {
                renderBg();
                renderMask(radian);
                renderNum(countdownTime);
            }

            //更新
            function update() {
                radian += radianStep;
                if(radian >= (doublePI + radianStep)) {
                    radian = 0;
                    countdownTime--;
                }
                if(countdownTime < 0) {
                    stop();
                }
            }

            //迴圈
            function loop() {
                render();
                update();
            }

            //停止
            function stop() {
                if(intervalId === 0) {
                    return;
                }
                clearInterval(intervalId);
                intervalId = 0;

            }

            //開始倒計時
            function restart() {
                stop();
                countdownTime = 10;
                radian = 0;
                intervalId = setInterval(loop, interval);
            }

            init();
        </script>
    </body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。
JavaScript實現簡單的倒計時效果

熱門文章
