JS绘制圆环

最新推荐文章于 2022-12-01 14:42:32 发布

weixin_34166472

最新推荐文章于 2022-12-01 14:42:32 发布

阅读量1.4k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/baobost/p/8671286.html

版权

引用： https://www.cnblogs.com/dom-liu/p/6004375.html
作者原创的和下面修改的刚好左右相反。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS圆环绘制</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .circle {
            width: 200px;
            height: 200px;
            position: relative;
            border-radius: 50%;
            background: red;
        }

        .clip_left,.clip_right{
            width:200px;
            height:200px;
            position: absolute;
            top: 0px;left: 0px;
        }
        .circle_left, .circle_right{
            width:200px;
            height:200px;
            position: absolute;
            border-radius: 50%;
            top: 0px;left: 0px;
            background: green;
        }
        /*出于展示用的改变背景色*/
        /*.circle_left{
        background: green;
        }
        .circle_right{
        background: lightblue;
        }*/
        .circle_right,.clip_right {
            clip:rect(0,auto,auto,100px);
        }
        .circle_left , .clip_left{
            clip:rect(0,100px,auto,0);
        }

        /*
        *当top和left取值为auto时，相当于0
        *当bottom和right取值为auto时，相当于100%
        */
        .mask {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            left: 25px;
            top: 25px;
            background: #FFF;
            position: absolute;
            text-align: center;
            line-height: 150px;
            font-size: 16px;
            z-index: 10;
        }

    </style>
</head>
<body>
<!--背景圆-->
<div class="circle">
    <!--左半边圆-->
    <div class="circle_left">
        <div class="clip_left">

        </div>
    </div>
    <!--右半边圆-->
    <div class="circle_right">
        <div class="clip_right"></div>
    </div>
    <div class="mask">
        <span>0</span>%
    </div>
</div>
<script>
    $(function(){
        function go() {
            if( $('.mask span').text() <= 50 ){
                $('.circle_left').css({
                    "background":"green",
                    'z-index':'0'
                });
                $('.circle_right').css({
                    'transform':'rotate(0deg)',
                    "background":"green",
                    'z-index':'0'
                });
                $('.circle_left').css('transform','rotate(-'+($('.mask span').text()*3.6)+'deg)');
            }else{
                $('.circle_left').css({
                    'transform':'rotate(0deg)',
                    "background":"red",
                    'z-index':'1'
                });
                $('.circle_right').css('transform','rotate(-'+(($('.mask span').text()-50)*3.6)+'deg)');
            }
        }
        $('.mask span').text('0');
        go()
        setTimeout(function () {
            $('.mask span').text('25');
            go()
        },2000)
        setTimeout(function () {
            $('.mask span').text('50');
            go()
        },4000)
        setTimeout(function () {
            $('.mask span').text('75');
            go()
        },6000)
        setTimeout(function () {
            $('.mask span').text('100');
            go()
        },8000)
    })
</script>
</body>
</html>

转载于:https://www.cnblogs.com/baobost/p/8671286.html

weixin_34166472

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS绘制圆环

引用： https://www.cnblogs.com/dom-liu/p/6004375.html作者原创的和下面修改的刚好左右相反。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>JS圆环绘制</title> ...
复制链接

扫一扫