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>

推荐阅读