<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>转盘</title>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=1"/>
<link rel="stylesheet" href="../css/bootstrap.min.css"/>
<link rel="stylesheet" href="../css/rotary.css"/>
<script src="../js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row rotary">
<div class="col-xs-12">
<div class="circle">
<div class="fan1"></div>
<div class="fan2"></div>
<div class="fan3"></div>
<div class="fan4"></div>
<div class="fan5"></div>
<div class="fan6"></div>
<div class="fan7"></div>
<div class="fan8"></div>
<span class="ct_go">GO</span>
</div>
</div>
</div>
</div>
</body>
<script>
$(function(){
//用于判断转盘是否再转防止重复点击触发重复调用
var stop=true;
//设置一个全局的初始转动间隔时间
//递归调用时该时间会不断变大
var inital_sp=3;
//该方法进行了递归调用
function circle(sp,cut,step,amount){
//变量i为转动的角度增量
var i = 0;
//参数sp表示第一次执行circle方法时的转动间隔时间
//参数cut用于指定执行circle方法转动的圈数（除最后一次）
var deg = cut * 360;
//参数step表示下一次执行circle方法时的转动间隔时间是在上一次的基础上加step
//即转动间隔时间增量（从而实现越转越慢）
//参数amount表示circle方法的递归调用次数
//变量slowest表示最后一次执行circle方法时的转动间隔时间
//主要用于停止递归调用时的判断
var slowest = inital_sp + step * amount;
if (sp + step > slowest) {
//最后一次执行circle方法时，转动的角度(这是通过随机数计算出的随机角度);
deg = (Math.floor(Math.random() * 100000) % 10) * 40 + 360;
}
var inter = setInterval(function () {
$(".ct_go").css("transform", "rotate(" + i + "deg)");
i += 5;
//circle方法执行结束的判断
if (i >= deg) {
clearInterval(inter);
//是否进行递归调用的判断
if (sp + step <= slowest) {
circle(sp + step,cut, step,amount);
}else{
stop=true;
}
}
}, sp);
}
$(".ct_go").click(function(){
if(stop){
stop=false;
circle(inital_sp,2,3,5);
}
});
});
</script>
</html>
@charset "utf-8";
body {
font-family: 黑体;
-webkit-font-smoothing: antialiased;
background-color: #f4f4f5;
}
.container-fluid {
padding: 0;
}
.row {
margin: 0;
}
.col-xs-12 {
padding: 0;
}
@keyframes mycircle {
0% {
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
10% {
transform: rotate(36deg);
-moz-transform: rotate(36deg);
-webkit-transform: rotate(36deg);
-o-transform: rotate(36deg);
}
20% {
transform: rotate(72deg);
-moz-transform: rotate(72deg);
-webkit-transform: rotate(72deg);
-o-transform: rotate(72deg);
}
30% {
transform: rotate(108deg);
-moz-transform: rotate(108deg);
-webkit-transform: rotate(108deg);
-o-transform: rotate(108deg);
}
40% {
transform: rotate(144deg);
-moz-transform: rotate(144deg);
-webkit-transform: rotate(144deg);
-o-transform: rotate(144deg);
}
50% {
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
60% {
transform: rotate(216deg);
-moz-transform: rotate(216deg);
-webkit-transform: rotate(216deg);
-o-transform: rotate(216deg);
}
70% {
transform: rotate(252deg);
-moz-transform: rotate(252deg);
-webkit-transform: rotate(252deg);
-o-transform: rotate(252deg);
}
80% {
transform: rotate(288deg);
-moz-transform: rotate(288deg);
-webkit-transform: rotate(288deg);
-o-transform: rotate(288deg);
}
90% {
transform: rotate(324deg);
-moz-transform: rotate(324deg);
-webkit-transform: rotate(324deg);
-o-transform: rotate(324deg);
}
100% {
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
.rotary {
margin-top: 50px;
}
.rotary .col-xs-12 > .circle {
border-radius: 100%;
border: 15px solid #B2232A;
width: 240px;
height: 240px;
position: relative;
margin: 0 auto;
z-index: 1000;
overflow: hidden;
}
.rotary .col-xs-12 > .circle div {
position: absolute;
width: 90px;
height: 217.27922061px;
border-left: 45px transparent solid;
border-right: 45px transparent solid;
left: 50%;
margin-left: -45px;
}
.rotary .col-xs-12 > .circle .ct_go {
display: block;
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 20px;
font-weight: normal;
color: white;
text-align: center;
line-height: 40px;
border: 4px solid white;
top: 80px;
left: 50%;
margin-left: -25px;
background-color: #ff323c;
}
.rotary .col-xs-12 > .circle .ct_go:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
border: 10px solid transparent;
border-bottom-color: white;
top: -21px;
left: 11px;
}
.rotary .fan1 {
border-top: 108.63961031px #fdd89d solid;
}
.rotary .fan2 {
border-top: 108.63961031px #fbb03b solid;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.rotary .fan3 {
border-top: 108.63961031px #fdd89d solid;
transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.rotary .fan4 {
border-top: 108.63961031px #fbb03b solid;
transform: rotate(135deg);
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-o-transform: rotate(135deg);
}
.rotary .fan5 {
border-top: 108.63961031px #fdd89d solid;
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
.rotary .fan6 {
border-top: 108.63961031px #fbb03b solid;
transform: rotate(225deg);
-moz-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
-o-transform: rotate(225deg);
}
.rotary .fan7 {
border-top: 108.63961031px #fdd89d solid;
transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
}
.rotary .fan8 {
border-top: 108.63961031px #fbb03b solid;
transform: rotate(315deg);
-moz-transform: rotate(315deg);
-webkit-transform: rotate(315deg);
-o-transform: rotate(315deg);
}
时间： 2024-10-10 17:05:05