JS旋转实现转盘抽奖效果
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了JS旋转实现转盘抽奖效果的具体代码，供大家参考，具体内容如下
闲来没事,做了一个模拟转盘抽奖的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;
}
</style>
<!--引入jq1.8-->
<script class="lazy" data-src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<!--引入旋转的js-->
<script class="lazy" data-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" οnclick="rotationDiv(1)" />
<input type="button" value="选择区域:2" οnclick="rotationDiv(2)" />
<input type="button" value="选择区域:3" οnclick="rotationDiv(3)" />
<input type="button" value="选择区域:4" οnclick="rotationDiv(4)" />
<input type="button" value="选择区域:5" οnclick="rotationDiv(5)" />
<input type="button" value="选择区域:6" οnclick="rotationDiv(6)" />
<input type="button" value="选择区域:7" οnclick="rotationDiv(7)" />
<input type="button" value="选择区域:8" οnclick="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 class="lazy" data-src="img/timg.png" width="100%" /></div>
</td>
<td style="width: 220px;"></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>
</body>
</html>自己写的旋转的JS文件:
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));
} 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)
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
