html页面(包含js):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div class="page">
<div class="content">
</div>
<button>抽奖</button>
</div>
</body>
<script>
var page=document.getElementsByClassName('page')[0];
var content=document.getElementsByClassName('content')[0];
var button=document.getElementsByTagName('button')[0];
var currentdeg=0; //初始化角度
var willdeg=360+Math.random()*10*30; //最终定格的角度
button.onclick=function(){ //点击事件
content.style.transform="rotate("+willdeg+"deg)";
var enddeg=content.style.transform.slice(7); //这里enddeg获取的旋转角度其实就是willdeg,使用slice是练习获取未知的旋转角度
enddeg=parseFloat(enddeg);
setTimeout(function(){ //旋转完成后跳出奖励
if(enddeg%360>0&&enddeg%360<=60){
alert('一等奖'); //点击确定后才会执行下面的函数,即重新加载
window.location.reload(); //这里可以不用reload(),将.conten的rotate设置为0即可
}
if(enddeg%360>60&&enddeg%360<=120){
alert('二等奖');
window.location.reload();
}
if(enddeg%360>120&&enddeg%360<=180){
alert('三等奖');
window.location.reload();
}
if(enddeg%360>180&&enddeg%360<=240){
alert('四等奖');
window.location.reload();
}
if(enddeg%360>240&&enddeg%360<=300){
alert('五等奖');
window.location.reload();
}
if(enddeg%360>300&&enddeg%360<=360){
alert('六等奖');
window.location.reload();
}
},5000);
}
</script>
</html>
css页面:
.page{
width: 200px;
height: 200px;
border-radius: 50%;
background: yellow;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.content{
width: 100px;
height: 100px;
background: red;
transition:all 5s ease-out;
}
button{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 99;
}
效果图如下,点击抽奖按钮正方形将会旋转,可以将.content的内容换成想要的样式即可(如使用多个三角形,旋转不同角度达到绕满一圈的视觉效果,或者使用背景图片)。