H5大转盘抽奖，概率可以控制，可直接使用

最新推荐文章于 2024-09-28 13:43:35 发布

阿磊的救兵

最新推荐文章于 2024-09-28 13:43:35 发布

阅读量2.6k

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/ac_surprise/article/details/115938830

版权

这个代码是随手写的简易代码，可供参考，功能都有，图片都是自己在网上随意找的，里面的逻辑各方面都有，写一个html页面demo可直接看效果

效果
在这里插入图片描述

废话不多说直接上代码

<!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-color:#ccc ;
            position: relative;
        }
        img.zhuanpan {
            position: absolute;
            z-index: 10;
            top: 155px;
            left: 247px;
        }
        img.content {
            position: absolute;
            width: 100px;
            height: 100px;
            z-index: 15;
            top: 322px;
            left: 435px;
            transition: all 4s;
        }
    </style>
</head>
<body>
    <img id="bg">
      <img id="content" class="content" src="./zhizhen.png" alt="content">
    	<img id="btn" class="zhuanpan" src="./zhuanpan.png" alt="zhuanpan">
    </div>  
    <script>
    	var rotate = 2880//默认至少转两圈
    	var canGet = [1,2,3,4,5,6,7]//中奖范围(比如你只打算让用户抽中1、2、3等奖，其他的概率为0)
    	var nowNum = 0;//当前点击次数
    	var canGetRanDom = 0;//中奖范围内的随机度数
    	document.getElementById("btn").onclick = function(){
    		var ranDom = Math.floor(Math.random() * 7)
    		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>