圆弧倒计时器

2021-07-28 10:34:31 阅读：190 来源： 互联网

标签：style 50% height 倒计时 width 圆弧 circle total

<!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>

标签：style,50%,height,倒计时,width,圆弧,circle,total
来源： https://blog.csdn.net/lin13958756858/article/details/119172274

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

圆弧倒计时器