效果图如下
1.html结构
思路:分为两半,左右各五份
<!-- 转盘 -->
<div class="All">
<!-- 大圆 -->
<div class="circle">
<!-- 左边半圆 -->
<div class="left">
<div class="q1"><span>一等奖</span></div>
<div class="q2"><span>二等奖</span></div>
<div class="q3"><span>三等奖</span></div>
<div class="q4"><span>四等奖</span></div>
<div class="q5"><span>五等奖</span></div>
</div>
<!-- 右边半圆 -->
<div class="right">
<div class="q1"><span>未中奖</span></div>
<div class="q2"><span>九等奖</span></div>
<div class="q3"><span>八等奖</span></div>
<div class="q4"><span>七等奖</span></div>
<div class="q5"><span>六等奖</span></div>
</div>
</div>
<!-- 指针 -->
<div class="pointer">
<span>抽奖</span>
<div class="san"></div>
</div>
</div>
2.css
利用overflow:hidden;隐藏每个div多余的部分,transform-origin:left center;旋转中心点在左边中间。
* {
margin: 0;
padding: 0;
}
//清除浮动
.clearfix::after {
display: block;
overflow: hidden;
content: '';
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}
.All {
width: 500px;
height: 500px;
border-radius: 50%;
position: absolute;
top: 10px;
left: 100px;
transform: translate(85%, 15%);
overflow: hidden;
}
/* 大转盘 */
.circle {
width: 500px;
height: 500px;
position: relative;
transform: rotate(18deg);
}
.left {
width: 250px;
height: 500px;
overflow: hidden;
position: absolute;
left: 0;
}
.right {
width: 250px;
height: 500px;
overflow: hidden;
position: absolute;
right: 0;
}
.left div {
width: 250px;
height: 500px;
position: absolute;
transform-origin: right center;
}
.right div {
width: 250px;
height: 500px;
position: absolute;
transform-origin: left center;
}
.left .q1 {
background-color: rgb(100, 155, 236);
}
.left .q2 {
background-color: wheat;
transform: rotate(-36deg);
}
.left .q3 {
background-color: orange;
transform: rotate(-72deg);
}
.left .q4 {
background-color: rebeccapurple;
transform: rotate(-108deg);
}
.left .q5 {
background-color: rgb(153, 185, 233);
transform: rotate(-144deg);
}
.right .q1 {
background-color: rgb(3, 52, 126);
}
.right .q2 {
background-color: hotpink;
transform: rotate(36deg);
}
.right .q3 {
background-color: lightblue;
transform: rotate(72deg);
}
.right .q4 {
background-color: red;
transform: rotate(108deg);
}
.right .q5 {
background-color: darksalmon;
transform: rotate(144deg);
}
/* span文本 */
.left span {
text-align: center;
font-size: 20px;
font-weight: 700;
position: absolute;
top: 40px;
left: 155px;
transform: rotate(-15deg);
}
.right span {
text-align: center;
font-size: 20px;
font-weight: 700;
position: absolute;
top: 40px;
left: 35px;
transform: rotate(15deg);
}
/* 指针 */
.pointer {
width: 120px;
height: 120px;
border-radius: 50%;
background-color: black;
position: absolute;
top: -44px;
left: 160px;
transform: translate(30px, 250px);
/* 鼠标双击时取消选中文本 */
user-select: none;
}
.pointer:hover {
cursor: pointer;
}
.pointer span {
color: white;
text-align: center;
font-weight: 700;
font-size: 40px;
position: absolute;
top: 30px;
left: 20px;
}
.san {
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-bottom: 60px solid black;
border-right: 20px solid transparent;
position: absolute;
top: -173px;
left: 170px;
transform: translate(-130px, 125px);
}
3.js
var pointer = document.querySelector(".pointer");
var circle = document.querySelector(".circle");
// 获取大转盘里的文字
var span = document.querySelectorAll('.circle span');
//创建一个空数组
var texts = [''];
var isFlag = true;
// 点击抽奖
pointer.onclick = function() {
for (var i = 0; i < span.length; i++) {
// 将span里的文本存到新数组中
texts[i] = span[i].innerHTML;
}
// 随机函数
var random = parseInt(sj());
// 当isFlag为true时,多次点击没有用
if (isFlag) {
//当取到某一个数时,大转盘旋转到其角度
switch (random) {
case 1:
ran(18, texts[random]);
break;
case 2:
ran(54, texts[random]);
break;
case 3:
ran(90, texts[random]);
break;
case 4:
ran(126, texts[random]);
break;
case 5:
ran(162, texts[random]);
break;
case 6:
ran(198, texts[random]);
break;
case 7:
ran(234, texts[random]);
break;
case 8:
ran(270, texts[random]);
break;
case 9:
ran(306, texts[random]);
break;
case 10:
ran(342, texts[random]);
break;
}
console.log(random);
}
}
function sj() {
return Math.round(Math.random() * 10 + 1);
}
// 定时器
var time = '';
function ran(angle, text) {
var begin = 0;
// 圈数
var cycles = 1800;
time = setInterval(function() {
if (begin >= (cycles + angle)) {
clearInterval(time);
isFlag = true;
} else {
isFlag = false;
circle.style.transform = "rotate(" + (cycles + begin) + "deg)";
// 缓慢动画公式,向上取整
begin += Math.ceil((cycles + angle - begin) * 0.1);
}
}, 100)
}