圆弧倒计时器

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            /* 动态计时圈 */
            .circleContainer{
                width: 100%;
                height: 100%;
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .outbox{
                border: 10px inset rgba(135, 217, 250, 0);;
                width: 270px;
                height: 270px;
                border-radius: 100%;
                /* background-color: #FB8F26; */
            }
            .ballBox{
                position: absolute;
                left: 50%;
                top:50%;  
                transform:translate(-50%,-50%);
                border: 5px inset rgba(135, 217, 250, 0);
                width: 295px;
                height: 295px;
                display: flex;
                justify-content: center;
                /* background-color: #FB8F26; */
            }
            .inner{
                width:25px;
                height:25px;
                border-radius:100%;
                background-color: #ffffff;
                transform-origin:50% 150px;/**50px为环绕半径*/
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .inners{
                width:15px;
                height:15px;
                border-radius:100%;
                background-color: #5CCFFE;
            }
            .innerAni{
                animation:an-circle;
            }
            @keyframes an-circle  {
            to {
                transform: rotate(1turn);
            }
            }
            #circle{
                stroke-dasharray:880,880; /* stroke-dasharray值为圆的周长:2*3.14*2 */
                stroke-dashoffset:880;/* strokedashoffset值为圆的周长:2*3.14*2 */
                stroke-linecap: round;
                transform: rotate(270deg);/*strok默认起点是在右上角即90°,旋转角度另角度在0°*/
                transform-origin: 50% 50%;
            }
            .container{
                width: 298px;
                height: 315px;
                margin-top: 0.223rem;
                background-color:#818181;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="circleContainer">
                <svg  width="300" height="300" viewBox="0 0 300 300">
                   <circle id="circle" cx="150" cy="150" r="140"  fill="none" stroke-width="10" stroke="white" />
                </svg>
           </div>
           <div class="ballBox">
               <div class="inner" id="ball">
                   <div class="inners"></div>
               </div>
           </div>
        </div>
        <button onclick="timerStart()">开始计时</button>
    </body>
    <script type="text/javascript">
        var circle = document.getElementById('circle');
        var ball = document.getElementById('ball')
        function timerStart(){
            reset()
            setTimeout(() => {
                getTotalSeconds()
            }, 1);
        }
        function getTotalSeconds(){
            hour = 0
            minute = 0;
            second = 10;
            total = (parseInt(hour)*60*60) + (parseInt(minute)*60) + parseInt(second);
            circle.style.strokeDashoffset = '0'
            circle.style.transitionDuration = total+"s";
            circle.style.transitionProperty = 'all'
            ball.style.animationDuration = total+"s";
            ball.style.animationPlayState = "running";
            ball.classList.add("innerAni");
            set(1000*total);
        }
        function set(total){
            let interval = setInterval(ret,total);
            function ret(){
                clearInterval(interval);
            }
        }
        function reset(){
            ball.classList.remove("innerAni");
            circle.style.strokeDashoffset = '880'
            circle.style.transitionDuration = "0s";
            circle.style.transitionProperty = 'all'
        }
        </script>
</html>

上一篇:桥接模式(Bridge Pattern)


下一篇:面向对象构造方法