画个等分圆玩玩

代码走起

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <link rel="stylesheet" href="">
    <style>

        #app{
            width: 500px;
            height: 500px;
            margin: 1em auto;
        }

        .container{
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            border-radius: 50%;
            z-index: 0;
        }

        .circle{
             position: absolute;
             border-radius: 50%;
        }

        .one{
            width: 98%;
            height: 98%;
            background: #eee;
            z-index: 1;
            top:1%;
            left: 1%;
        }

        .two{
            width: 70%;
            height: 70%;
            z-index: 2;
            left: 15%;
            top: 15%;
            background: #ddd;
        }

        .three{
            width: 40%;
            height: 40%;
            z-index: 3;
            left: 30%;
            top: 30%;
            background: #ccc;
        }

         .thour{
            width: 10%;
            height: 10%;
            z-index: 4;
            left: 45%;
            top: 45%;
            background: #fff;
        }

        .position-box{
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            border-radius: 50%;
            color: #FFFFFF;
        }

        .position-box .two-item{
            position: absolute;
            transform-origin: 50% 100%;
            width: 100%;
            height: 50%;
        }
        .position-box .two-item span{
            display: inline-block;
            width: 40%;
            margin: 20% auto;
            text-align: center;
        }

        .position-box .other-item{
            position: absolute;
            transform-origin: left top;
            width: 50%;
            height: 50%;
            left: 50%;
            top: 50%;
            
        }
        .position-box .other-item span{
            display: inline-block;
            overflow: hidden;
            text-align: center;
            width: 50%;
            margin: 45% auto;
        }

        .rotate{
            transform:rotate(720deg) ;
            -ms-transform:rotate(720deg);   /* IE 9 */
            -moz-transform:rotate(720deg);  /* Firefox */
            -webkit-transform:rotate(720deg); /* Safari 和 Chrome */
            -o-transform:rotate(720deg);
            -webkit-transition-duration: 3s;
        }
        .btn-box{

        }

        .btn{
            float: left;
            padding: 5px 10px;
            color: #fff;
            background: green;
            margin-left: 10%;
        }

        .arrowhead-box{
            position: absolute;
            width: 10%;
            height: 10%;
            left: 45%;
            top: 45%;
            z-index: 99;
        }
        .arrowhead{
            height: 3px;
            width: 400%;
            background: #fff;
            margin-top: 50%;
            margin-left: 50%;
        }

    </style>
</head>
<body>
    <div id="app">
        
        <div class="container">
            <div class="circle one">
                <div class="position-box" v-bind:style="{transform:'rotate('+circles.circle1.initAngle+'deg)', '-webkit-transition-duration': times}">
                    <div v-for="(item, index) in circles.circle1.list" class="other-item"
                         v-bind:style="{background: item.bgColor, transform: 'rotate('+circles.circle1.avgAngle*(index)+'deg)skewX(45deg)' }">
                         <span  v-bind:style="{transform: 'rotate('+(circles.circle1.avgAngle*index)*-1+'deg)skewX(1deg)' }" >{{item.content}}</span>
                     </div>
                </div>
            </div>
            <div class="circle two">
                <div class="position-box" v-bind:style="{transform:'rotate('+circles.circle2.initAngle+'deg)', '-webkit-transition-duration': times}">
                    <div v-for="(item, index) in circles.circle2.list" class="two-item"
                         v-bind:style="{background: item.bgColor, transform: 'rotate('+circles.circle2.avgAngle*(index)+'deg)' }">
                            <span>{{item.content}}</span>
                     </div>
                </div>
            </div>
            <div class="circle three">
                <div class="position-box" v-bind:style="{transform:'rotate('+circles.circle3.initAngle+'deg)', '-webkit-transition-duration': times}">
                    <div v-for="(item, index) in circles.circle3.list" class="other-item"
                         v-bind:style="{background: item.bgColor, transform: 'rotate('+circles.circle3.avgAngle*(index)+'deg)skewX(30deg)' }">
                         <span v-bind:style="{transform: 'rotate('+(circles.circle3.avgAngle*index)*-1+'deg)skewX(-30deg)' }" >{{item.content}}</span>
                     </div>
                </div>
            </div>

            <div class="circle thour">
                <div class="position-box" v-bind:style="{transform:'rotate('+circles.circle4.initAngle+'deg)', '-webkit-transition-duration': times}" >
                    <div v-for="(item, index) in circles.circle4.list" class="two-item"
                         v-bind:style="{background: item.bgColor, transform: 'rotate('+circles.circle4.avgAngle*(index)+'deg)' }">
                            <span>{{item.content}}</span>
                     </div>
                </div>
            </div>

            <div class="arrowhead-box">
                <div class="arrowhead"></div>
            </div>

        </div>

        <div class="btn-box">
            <div class="btn" v-on:click="rotateAll">旋转所有</div>
            <!-- <div class="btn" v-on:click="rotateFun4">旋转4</div>
            <div class="btn" v-on:click="rotateFun3">旋转3</div>
            <div class="btn" v-on:click="rotateFun2">旋转2</div>
            <div class="btn" v-on:click="rotateFun1">旋转1</div> -->
        </div>
        <div style="clear: both;margin-top: 10px;" v-html="result">
        </div>

</div>  

   

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data: {
            circles:{
                circle1:{
                    number: 8,
                    initAngle: 0,
                    avgAngle: 45,
                    list:[{
                            content: "喜",
                            bgColor: '#FF99CC'
                        },{
                            content: "怒",
                            bgColor: '#FFCCCC'
                        },{
                            content: "忧",
                            bgColor: '#FFFF99'
                        },{
                            content: "思",
                            bgColor: '#CCCCFF'
                        },{
                            content: "悲",
                            bgColor: '#FF9966'
                        },{
                            content: "恐",
                            bgColor: '#FFCC99'
                        },{
                            content: "惊",
                            bgColor: '#CCFF99'
                        },{
                            content: "全",
                            bgColor: '#CCCCCC'
                        }]
                    },
                    circle2:{
                        number: 2,
                        initAngle: 0,
                        avgAngle: 180,
                        list:[{
                                content: "财富",
                                bgColor: '#333399'
                            },{
                                content: "爱情",
                                bgColor: '#F00000'
                            }]
                    },
                    circle3:{
                        number: 6,
                        initAngle: 0,
                        avgAngle: 60,
                        list:[{
                                content: "责任",
                                bgColor: '#666699'
                            },{
                                content: "诚信",
                                bgColor: '#FFCCCC'
                            },{
                                content: "尊重",
                                bgColor: '#666699'
                            },{
                                content: "合作",
                                bgColor: '#FFCCCC'
                            },{
                                content: "激情",
                                bgColor: '#666699'
                            },{
                                content: "敬业",
                                bgColor: '#FFCCCC'
                            }]
                    },
                    circle4:{
                        number: 2,
                        initAngle: 0,
                        avgAngle: 180,
                        list:[{
                                content: "单",
                                bgColor: '#003399'
                            },{
                                content: "双",
                                bgColor: '#F00000'
                            }]
                    }

            },
            times:'1.5s',
            count: 0,
            result: ""
          },
          computed: {
           
          },
          methods:{
            rotateFun4: function(){
                this.circles.circle4.initAngle= this.circles.circle4.initAngle+this.randomNum();
            },
             rotateFun3: function(){
                this.circles.circle3.initAngle= this.circles.circle3.initAngle+this.randomNum();
            },
             rotateFun2: function(){
                this.circles.circle2.initAngle= this.circles.circle2.initAngle+this.randomNum();
            },
             rotateFun1: function(){
                this.circles.circle1.initAngle= this.circles.circle1.initAngle+this.randomNum();
            },
             rotateAll: function(){
                this.count++;
               this.rotateFun4();
               this.rotateFun3();
               this.rotateFun2();
               this.rotateFun1();
               setTimeout(showResult, 1500);
            },
             randomNum:function(){
                return 720+Math.ceil(Math.random()*360);
            },
            //最终旋转的角度
            resultAngle:function(number){
                if(number == 1){
                    // var rsltAng = this.circles.circle1.initAngle-720*this.count;
                    var rsltAng = this.circles.circle1.initAngle;
                    var angle = Math.ceil(rsltAng/this.circles.circle1.avgAngle);
                    angle = angle%this.circles.circle1.list.length;
                    angle=this.circles.circle1.list.length-angle;
                    if(angle == this.circles.circle1.list.length){
                        angle=0;
                    }
                    console.log("reWard1=",this.circles.circle1.list[angle].content);
                    return this.circles.circle1.list[angle].content;
                }else if(number == 2){
                    var rsltAng = this.circles.circle2.initAngle;
                    var angle = Math.ceil(rsltAng/this.circles.circle2.avgAngle);
                    angle = angle%this.circles.circle2.list.length;
                    if(angle == 0){
                        angle=this.circles.circle2.list.length-1;
                    }else{
                        angle=0;
                    }
                    console.log("reWard2=",this.circles.circle2.list[angle].content);
                    return this.circles.circle2.list[angle].content;
                }else if(number == 3){
                    // var rsltAng = this.circles.circle1.initAngle-720*this.count;
                    var rsltAng = this.circles.circle3.initAngle;
                    var angle = Math.ceil(rsltAng/this.circles.circle3.avgAngle);
                    angle = angle%this.circles.circle3.list.length;
                    angle=this.circles.circle3.list.length-angle;
                    if(angle == this.circles.circle3.list.length){
                        angle=0;
                    }
                    console.log("reWard3=",this.circles.circle3.list[angle].content);
                    return this.circles.circle3.list[angle].content;
                }else if(number == 4){
                    var rsltAng = this.circles.circle4.initAngle;
                    var angle = Math.ceil(rsltAng/this.circles.circle4.avgAngle);
                    angle = angle%this.circles.circle4.list.length;
                    if(angle == 0){
                        angle=this.circles.circle4.list.length-1;
                    }else{
                        angle=0;
                    }
                    console.log("reWard4=",this.circles.circle2.list[angle].content);
                    return this.circles.circle4.list[angle].content;
                }
            }

          }
        })

        //显示结果
        function showResult(){
           var content1 =app.resultAngle(1);
           var content2 =app.resultAngle(2);
           var content3 =app.resultAngle(3);
           var content4 =app.resultAngle(4);
           app.result=` <p>今日幸运数字: ${content4} 数,</p> <p> 工作态度: ${content3} ,</p> <p>事业爱情: ${content2},</p> <p>最多心情:${content1}</p>`;
        }
</script>
</body>
</html>