效果图：

所需图片素材：

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

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

这张是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>

     <!-- 这里是css部分 -->

     <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>

     <!-- 这里是HTML结构部分 -->

     <div id="bg"><img src="pointer.png" alt="pointer"><img src="turntable.png" alt="turntable"></div>

     <!-- 这里是js部分 -->

     <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()向下取整。

原生js轮盘抽奖实例分析（幸运大转盘抽奖）的更多相关文章

  1. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  2. PHP+AJAX开发幸运大转盘抽奖

    PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率 奖品设置 $prizes = array( 0 => array( "id" => 0, // ...

  3. 跟我一起学编程—《Scratch编程》第24课：幸运大转盘

    同学你好,欢迎来到<跟我一起学编程>,我是包老师.这是<Scratch3.0编程>课程的第24课,我这节课教你做一个抽奖游戏:幸运大转盘. 学习目标: 1. 能够熟练使用造型工 ...

  4. jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

    jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  5. 幸运大转盘-jQuery+PHP实现的抽奖程序

    目前好多网站上应用的转盘抽奖程序大多是基于flash的,而本文结合实例将使用jQuery和PHP来实现转盘抽奖程序,为了便于理解,作者分两部分来讲解,本文讲解第一部分,侧重使用jQuery实现转盘的转 ...

  6. PHP实现大转盘抽奖算法实例

    本文主要向大家介绍了PHP语言实现大转盘抽奖算法,通过具体的实例向大家展示,希望对大家学习PHP抽奖有所帮助. 流程:1.拼装奖项数组,2.计算概率,3.返回中奖情况 代码如下:中奖概率 ' v ' ...

  7. 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

  8. html5简单拖拽实现自动左右贴边+幸运大转盘

    此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: ​ 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...

  9. asp.net+jQueryRotate开发幸运大转盘

    在线抽奖程序在很多网站上很多,抽奖形式多种多样,Flash抽奖偏多,本文将给大家介绍jQuery转盘抽奖,结合代码实例将使用jQuery和asp.net来实现转盘抽奖程序,为了便于理解,文章贴出实现源 ...

随机推荐

  1. appium在android 7.0真机上运行报错command failed shell:............ps:'uiautomator"的解决方式

    appium版本:1_4_16 在CSDN中找到相关解决的方案,根据此解决方案顺利的解决了让人惆怅的问题,再次记录. 1.找到appium安装目录下的adb.js文件,目录为:Appium\node_ ...

  2. OKHttp源码学习--HttpURLConnection HttpClient OKHttp Get and post Demo用法对比

    1.HttpURLConnection public class HttpURLConnectionGetAndPost { private String urlAddress = "xxx ...

  3. “卷积神经网络（Convolutional Neural Network，CNN）”之问

    目录 Q1:CNN 中的全连接层为什么可以看作是使用卷积核遍历整个输入区域的卷积操作? Q2:1×1 的卷积核(filter)怎么理解? Q3:什么是感受野(Receptive field)? Q4: ...

  4. 【STM32H7教程】第4章 STM32H7工程模板建立（MDK5）

    完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第4章   STM32H7工程模板建立(MDK5) 本章 ...

  5. LeetCode算法题-Unique Morse Code Words（Java实现）

    这是悦乐书的第318次更新,第339篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第186题(顺位题号是804).国际莫尔斯电码定义了一种标准编码,其中每个字母映射到一系 ...

  6. vue项目使用websocket技术

    一.为什么需要websocket? 前端和后端的交互模式最常见的就是前端发数据请求,从后端拿到数据后展示到页面中.如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷. 因此,一种新 ...

  7. Redis的正确使用姿势

    前言 说到分布式缓存,可能大多数人脑海浮现的就是redis了,为什么redis能够在竞争激烈的缓存大战中脱颖而出呢?原因无非有一下几点:性能好,丰富的特性跟数据结构,api操作简单.但是用的人多了,就 ...

  8. python中的del

    python中的del,只删除变量,不删除数据,具体表现为: a=1,c=a,del a,(c=1) 和 a = [1,2,3,4,5] b= a[0] del a[0] print a ([2,3, ...

  9. 详解mybatis映射配置文件

    一  mybatis 映射文件结构 mybatis映射配置文件存在如下顶级元素,且这些元素按照如下顺序被定义. cache – 给定命名空间的缓存配置. cache-ref – 其他命名空间缓存配置的 ...

  10. 第12章 X.509证书库的Fluent API - IdentityModel 中文文档(v1.0.0)

    存储X.509证书的常见位置是Windows X.509证书存储区.商店的原始API有点神秘(在.NET Framework和.NET Core之间也略有变化). X509类是一个简化的API从所述存 ...