H5动画实现简单的转盘抽奖。

H5动画实现简单的转盘抽奖。

根据css旋转动画 rotate来实现。
计算好奖品数量，算出每份奖品所占的比例/度数。
根据随机度数和单个奖品度数，计算指针停留下来的区域属于哪个奖品。

代码部分

设置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;
}

图片资源

演示地址

演示地址 Git地址 CSDN下载地址

H5动画实现简单的转盘抽奖。相关推荐

移动换H5 の纯CSS3实现大转盘抽奖布局 by FungLeo
移动换H5 の纯CSS3实现大转盘抽奖布局 by FungLeo 前言本教程不涉及JS控制旋转部分,也不涉及后端输出抽奖结果部分.这篇教程讲的是如何去实现大转盘抽奖的布局. 在制作大转盘抽奖的时候 ...
简单的转盘抽奖html,HTML5抽奖转盘-CSS3超简单版本
网上有很多关于抽奖转盘的代码和实例,有使用JavaScript控制动画的,有使用Canvas实现的,它们思路各不相同,本文将介绍一种采用CSS3的方式来实现转盘动画效果,非常简单,只需几行代码即可实现 ...
h5php大转盘抽奖,html5的非常简单圆形转盘抽奖代码
html5的非常简单圆形转盘抽奖代码非常简单的html5 canvas实现的圆形转盘抽奖代码,无需jQuery就可以实现的抽奖转盘特效. var fillStyle = ['rgb(255,154, ...
h5超简单大转盘抽奖效果（概率可控）
也不太会讲解,直接贴代码吧.内容很简单,应该都可以看懂 <!DOCTYPE html> <html lang="en"> <head><m ...
Android撸一个转盘抽奖
Android撸一个转盘抽奖前言最近在学习的时候想做个积分转盘抽奖的功能,以前项目中使用过,但是是用的H5写的,但是我现在还不是太会写网页,就想算了,用Android写个吧!因为我这边的业务逻辑是 ...
php ajax 概率转盘,php+jquery实现转盘抽奖概率可任意调
转盘抽奖,炫丽的一般是flash做的.不懂flash而又不需要那么炫丽,可以简单的通过jquery来实现.网上教程有很多,跟着做了一下,也贴出来吧.要实现转盘抽奖,有两个关键点,一是让转盘或指针转起来 ...
jquery.rotate.js 转盘抽奖示例
使用jquery.rotate.js 插件简单的转盘抽奖示例: 1.引入jQuery和jquery.rotate.js插件 <script src="static/js/jquery. ...
Python使用Tkinter实现转盘抽奖器
Python使用Tkinter实现转盘抽奖器我使用 Python 中的 Tkinter 模块实现了一个简单的滚动抽奖器,接下来继续写一个简单的转盘抽奖器. Tkinter 实现滚动抽奖器参考:htt ...
python抽奖滚动界面_Python使用Tkinter实现转盘抽奖器的步骤详解
我使用 Python 中的 Tkinter 模块实现了一个简单的滚动抽奖器,接下来继续写一个简单的转盘抽奖器. 滚动抽奖器与点名的场景相似,是从一群人中抽出中奖的人,奖品是提前确定了的,抽奖只是确定中 ...
python转盘抽奖_Python使用Tkinter实现转盘抽奖器的步骤详解
我使用 Python 中的 Tkinter 模块实现了一个简单的滚动抽奖器,接下来继续写一个简单的转盘抽奖器. 滚动抽奖器与点名的场景相似,是从一群人中抽出中奖的人,奖品是提前确定了的,抽奖只是确定中 ...

H5动画实现简单的转盘抽奖。

代码部分

图片资源

演示地址

演示地址 Git地址 CSDN下载地址

H5动画实现简单的转盘抽奖。相关推荐

最新文章

热门文章