利用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 相关文章推荐
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 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
一组PHP加密解密函数分享
2014/06/05 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
js资料prototype 属性
2007/03/13 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
Python 统计字数的思路详解
2018/05/08 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
绝对经典成功的大学生推荐信
2013/11/08 职场文书
金融专业推荐信
2013/11/14 职场文书
注塑工厂厂长岗位职责
2013/12/02 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
综合实践活动总结
2014/05/05 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
打架检讨书范文
2015/01/27 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
HttpClient实现文件上传功能
2022/08/14 Java/Android