也不太會講解，直接貼代碼吧，內容很簡單，應該都可以看懂
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="author" content="域葉">
<title>超簡單轉盤抽獎效果</title>
<style>
#bg {
width: 650px;
height: 600px;
margin: 0 auto;
background: url(img/content_bg.jpg) no-repeat;
position: relative;
}
img.zhuanpan {
position: absolute;
z-index: 10;
top: 155px;
left: 247px;
}
img.content {
position: absolute;
z-index: 5;
top: 60px;
left: 116px;
transition: all 4s;
}
</style>
</head>
<body>
<div id="bg">
<img id="btn" class="zhuanpan" src="img/zhuanpan.png" alt="zhuanpan">
<img id="content" class="content" src="img/content.png" alt="content">
</div>
<script>
var rotate = 720//默認至少轉兩圈
var canGet = [1,2,3]//中獎范圍(比如你只打算讓用戶抽中1、2、3等獎，其他的概率為0)
var nowNum = 0;//當前點擊次數
var canGetRanDom = 0;//中獎范圍內的隨機度數
document.getElementById("btn").onclick = function(){
var ranDom = Math.floor(Math.random() * 3)
canGetRanDom = Math.floor(Math.random() * 40) + 5
//原理：隨機計算本輪轉圈的度數，再加上默認轉兩圈（為了視覺效果）
btnFun((Math.ceil((canGet[ranDom]-1) * 51.4) + canGetRanDom) + rotate*(Number(nowNum)+1),canGet[ranDom])
nowNum++
}
function btnFun(rotateS,now){
document.getElementById("content").style.transform = "rotate("+ rotateS +"deg)"
setTimeout(function(){
alert("恭喜你獲得免單"+now+"等獎")
},4000)
}
</script>
</body>
</html>下面是效果圖
注釋也比較清晰
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/143307.html
標籤：其他