js倒计时效果

时间:2022-06-20 福州-司马懿人气:0
<!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>
加载全部内容