利用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 相关文章推荐
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
js的对象与函数详解
Jan 21 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
isset和empty的区别
2007/01/15 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
python tkinter组件摆放方式详解
2019/09/16 Python
Python接口测试文件上传实例解析
2020/05/22 Python
Python编写万花尺图案实例
2021/01/03 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
俄罗斯优惠券网站:BIGLION
2017/05/21 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
销售工作人员的自我评价分享
2013/11/10 职场文书
生产部主管岗位职责
2014/01/06 职场文书
交通事故和解协议书
2014/09/25 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
学生会工作感言
2015/08/07 职场文书
护士医德医风心得体会
2016/01/25 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL