效果图：

所需图片素材：

这张图是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. Python中collections模块

    目录 Python中collections模块 Counter defaultdict OrderedDict namedtuple deque ChainMap Python中collections ...

  2. volitale、synchronized、RetreenLock区别

    synchronized和RetreenLock锁区别 1.synchronized是java关键字,RetreenLock是个java类 2.synchronized无法获取锁状态,Lock可以判断 ...

  3. asp.net core系列 53 IdentityServer4 (IS4)介绍

    一.概述 在物理层之间相互通信必须保护资源,需要实现身份验证和授权,通常针对同一个用户存储.对于资源安全设计包括二个部分,一个是认证,一个是API访问. 1 认证 认证是指:应用程序需要知道当前用户的 ...

  4. 阿里云重磅发布DMS数据库实验室 免费体验数据库引擎

    2月27日,阿里云数据管理DMS发布年度巨献——数据库实验室,用户可在该实验室环境下免费体验数据库引擎.以及DMS各项产品功能.数据库实验室是DMS所提供的体验空间,免费赠送数据库引擎资源. 用户只需 ...

  5. kubernetes实践之一：kubernetes二进制包安装

    kubernetes二进制部署 1.环境规划 软件 版本 Linux操作系统 CentOS Linux release 7.6.1810 (Core) Kubernetes 1.9 Docker 18 ...

  6. TCP的三次握手与四次挥手

    TCP的三次握手与四次挥手 一.TCP(Transmission Control Protocol 传输控制协议) TCP是面向对连接,可靠的进程到进程通信的协议 TCP是提供全双工服务,即数据可在同 ...

  7. 我们是如何通过全球第一免费开源ERP Odoo做到项目100%交付

    传统友商ERP的交付过程 一.先初步需求调研,后选型功能模块 传统友商ERP第一件事情先对客户方进行初步的调研,客户方无论说什么,友商听过算过,只关心你人数多少,有哪些人涉及到哪些模块,接着对模块进行 ...

  8. SQL Server 数据库基于备份文件的【一键还原】

    1. 备份与还原的基础说明 我们知道在DBA的日常工作中,SQL Server 数据库的恢复请求偶有发生,可能是用作数据的追踪,可也可能能是数据库的灾难恢复. 数据库常用的备份命令如下: ----完整 ...

  9. Luogu P5309 [Ynoi2012]D1T1

    小清新分块题,从头到尾都十分套路,和CXR大佬一起YY了一下就出来了 首先套路地设个阈值\(S\),把修改的\(x\)分成大于\(S\)和小于等于\(S\)两部分,然后我们考虑分别求解这两部分 \(x ...

  10. 从 RegExp 构造器看 JS 字符串转义设计

    多年前我第一次入职腾讯的时候,DC 从杭州给我寄来了一本他刚翻译出炉的<高性能 JavaScript>.那段时间为了帮忙校对,我仔细阅读了书中的每一个段落,结果积累了不少 JavaScri ...