找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发增加数字显示的环形进度条

2018-11-30 21:20:43 分类：JavaScript 阅读(145) 评论(0)
软件产品前端开发思想
苏州软件前端开发薪资待遇
ipad上前端开发软件

html 代码

<!DOCTYPE html PUBLIC “-//W3C//DTD html 4.01 Transitional//EN”>
    <head>
        <meta name=”page-view-size” content=”640*530″ />
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <style>
            .wapper {
                position: absolute;
                left: 100px;
                top: 100px;
                box-sizing: border-box;
            }
            .text {
                position: absolute;
                left: 30px;
                top: 40px;
                font-family: ‘Microsoft YaHei’;
                font-weight: bold;
                color: indianred;
            }
            .rect {
                position: absolute;
                width: 50px;
                height: 100px;
                overflow: hidden;
            }
            .right {
                left: 50px;
            }
            .circle {
                position: absolute;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                box-sizing: border-box;
                border: 5px solid indianred;
            }
            .circle_right {
                left: -50px;
                clip: rect(0px 50px 100px 0px);
                animation: roll 5s linear 0s 1 forwards;
            }
            .circle_left {
                clip: rect(0px 100px 100px 50px);
                animation: roll 5s linear 5s 1 forwards;
            }
            @keyframes roll {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(180deg);
                }
            }
        </style>
    </head>
    <body leftmargin=”0″ topmargin=”0″>
        <div class=”wapper”>
            <div class=”rect right”>
                <div class=”circle circle_right”></div>
            </div>
            <div class=”rect left”><div class=”circle circle_left”></div></div>
            <div class=”text”><span id=”num”>1</span><span>%</span></div>
        </div>
    </body>
    <script type=”text/javascript”>
        window.onload = function() {
            var $num = document.getElementById(‘num’)
            ;(function() {
                var i = 1,
                    timer
                add()
                function add() {
                    var timer = setTimeout(function() {
                        add()
                    }, 100)
                    $num.innerHTML = i
                    i < 100 ? i++ : clearTimeout(timer)
                }
            })()
        }
    </script>
</html>
主流前端开发软件
软件前端开发测试
web前端开发使用的软件下载
» 本文来自：前端开发者 » 《前端开发增加数字显示的环形进度条》
» 本文链接地址：https://www.rokub.com/6886.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论