利用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的执行效率一些方法总结
Dec 25 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
Jquery api 速查表分享
Jan 12 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
express.js中间件说明详解
Mar 19 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 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
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
phpwind放自动注册方法
2006/12/02 Javascript
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
Angular路由简单学习
2016/12/26 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
详解python中@的用法
2019/03/27 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
python实现图片素描效果
2020/09/26 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
两道JAVA笔试题
2016/09/14 面试题
信息专业个人的自我评价
2013/12/27 职场文书
毕业生自荐书模版
2014/01/04 职场文书
劳动实践课感言
2014/02/01 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
导游带团欢迎词
2015/09/30 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers