利用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高级程序设计 扩展--关于动态原型
Nov 09 Javascript
javascript 快速排序函数代码
May 30 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
react实现复选框全选和反选组件效果
Aug 25 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
关于Javascript闭包与应用的详解
Apr 22 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合并两个或多个数组的方法
2019/01/20 PHP
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
jquery中radio checked问题
2015/03/16 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
Bootstrap插件全集
2016/07/18 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
python错误处理详解
2014/09/28 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
快速入门python学习笔记
2017/12/06 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
python 命名规范知识点汇总
2020/02/14 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
python 进程池pool使用详解
2020/10/15 Python
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
三个儿子教学反思
2014/02/03 职场文书
优秀员工获奖感言
2014/03/01 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
个人维稳承诺书
2015/05/04 职场文书
离婚财产分割协议书
2015/08/11 职场文书
Python中Selenium对Cookie的操作方法
2021/07/09 Python
原生JS实现分页
2022/04/19 Javascript