利用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 相关文章推荐
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
vue-router传参用法详解
Jan 19 Javascript
JavaScript 接口原理与用法实例详解
May 12 Javascript
npm全局环境变量配置详解
Dec 15 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 zend 相对路径问题
2009/01/12 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
Python异常处理例题整理
2019/07/07 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
行政经理的岗位职责
2013/11/23 职场文书
会计找工作求职信范文
2013/12/09 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
文艺演出策划方案
2014/06/07 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
2019各种保证书范文
2019/06/24 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
Mysql事务索引知识汇总
2022/03/17 MySQL