JavaScript如何实现简单的倒计时效果

2023-07-02 11:07:49 340人浏览泡泡鱼

摘要

这篇文章主要介绍了javascript如何实现简单的倒计时效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript如何实现简单的倒计时效果文章都会有所收获，下面我们一起来看看吧。具体代码如下<

这篇文章主要介绍了javascript如何实现简单的倒计时效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇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>

JavaScript如何实现简单的倒计时效果