利用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 相关文章推荐
setInterval 和 setTimeout会产生内存溢出
Feb 15 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
JS实现留言板功能
Jun 17 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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
优化使用mysql存储session的php代码
2008/01/10 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
python删除过期log文件操作实例解析
2018/01/31 Python
python进行两个表格对比的方法
2018/06/27 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
医学院护理专业应届生求职信
2013/11/12 职场文书
数学专业推荐信范文
2013/11/21 职场文书
小学校本培训方案
2014/06/06 职场文书
后勤个人工作总结
2015/02/28 职场文书
小学语文教学随笔
2015/08/14 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技
CentOS MySql8 远程连接实战
2022/04/19 MySQL
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers
小程序自定义轮播图圆点组件
2022/06/25 Javascript