原生js轮盘抽奖实例分析（幸运大转盘抽奖）
效果图：
所需图片素材：
这张图是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轮盘抽奖实例分析（幸运大转盘抽奖）的更多相关文章
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...
- PHP+AJAX开发幸运大转盘抽奖
PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率 奖品设置 $prizes = array( 0 => array( "id" => 0, // ...
- 跟我一起学编程—《Scratch编程》第24课：幸运大转盘
同学你好,欢迎来到<跟我一起学编程>,我是包老师.这是<Scratch3.0编程>课程的第24课,我这节课教你做一个抽奖游戏:幸运大转盘. 学习目标: 1. 能够熟练使用造型工 ...
- jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现
jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- 幸运大转盘-jQuery+PHP实现的抽奖程序
目前好多网站上应用的转盘抽奖程序大多是基于flash的,而本文结合实例将使用jQuery和PHP来实现转盘抽奖程序,为了便于理解,作者分两部分来讲解,本文讲解第一部分,侧重使用jQuery实现转盘的转 ...
- PHP实现大转盘抽奖算法实例
本文主要向大家介绍了PHP语言实现大转盘抽奖算法,通过具体的实例向大家展示,希望对大家学习PHP抽奖有所帮助. 流程:1.拼装奖项数组,2.计算概率,3.返回中奖情况 代码如下:中奖概率 ' v ' ...
- 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结
大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...
- html5简单拖拽实现自动左右贴边+幸运大转盘
此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...
- asp.net+jQueryRotate开发幸运大转盘
在线抽奖程序在很多网站上很多,抽奖形式多种多样,Flash抽奖偏多,本文将给大家介绍jQuery转盘抽奖,结合代码实例将使用jQuery和asp.net来实现转盘抽奖程序,为了便于理解,文章贴出实现源 ...
随机推荐
- Docker系列之swarm集群搭建
学习Docker很久了,今天分享一下Docker的swarm集群的搭建过程很简单 首先第一步是 每台机器上面都要安装docker 本人使用的是centos7操作系统,使用3太虚拟机,3太虚拟机必须网络 ...
- 使用jquery 的ajax 与 Java servlet的交互
由于是使用jquery的 所以别忘记导入jq 下面是jsp文件 <%@ page language="java" contentType="text/html; c ...
- Windows上安装配置SSH教程（5）——win10下使用Cygwin+Expect自动登陆ssh
1.安装Cygwin,安装上Tcl和Expect两个工具. 可以使用apt-cyg命令安装,也可以在安装Cygwin的时候选中这两个包. 命令安装的话使用下面的两个命令: apt-cyg instal ...
- 带着新人看java虚拟机07（多线程篇）
这一篇说一下比较枯燥的东西,为什么说枯燥呢,因为我写这都感觉很无聊,无非就是几个阻塞线程的方法和唤醒线程的方法... 1.线程中断 首先我们说一说怎么使得一个正在运行中的线程进入阻塞状态,这也叫做线程 ...
- 【Python3爬虫】你会怎么评价复仇者联盟4？
一.写在前面 最近复仇者联盟4正在热映中,很多人都去电影院观看了电影,那么对于这部电影,看过的人都是怎么评价的呢?这时候爬虫就可以派上用场了! 二.主要思路 首先打开豆瓣电影,然后进入复仇者联盟4的详 ...
- 论文学习-深度学习目标检测2014至201901综述-Deep Learning for Generic Object Detection A Survey
目录 写在前面 目标检测任务与挑战 目标检测方法汇总 基础子问题 基于DCNN的特征表示 主干网络(network backbone) Methods For Improving Object Rep ...
- 游戏AI之初步介绍（0）
目录 游戏AI是什么? 游戏AI和理论AI 智能的假象 (更新)游戏AI和机器学习 介绍一些游戏AI 4X游戏AI <求生之路>系列 角色扮演/沙盒游戏中的NPC 游戏AI 需要学些什么? ...
- 开源ERP Odoo仓存功能模块深度应用（一）
基本功能 库位 库位是一个逻辑存货区,可以是一个物理库区,可以是一个货架.货架上的一个货位.库位可以有子库位 库位有虚拟库位和实际库位,实际库位是实际存放货物的库位,虚拟库位是因复式库存记账而虚构的库 ...
- sed和awk用法
sed和awk用法 Sed sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法sed命令行格式为 ...
- Linux如何管理文档多租户
例题 同一群组microsoft下的两个账号justmine001和justmine002需要共同拥有目录/microsoft/eshop的开发权,以便进行协同工作,但是其他人不允许进入和查阅该目录. ...