利用Javascript实现简单的转盘抽奖


Posted in Javascript onFebruary 13, 2017

首先来看看接口说明: 

var _rotate = new iRotate('#div',{
 start : 0, //开始角度,可不写,默认0
 end :45, //结束角度
 time :5000, //持续时间,可不写,默认1000
 easing : 'easeOut', //动画形式,目前只有'linear'和'easeOut'两种,可不写,默认'easeOut'
 callback : function(){ //回调函数
  //this为当前对象
 }
});
_rotate.stop(function(){ //停止回调函数
 //this为当前对象
});

实现的效果图如下:

利用Javascript实现简单的转盘抽奖

利用Javascript实现简单的转盘抽奖

完整的示例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单转盘效果</title>
<style>
#RotateDiv{border-radius:50px 0 50px 50px }
#RotateDiv,#RotateDiv2{ width: 50px;height: 50px; color: #fff;text-align: center; line-height: 50px; background: #444; position: relative; margin: 20px;border-radius:50px 0 50px 50px}
</style>
</head>

<body>
<p>举例子:</p>
<p> <button id="RotateBtn">开始抽奖</button> </p>
<div id="RotateDiv"></div>
<p>默认转动:</p>
<p> <button id="RotateBtn2">开始抽奖2</button> </p>
<div id="RotateDiv2"></div>

<script type="text/javascript">
window.iRotate = (function(w,d){
 function R(obj,json){
 this.obj = (typeof obj=='object') ? obj : d.querySelector(obj);
 this.startTime = Date.now();
 this.timer = null;
 this.rotate(json);
 };
 R.prototype = {
 rotate : function(json){
 var t = this,times = json['time'] || 1000;
 clearInterval(t.timer)
 t.timer = setInterval(function(){
 var changeTime = Date.now(),
 tm = times - Math.max(0,t.startTime - changeTime + times),
 value = Tween[json['easing'] || 'easeOut'](tm,+json['start'] || 0,json['end'] - (+json['start'] || 0),times);
 t.obj.style['transform'] = t.obj.style['-webkit-transform'] = 'rotate('+value%360+'deg)';
 t.obj.setAttribute('data-rotate',value%360)
 if(tm==times){
  clearInterval(t.timer);
  json.callback && json.callback.call(t.obj)
 }
 },10)
 },
 stop : function(fn){
 clearInterval(this.timer);
 fn && fn.call(this.obj)
 }
 };
 return R;
})(window,document);
var Tween = {linear: function (t, b, c, d){return c*t/d + b;},easeOut: function(t, b, c, d){return -c *(t/=d)*(t-2) + b;}}

//默认转动
;(function(){
 var off = true,off2 = true;
 RotateBtn.onclick = function(){
 if(!off) return //判断是否在旋转
 off = false
 new iRotate('#RotateDiv',{
 end :45+1800,
 time :5000,
 callback : function(){ //回调函数
  this.innerHTML = this.getAttribute('data-rotate')
  off = true
  }
 });
 }
 var r = null;
 function rotate2(){ //递归持续旋转
 r = new iRotate('#RotateDiv2',{
 start : 0,
 end :360,
 time :1000,
 easing : 'linear',
 callback : function(){
 rotate2()
 }
 });
 }
 rotate2()
 RotateBtn2.onclick = function(){
 if(!off2) return //判断是否在旋转
 off2 = false
 r.stop(); //停止之前的旋转
 new iRotate('#RotateDiv2',{
 start : RotateDiv2.getAttribute('data-rotate'),
 end :65+1800,
 time :5000,
 callback : function(){ //回调函数
  this.innerHTML = this.getAttribute('data-rotate')
  off2 = true
  }
 });
 }
})();
 
</script>

</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
javascript 全角转换实现代码
Jul 17 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
JavaScript几种形式的树结构菜单
May 10 Javascript
Javascript实现的鼠标经过时播放声音
May 18 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
vue动画效果实现方法示例
Mar 18 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 Javascript
简单实现js倒计时功能
Feb 13 #Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 #Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 #Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 #Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 #Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 #Javascript
Vue.js实现简单动态数据处理
Feb 13 #Javascript
You might like
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
php查询及多条件查询
2017/02/26 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
PHP7 list() 函数修改
2021/03/09 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
jquery json 实例代码
2010/12/02 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
js快速排序的实现代码
2013/12/08 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
python实现ip代理池功能示例
2019/07/05 Python
python中的列表与元组的使用
2019/08/08 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
师范生个人推荐信
2013/11/29 职场文书
升国旗仪式主持词
2014/03/19 职场文书
应届生自荐信
2014/06/30 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
任命书格式范文
2015/09/22 职场文书
Python 全局空间和局部空间
2022/04/06 Python