代碼走起
<!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">旋轉(zhuǎn)所有</div>
<!-- <div class="btn" v-on:click="rotateFun4">旋轉(zhuǎn)4</div>
<div class="btn" v-on:click="rotateFun3">旋轉(zhuǎn)3</div>
<div class="btn" v-on:click="rotateFun2">旋轉(zhuǎn)2</div>
<div class="btn" v-on:click="rotateFun1">旋轉(zhuǎn)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: "責(zé)任",
bgColor: '#666699'
},{
content: "誠信",
bgColor: '#FFCCCC'
},{
content: "尊重",
bgColor: '#666699'
},{
content: "合作",
bgColor: '#FFCCCC'
},{
content: "激情",
bgColor: '#666699'
},{
content: "敬業(yè)",
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);
},
//最終旋轉(zhuǎn)的角度
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;
}
}
}
})
//顯示結(jié)果
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>今日幸運數(shù)字: ${content4} 數(shù),</p> <p> 工作態(tài)度: ${content3} ,</p> <p>事業(yè)愛情： ${content2},</p> <p>最多心情：${content1}</p>`;
}
</script>
</body>
</html>
