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

来自https://www.cnblogs.com/xiongzaiqiren/p/7771561.html?tdsourcetag=s_pcqq_aiomsg

效果图：

所需图片素材：

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

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

这张是turntable.png位置的。  

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

基本原理：

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

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

完整代码如下：

   
   
   
   
   
   


     
     
   
   

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！