JavaScript實現(xiàn)簡單的倒計時效果

更新時間：2022年06月19日 10:14:03 作者：福州-司馬懿

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單的倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)簡單倒計時效果的具體代碼，供大家參考，具體內(nèi)容如下

<!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)";
? ? ? ? ? ? //單個數(shù)字的字體
? ? ? ? ? ? var singleNumFont = halfCanvasSize * 1.6 + "px Calibri";
? ? ? ? ? ? //兩個數(shù)字的字體
? ? ? ? ? ? var doubleNumFont = halfCanvasSize * 1.2 + "px Calibri";
? ? ? ? ? ? //每秒刷新的幀數(shù)
? ? ? ? ? ? var stepCount = 30;
? ? ? ? ? ? //定時器執(zhí)行間隔時間
? ? ? ? ? ? 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);
? ? ? ? ? ? ? ? //繪制兩個內(nèi)圈
? ? ? ? ? ? ? ? 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();
? ? ? ? ? ? }

? ? ? ? ? ? //渲染數(shù)字
? ? ? ? ? ? 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();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }

? ? ? ? ? ? //循環(huán)
? ? ? ? ? ? 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>