手写 倒计时动画

 

 

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时特效</title>
    <style>
        .bg{
            position:relative;
            width:500px;
            height:500px;
            background-color:blue;
        }

        #line{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="bg">
        <canvas id="line" width="40px" height="40px"></canvas>
    </div>

    <script>
        window.onload = function(){
            var count = 2;
            var time = 5;
            var timer,timer1;

            function initCanvas(){
                var canvas = document.getElementById('line');
                var ctx = canvas.getContext('2d');
                ctx.beginPath();
                ctx.fillStyle="#ccc";
                ctx.lineWidth = 2;
                ctx.strokeStyle = "#fff";
                ctx.fillRect(0,0,40,40);
                ctx.font="16px sans-serif";
                ctx.fillStyle="#fff";
                ctx.fillText(time,16,25);
                var circle = {
                    x : 20,    //圆心的x轴坐标值
                    y : 20,    //圆心的y轴坐标值
                    r : 19        //圆的半径
                };
                var PI = count * Math.PI;
                ctx.arc(circle.x, circle.y, circle.r, 0, PI, false);    
                //按照指定的路径绘制弧线
                ctx.stroke();
            }

            timer = setInterval(function(){
                time--;
                if(time <= 0){
                    time = 0;
                    initCanvas();
                    clearInterval(timer)
                    return;
                }
            },1000)
            timer1 = setInterval(function(){
                count = Number(count - 0.01).toFixed(2);
                if(count <= 0){
                    clearInterval(timer1)
                    return;
                }
                initCanvas();
            },time * 1000 / 200)

        }
    </script>
</body>
</html>
posted @ 2021-09-20 19:06  YJW灬  阅读(44)  评论(0)    收藏  举报