这个是很简易的转盘，只用了html，css，js
通过css产生一个转盘上的指针，用js动态改变css中的transparent改变指针的角度。再添加一个背景图片类似于奖项的转盘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dial</title>
<link rel="stylesheet" type="text/css" href="dial.css">
<script type="text/javascript" src="dial.js"></script>
</head>
<body>
<div id="sum">
<div id="content">
<div id="tri">
</div>
<div id="center"><h1>抽奖</h1></div></div></div>
</body>
</html>
背景图片放在sum中，tri是指针上的三角形，center是指针上的圆，三角形和圆都在content中以便一起运动。
*{
margin: 0px;
padding:0px;
}
#sum{
height: 550px;
width: 700px;
background-image: url(dial.jpg);
position: relative;
}
#content{
padding: 0px;
height: 140px;
width: 140px;
left: 289px;
top: 109px;
margin: 120px auto 0px;
transform:rotate(0deg);
position: absolute;
}
#center{
height: 140px;
width: 140px;
border-radius: 140px;
background-color: #EE4F10;
color: white;
line-height: 140px;
font-weight: bold;
font-size: 30px;
text-align: center;
z-index: 2;
position:relative;
}
#tri{
height: 0px;
width: 0px;
top: -27px;
left: 26px;
border-left: 45px solid transparent;
border-right:45px solid transparent;
border-bottom: 45px solid #EE4F10;
z-index: -1;
position: absolute;
}
window.onload=function(){
var data=[320,260,180,620,760,380];
var content=document.getElementById("content");
var center=document.getElementById("center");
center.onclick=play;
var timer=null;
var count=0;
var degv=0;
var random=0;
function play(){
count=0;
random=Math.floor(Math.random()*6);
clearInterval(timer);
timer=setInterval(function(){
roll();
},30);
}
function roll(){
degv=count++;
degv=degv*20;
if(degv==data[random])
{
clearInterval(timer);}
content.style.webkitTransform="rotate("+degv+"deg)";
content.style.msTransform="rotate("+degv+"deg)";
content.style.MozTransform="rotate("+degv+"deg)";
content.style.OTransform="rotate("+degv+"deg)";
content.style.transform="rotate("+degv+"deg)";
}
}
设置一个定时器不断的调用roll方法不断的加指针旋转的角度，直到等于数组中随机选中的角度就会停下来。
时间： 2024-10-07 09:13:09