闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果:

可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域

比如,我选择了"区域2",结果就是这样

具体可以见下面的源码:(注意,这里JQ文档没有贴出来,需要自行引入)

HTML文件:

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style>
#RotationDiv {
/*初始化界面,让指针朝上*/
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
width: 60px;
height: 85px;
/*边框是用来看旋转的地方的*/
/*border: 1px solid black;*/
}
</style>
<!--引入jq1.8-->
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<!--引入旋转的js-->
<script src="js/rotation-index.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function rotationDiv(num) {
RotationIndex("RotationDiv", 8, num, 4, 5)
}
</script>
</head> <body>
<div style="height: 85px;">
<table align="center">
<tr>
<td><input type="button" value="选择区域:1" onclick="rotationDiv(1)" />
<input type="button" value="选择区域:2" onclick="rotationDiv(2)" />
<input type="button" value="选择区域:3" onclick="rotationDiv(3)" />
<input type="button" value="选择区域:4" onclick="rotationDiv(4)" />
<input type="button" value="选择区域:5" onclick="rotationDiv(5)" />
<input type="button" value="选择区域:6" onclick="rotationDiv(6)" />
<input type="button" value="选择区域:7" onclick="rotationDiv(7)" />
<input type="button" value="选择区域:8" onclick="rotationDiv(8)" /></td>
</tr>
</table>
</div>
<table align="center" style="background-image: url(img/revolveBgImage.png); width: 500px;height: 500px;">
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td style="width: 220px;">
</td>
<td>
<div id="RotationDiv"><img src="img/timg.png" width="100%" /></div>
</td>
<td style="width: 220px;"></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>
</body> </html>

自己写的旋转的JS文件:

/**
* @param {Object} indexID 想要旋转的控件的id
* @param {Object} areaNum 区域的块数
* @param {Object} wantToStop 想要停止的位置(块号)
* @param {Object} defaultTime 刚开始匀速旋转的时间
* @param {Object} chageTime 最后减速旋转的时间
*/
function RotationIndex(indexID, areaNum, wantToStop, defaultTime, chageTime) { var stopAreaNum = 0; //停在区域的名字数
var areaArr = new Array(areaNum);
var angle = 1; //每次旋转角度
// var randomTime = Math.random() * 1500; //随机时间
var nowTime = 0; //当前时间,随机起点,让停止来的更加真实
var disTime = 15; //时间差值,每15毫秒改变一次,基本上类似于60Hz刷新频率
var disangle = 13; //角度差值
var angle360 = 0; //用于记录角度数,360°范围的 var UP = (1 - ((12 / chageTime) * defaultTime)); //定义一个函数uniformizing parameter
var IPFP = 12 * defaultTime + (12 / chageTime) * defaultTime * defaultTime; //定义一个反比例函数的参数Inverse proportional function parameters var myIntervalInRotationIndex = window.setInterval(function() {
nowTime += disTime;
//当时间小于默认时间时候
if((nowTime / 1000) <= defaultTime) {
//匀速旋转
} else if((nowTime / 1000) > defaultTime && (nowTime / 1000) < (defaultTime + chageTime)) {
//当时间大于默认时间,开始减速旋转
disangle = UP + (IPFP / (nowTime / 1000));
/**
* 函数式为:
* UP+IPFP/t=h
* 其中t为时间,h为角度
*
*/
} else {
angle360 = angle % 360;
stopAreaNum = angle360 / (360 / areaNum);
if(stopAreaNum >= (wantToStop - 1.5)) {
disangle = 0.3;
} else if(stopAreaNum >= (wantToStop - 1)) {
disangle = 0.5;
} else {
disangle = 0.8;
}
if(stopAreaNum >= (wantToStop - 0.8) && stopAreaNum <= wantToStop) {
window.clearInterval(myIntervalInRotationIndex);
} }
angle360 = angle % 360;
angle += disangle;
$("#" + indexID).attr("style", "transform:rotate(" + angle + "deg);-ms-transform:rotate(" + angle + "deg);-moz-transform:rotate(" + angle + "deg);-webkit-transform:rotate(" + angle + "deg);-o-transform:rotate(" + angle + "deg);")
}, disTime) }

转盘背景用的是500px*500px的,指针的地方需要注意的是,div框的大小应当是需要旋转的中心部位,而不能用div把指针全部包入.

简单JS旋转实现转盘抽奖效果的更多相关文章

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

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

  2. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  3. js实现游戏转盘抽奖

    <!DOCTYPE html> <html> <head> <title>js抽奖</title> <meta charset=&qu ...

  4. js实现大转盘抽奖游戏实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 原生js实现跑马灯抽奖效果

    目前好多的微信活动都有一些抽奖活动,其中就有跑马灯. <!DOCTYPE html> <html> <head> <title>跑马灯效果</ti ...

  6. 原生js轮盘抽奖实例分析(幸运大转盘抽奖)

    效果图: 所需图片素材: 这张图是pointer.png的位置的. turntable-bg.jpg这张是转盘背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现 ...

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

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

  8. web:转盘抽奖

    移动web:转盘抽奖(幸运大转盘)   为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转 ...

  9. 移动web:转盘抽奖(幸运大转盘)

    为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转盘),游戏式(砸蛋/拼图...).... ...

随机推荐

  1. Composer fails to download http json files on "update", not a network issue, https fine

    "repositories": [ { "packagist": false }, { "type": "composer&quo ...

  2. element UI 的学习一,路由跳转

    1.项目开始: # 安装vue    $ cnpm install vue@2.1.6    # 全局安装 vue-cli    $ cnpm install --global vue-cli    ...

  3. pc或者微信上用pdf.js在线预览pdf和word

    最近项目要求pdf和word可以在线预览功能,pc端还好解决,但是微信端就有点坑了,pc端原来的思路是将文件转成base64,然后用html格式显示 ,但是微信端不支持, 这种方式就pass掉了,谷歌 ...

  4. GPIO—位带操作

    GPIO—位带操作本章参考资料:< STM32F4xx 中文参考手册>存储器和总线构架章节. GPIO 章节,< Cortex®-M4 内核编程手册> 2.2.5 Bit-ba ...

  5. 基于Redis实现延时队列服务

    背景 在业务发展过程中,会出现一些需要延时处理的场景,比如: a.订单下单之后超过30分钟用户未支付,需要取消订单 b.订单一些评论,如果48h用户未对商家评论,系统会自动产生一条默认评论 c.点我达 ...

  6. jQuery+html5实现的3D动态切换焦点轮播幻灯片

    今天爱编程给网友们分享一款基于jQuery+html5实现的3D动态切换焦点轮播幻灯片,支持左右箭头和圆点按钮播放控制,支持多种不同的3D动态切换特效,自适应全屏显示,兼容360.FireFox.Ch ...

  7. lua错误收集

    这里放一些我遇到的lua错误,希望大家分享一些错误给我,统一放在这里. 1.lua表的引用传值 上面的代码运行后会发现t2[2],t2[3]表里的内容也被删除了,实际上它们 与t2[1]表里的内容都是 ...

  8. Tiny4412 虚拟机交叉编译环境的设置以及编译u-boot 和 kernel

    从CD 里面拷贝如下文件到虚拟机里面 解压 查看是否有如下文件 tiny4412_qt@chenfl:~/tiny4412$ ls opt/FriendlyARM/toolschain/4.5.1/b ...

  9. [ucos]了解ucos

    1. uCosIII移植到STM32F10x http://www.cnblogs.com/hiker-blogs/archive/2012/06/13/2547176.html 2. uCosIII ...

  10. Java多线程之Lock的使用<转>

    import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util ...