alsy

最近在学习前端的一些知识,发现border的功能十分强大啊!

首先来看看demo

就是这么一个圆形的进度条,在文本框中输入0-100的数值下面的进度条相应的转到多少

这个主要是利用border,旋转和css动画来实现的,主要思想是利用两个div来互相遮挡border形成的一个只有半圈有颜色的圆形,再利用旋转div的角度来调整显示

上代码:

html+css+js(这里引入了jquery)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="KeyWord" content="cicle,learning">
        <meta name="description" content="cicle-learning">
        <meta name="Author" content="alsy">
        <title>圆形进度条</title>

        <!-- style-start -->
            
        <!-- style-end -->

        <style>
            .content {
                width: 400px;
                height: 400px;
                margin: 10px auto 100px;
            }
            .content .input{
                position: relative;
                margin: 40px auto;
            }
            .content .cicle {
                position: relative;
                margin: 100px auto;
                width: 100px;
                height: 100px;
                border-width: 20px;
                border-color: red;
                border-style: solid;
                border-radius: 50%;
            }
            .content .cicle .bar {
                position: absolute;
                width: 70px;
                height: 140px;
                overflow: hidden;
            }
            .content .cicle .bar-left {
                top: -20px;
                left: -20px;
            }
            .content .cicle .bar-left .bar-left-an{
                position: absolute;
                z-index: 10;
                width: 100px;
                height: 100px;
                border-width: 20px;
                border-color: transparent transparent green green;
                border-style: solid;
                border-radius: 50%;
                transform: rotate(-135deg);
            }
            .content .cicle .bar-right {
                top: -20px;
                left: 50px;
            }
            .content .cicle .bar-right .bar-right-an {
                position: absolute;
                left: -70px;
                z-index: 20;
                width: 100px;
                height: 100px;
                border-width: 20px;
                border-color: green green transparent transparent;
                border-style: solid;
                border-radius: 50%;
                transform: rotate(-135deg);
            }
            .content .cicle .tx {
                position: absolute;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                font-size: 20px;
                font-weight: 800;
                color: green;
            }
        </style>


    </head>
    <body>

    <div class="content">
        <div class="input">
            <label>进度条:</label><input type="text" id="inp"/>
        </div>
        <div class="cicle">
            <div class="bar bar-left">
                <div class="bar-left-an"></div>
            </div>
            <div class="bar bar-right">
                <div  class="bar-right-an"></div>
            </div>
            <div class="tx">0%</div>
        </div>
    </div>
        

        <!-- import-js -->
            <script type="text/javascript" src="js/jquery.js"></script>
        <!-- import-my-js -->
            

            <script type="text/javascript">
                $(document).ready(function() {
                    var cicle = cle = function() {
                        
                        var oTx = $(".tx");

                        var cicleTransform = function(num, old_num) {
                            var b_l_a = $(".bar-left-an");
                            var b_r_a = $(".bar-right-an");
                            var c_num = num;
                            if(c_num > 50) {
                                b_r_a.css({
                                    "transform": "rotate(45deg)",
                                    "transition": "transform 1s linear"
                                });
                                setTimeout(function() {
                                    b_l_a.css({
                                        "transform": "rotate(" + (((c_num-50)/100*360)-135) + "deg)",
                                        "transition": "transform 1s linear"
                                    });
                                },1000);
                            } else {
                                if(old_num > 50) {
                                    setTimeout(function() {
                                        b_r_a.css({
                                            "transform": "rotate(" + ((c_num/100*360)-135) + "deg)",
                                            "transition": "transform 1s linear"
                                        });
                                    },1000);
                                    b_l_a.css({
                                        "transform": "rotate(-135deg)",
                                        "transition": "transform 1s linear"
                                    });
                                } else {
                                    b_r_a.css({
                                        "transform": "rotate(" + ((c_num/100*360)-135) + "deg)",
                                        "transition": "transform 1s linear"
                                    });
                                }
                                
                            }
                        }

                        var setnum = function(num) {
                            oTx.text(num + "%");
                        }

                        var getnum = function() {
                            return parseInt(oTx.text());
                        }

                        var inputB = function() {
                            $("#inp").blur(function() {
                                var num = parseInt($.trim( $(this).val() ));
                                if(num>=0 && num <= 100){
                                    cicleTransform(num, getnum());
                                    setnum(num);
                                }else{
                                    alert("输入100以内的数值!");
                                }
                            });
                        }
                        
                        return {
                            init: function() {
                                inputB();
                            }
                        }
                    }();
                    cicle.init();
                });
            </script>
    </body>
</html>

 

分类:

技术点:

相关文章: