利用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 相关文章推荐
基于jquery的Repeater实现代码
Jul 17 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
vue 插槽简介及使用示例
Nov 19 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 基础教程(三)
2006/10/09 PHP
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
给ListBox添加双击事件示例代码
2013/12/02 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
基于python实现把图片转换成素描
2019/11/13 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
python接口自动化框架实战
2020/12/23 Python
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
财政专业求职信范文
2014/02/19 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
大学社团计划书
2014/05/01 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
初三毕业评语
2014/12/26 职场文书
大学生受助感言
2015/08/01 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python
mysql脏页是什么
2021/07/26 MySQL