利用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 相关文章推荐
extjs 04_grid 单击事件新发现
Nov 27 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 Javascript
vue实现轮播图帧率播放
Jan 26 Vue.js
简单实现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模板Switch标签用法示例
2014/06/30 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
Javascript的一种模块模式
2008/03/22 Javascript
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
python实现列表的排序方法分享
2019/07/01 Python
简单了解django索引的相关知识
2019/07/17 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
Python pickle模块实现对象序列化
2019/11/22 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js