环形进度条倒计时

作者: __鹿__ | 来源:发表于2021-11-30 15:47 被阅读0次

Swift - 环形进度条（UIActivityIndicato
记环形进度条（静态，非动态从0变到100%，svg实现）
环形进度条倒计时
iOS 知识点1--环形颜色渐变进度条3
iOS绘制一个简单的环形进度条
svg进度圆环
利用 clip-path 实现环形进度条
canvas环形倒计时组件
环形进度条的渐变
实现圆形进度条的两种方式

这次结合上一篇的《手机熄屏js定时器时间不准问题及解决办法》做一个环形倒计时，实现下图中的效果：

环形倒计时.gif

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>环形倒计时</title>
    <link rel="stylesheet" href="./style.css" type="text/css">
</head>

<body>

    <div class="flex-container">
        <div class="outbox"> </div>
        <!--  SVG AREA -->
        <svg class="svg">
            <circle id="cls" class="cls run-anim" cx="80" cy="80" r="75.5"></circle>
            <circle id="smallYuan" class="roundSmall fillStyle" cx="80" cy="4" r="4"></circle>
        </svg>
        <!--  SVG AREA END -->
        <div class="boxDIv">
            <div class="OutTime" id="OutTime"></div>
        </div>
    </div>
    <script>
        let TimeVal = 1; //传入分钟
        let entryTime = parseInt(new Date().getTime() / 1000);//进入页面的当前时间
        let currentTime = 0;//当前时间
        let maxtime = TimeVal * 60; // 分钟 * 60 = 最多走几秒
        let circle = document.getElementById('cls'); //获取大圆环
        let smallYuan = document.getElementById('smallYuan'); //获取小圆圈
        let total;//动画总时长
        let count = 0;//动画总时长
        function CountDown() {
            currentTime = parseInt(new Date().getTime() / 1000); //在定时器里面每隔一秒记录当前时间；
            let TimeDifference = (currentTime - entryTime); //时间差
            let mytime = maxtime - TimeDifference  //传入的秒数 - 已经走掉的秒数  = 当前还剩多少秒数
            if (TimeDifference <= maxtime) { //如果已经走掉的秒数 小于等于  传入的秒数
                minutes = Math.floor(mytime / 60);
                seconds = Math.floor(mytime % 60);
                console.log(minutes, seconds)
                if (seconds <= 9) {
                    seconds = '0' + seconds
                }
                if (minutes <= 9) {
                    minutes = '0' + minutes
                }
                msg = minutes + ":" + seconds;
                document.getElementById('OutTime').innerHTML = msg;
                if(count == 0){
                    circleTime();
                }
                count ++
            } else {
                count = 0;
                clearInterval(timer);
                console.log("时间到，结束!");
            }
        }
        
        function circleTime() {
            total = maxtime; 
            circle.style.animationDuration = total + "s";//动画时长
            circle.style.animationPlayState = "running";
            smallYuan.style.animationDuration = total + "s";//动画时长
            smallYuan.style.animationPlayState = "running";
            //动画播放状态 running：指定正在运行的动画
        
        }
        timer = setInterval("CountDown()", 1000);
    </script>
</body>

</html>

* {
    margin: 0;
    padding: 0;
}

html {
    font: 100% "Montserrat Light", serif;
    height: 100vh;
    width: 100%;
    overflow: visible;
}

body {
    height: inherit;
    width: inherit;
}

.flex-container {
    width: 180px;
    height: 180px;
    margin: 0 auto;
   position: relative;
    background-color: #eeeeee;
    border-radius: 50%;
    color: #ffffff;
    margin-top: 100px;
}

.outbox {
    width: 85%;
    height: 85%;
    border-radius: 100%;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
}

.cls {
    fill: none;
    stroke: #000;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 4px;
    stroke-dasharray: 475;
    /*stroke-dasharray:475;代表： 虚线长475，间距475，然后重复 虚线长475，间距475 */
    stroke-dashoffset: 475;/* 偏移量 */
    /* stroke-dashoffset: 475;  用半径 * 2 * 3.1415926  得出偏移量 475 */
    transform: rotate(270deg);
    transform-origin: 50% 50%;
}

.run-anim {
    -webkit-animation-name: dash;
    -moz-animation-name: dash;
    -o-animation-name: dash;
    animation-name: dash;
    animation-duration: 0s;
    animation-play-state: paused;
    animation-fill-mode: none;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

@keyframes dash {
    0% {
        stroke: #D65E9E;
        stroke-dashoffset: 0;
    }

    100% {
        stroke: #D65E9E;
        stroke-dashoffset: 475;
    }
}


.boxDIv {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 38px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #333333;
}



.fillStyle{
    fill: #fff;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
}
.roundSmall{
    stroke: #e1e1e1;
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -o-animation-name: rotate;
    animation-name: rotate;
    animation-duration: 0s;
    animation-play-state: paused;
    animation-fill-mode: none;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

@keyframes rotate {
    0% {
        transform: rotate(-1deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}