原生js轮盘抽奖实例分析（幸运大转盘抽奖

小鱼儿 2021-11-04 22:22 356阅读 0赞

来自[https://www.cnblogs.com/xiongzaiqiren/p/7771561.html?tdsourcetag=s\_pcqq\_aiomsg][https_www.cnblogs.com_xiongzaiqiren_p_7771561.html_tdsourcetag_s_pcqq_aiomsg]

效果图：

![20190807184901119.gif][]

所需图片素材：

![20190807185009791.png][]

这张图是pointer.png的位置的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70][]

turntable-bg.jpg这张是转盘背景图，在背景位置。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70 1][]

这张是turntable.png位置的。

需要这三张图片，如果要实现一下，直接另存这三图片引入进去即可。如果不会请修改成对应的图片名字，放到同一个文件下。

基本原理：

1，通过设置CSS样式的position属性，z-index属性等实现背景图，转盘图与指针图的层叠摆放；

2，通过设置元素style.transform = "rotate(0deg)"实现旋转效果。

完整代码如下：

<!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(turntable-bg.jpg) no-repeat;  
position: relative;  
\}

img\[src^="pointer"\] \{  
position: absolute;  
z-index: 10;  
top: 155px;  
left: 247px;  
\}

img\[src^="turntable"\] \{  
position: absolute;  
z-index: 5;  
top: 60px;  
left: 116px;  
transition: all 4s;  
\}  
</style>  
</head>  
<body>  
  
<div id="bg"><img src="pointer.png" alt="pointer"><img src="turntable.png" alt="turntable"></div>  
  
<script>  
var oPointer = document.getElementsByTagName("img")\[0\];  
var oTurntable = document.getElementsByTagName("img")\[1\];  
var cat = 51.4; //总共7个扇形区域，每个区域约51.4度  
var num = 0; //转圈结束后停留的度数  
var offOn = true; //是否正在抽奖  
oPointer.onclick = function () \{  
if (offOn) \{  
oTurntable.style.transform = "rotate(0deg)";  
offOn = !offOn;  
ratating();  
\}  
\}  
//旋转  
function ratating() \{  
var timer = null;  
var rdm = 0; //随机度数  
clearInterval(timer);  
timer = setInterval(function () \{  
if (Math.floor(rdm / 360) < 3) \{ rdm = Math.floor(Math.random() \* 3600); \}  
else \{  
oTurntable.style.transform = "rotate(" + rdm + "deg)";  
clearInterval(timer);  
setTimeout(function () \{  
offOn = !offOn;  
num = rdm % 360;  
if (num <= cat \* 1) \{ alert("4999元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "4999元"); \}  
else if (num <= cat \* 2) \{ alert("50元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "50元"); \}  
else if (num <= cat \* 3) \{ alert("10元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "10元"); \}  
else if (num <= cat \* 4) \{ alert("5元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "5元"); \}  
else if (num <= cat \* 5) \{ alert("免息服务"); console.log("rdm=" + rdm + "，num=" + num + "，" + "免息服务"); \}  
else if (num <= cat \* 6) \{ alert("提交白金"); console.log("rdm=" + rdm + "，num=" + num + "，" + "提交白金"); \}  
else if (num <= cat \* 7) \{ alert("未中奖"); console.log("rdm=" + rdm + "，num=" + num + "，" + "未中奖"); \}  
\}, 4000);  
\}  
\}, 30);  
\}  
</script>  
</body>  
</html>

css和HTML代码不多，主要是为了实现过渡设置，还有为了实现层叠而使用position定位，让元素脱离文档流，js代码在于获取元素和事件的点击，点击指针会旋转，所以要给指针加个点击事件，然后是判断旋转是否停止，如果没有就点击也不能调用函数ratating()，这个函数执行转盘的旋转和判断指针停在什么位置，然后弹出相应的内容，而函数里实现旋转的过程，是获取转盘的元素，然后使用js控制css的属性-transform：rotate()，我们不是使用过这个属性在css里直接使它实现旋转的效果吗？就是和伪类选择器:hover及过渡属性一起使用去实现的，那么因为css实现不了数字的运算和鼠标点击，所以让js去实现且控制css属性，实现到点击旋转这个功能，然而定时器的使用暂时不说，思路就是使用js实现数字的运算和鼠标的点击及css属性的控制达到旋转的效果。  
Math.random()是随机数的生成，Math.floor()向下取整。

[https_www.cnblogs.com_xiongzaiqiren_p_7771561.html_tdsourcetag_s_pcqq_aiomsg]: https://www.cnblogs.com/xiongzaiqiren/p/7771561.html?tdsourcetag=s_pcqq_aiomsg
[20190807184901119.gif]: /images/20211104/4940e78318f342a7a347fb95b64db41e.png
[20190807185009791.png]: /images/20211104/003c479111be490c99b101bb52b01f4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70]: /images/20211104/8e8de6229f1340ae820b4c48e85581d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbnRpbmdibw_size_16_color_FFFFFF_t_70 1]: /images/20211104/c2a484be2629470e8919bf9631cb04c2.png