H5动画实现简单的转盘抽奖。
- 根据css旋转动画 roate来实现。
- 计算好奖品数量，算出每份奖品所占的比例/度数。
- 根据随机度数和单个奖品度数，计算指针停留下来的区域属于哪个奖品。
代码部分
- 设置22.5度 是因为整个圆360度，一共有8份，那么每一份就45度，为了让每次指针停留的地方都为每一块的中间，所以除以2，就是22.5度。比如 “谢谢参与” 这个奖品，它对应的是 22.5*15 度，这样算下来刚好是在谢谢参与这块的中间部分。
- 初始默认为旋转动画为5秒，默认开始旋转基准角度为3600度(10圈)，然后根据随机数 因为是8个奖品，所以随机数范围在0-7之间，3600+度数数组[随机数] 这样就拿到了我们实际所旋转的总度数。
- 至于如何判断停留区域，因为奖品数组和度数数组是对应的，所以随机数就是他们俩的共同下标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<link rel="stylesheet" href="./index.css">
<title>H5抽奖</title>
</head>
<body>
<div class="top-content">
<img src="./cj-title.png">
</div>
<audio autoplay="autoplay" id="music">
<source src="" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<div class="c-content">
<div class="c-bg">
<img src="./cj-bg.png">
</div>
<div class="c-zz" >
<img src="./cj-zz.png">
</div>
</div>
<div class="btsj">指定手机</div>
</body>
<script>
window.onload=()=>{
//指针绑定点击事
let jplist = ['谢谢参与','IphoneX','牛排券','百度网盘Vip','Ps4 pro','再来一次','啤酒一扎','纪念U盘'];
let l = 22.5;
let roateN = [l*15,l*13,l*11,l*9,l*7,l*5,l*3,l*1];
let elebg = document.querySelector(".c-bg img");
let eleZZ = document.querySelector(".c-zz");
let r; //随机数
function getRoate(num){
//生成随机数
r = num || Math.floor(rd(0,7))*1;
console.log(r, roateN[r]);
let rdnum = roateN[r] + 3600;
console.log("总度数",rdnum);
//旋转动画
elebg.style.transform = 'rotate('+rdnum+'deg)';
elebg.style.transitionDuration = '5s';
elebg.style.transitionTimingFunction = 'cubic-bezier(.07,.25,0,1)';
setTimeout(() => {
let numR = roateN[r];
console.log("定位",numR);
alert(jplist[r]);
elebg.style = "";
}, 5100);
}
eleZZ.addEventListener("click",()=>{
getRoate();
})
//指定手机
let btsjele = document.querySelector(".btsj");
btsjele.addEventListener("click",()=>{
getRoate(1);
})
//随机数
function rd(n,m){
var c = m-n+1;
return (Math.random() * c + n);
}
function autoPlay(src) {
const audio = new Audio();
// 该元素用来在页面上控制音乐的播放和暂停
const musicEle = document.querySelector("#music")
audio.src = src;
audio.preload = "auto"
let played = false;
// 第一次触摸结束后开始播放音乐
document.addEventListener("touchend", () => {
if (played) return;
if (audio.paused) {
played = true;
audio.play();
}
});
// 兼容微信
if (window.WeixinJSBridge) {
WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
played = true;
audio.play();
}, false);
} else {
document.addEventListener("WeixinJSBridgeReady", function () {
WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
played = true;
audio.play();
});
}, false);
}
}
autoPlay("./music.mp3");
}
</script>
</html>@charset "UTF-8";
html,body{
margin: 0px;
padding: 0px;
height: 100%;
}
body{
background-image: url('./bg.png');
background-size: 100%;
background-repeat: no-repeat;
background-image: url(./bg.png);
background-size: 100%;
background-repeat: no-repeat;
display: flex;
height: 100%;
flex-direction: column;
justify-content: space-around;
}
.top-content{
text-align: center;
}
.top-content img{
width: 320px;
}
*{
box-sizing: border-box;
}
.c-content{
width: 16.875rem /* 270/16 */;
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: relative;
}
.c-bg{
width: 100%;
}
.c-bg img{
width: 100%;
}
.c-zz{
width: 3.1rem;
position: absolute;
/* animation-name: xz;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
transform: rotate(3600deg); */
}
@keyframes xz{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(3600deg);
}
}
.c-zz img{
width: 100%;
}
.btsj{
text-align: center;
background-color: #ef4d41;
width: 120px;
letter-spacing: 3px;
border-radius: 5px;
padding: 5px;
margin: 0 auto;
margin-top: 10px;
color:#ffffff;
}图片资源
