文档章节

js 转盘抽奖

陈永
 陈永
发布于 2014/10/10 21:13
字数 115
阅读 167
收藏 0

js 转盘抽奖,采用Raphael实现(兼容浏览器那是杠杠的)

缓动时间控制

function Spinner(s, ms, f) {
  var i = 0;
  var t;
  (function ft() {
    if(i < s) {
      var e = Math.pow(i / s, 0.48);
      f(i);
      t = setTimeout(ft, ms * e);
      i++;
    } else {
      clearTimeout(t);
    }
  })();
  return function () {
    clearTimeout(t);
  };
}


缓动转盘实现

  var lucky_num = document.getElementById('ts').value;
  var default_loop = 5;
  var angle = 45;
  var lucky_loop = 360*default_loop+(8-(lucky_num-1))*angle;
  new Spinner(100, 110, function(i){
    lucky.attr({transform: "r" + (Math.pow(i/100, 0.17)*lucky_loop)});
  });

点击预览

© 著作权归作者所有

陈永
粉丝 0
博文 4
码字总数 440
作品 0
成都
高级程序员
私信 提问
mysql+php +js 实现大转盘抽奖功能

mysql+php +js 实现大转盘抽奖功能 源代码+注释 可以提供修改服务 功能介绍:一套问答的题目,带有大转盘抽奖功能的小程序,提供html5 和 用户互动,提高用户粘度,学习也是很好的demo,也可...

jackidsheep
2016/11/16
31
0
从零开始完成 React Native 抽奖

从零开始完成React Native 九宫格抽奖 本文将介绍从零开始实现一个 React Native 版本的九宫格抽奖转盘,先看最终效果图 也可以直接使用react-native-super-lottery组件开发抽奖功能。 一、布...

王程1488767817000
05/29
0
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
62
0
React Native 版本九宫格转盘

本文将介绍从零开始实现一个 React Native 版本的九宫格抽奖转盘,先看最终效果图 也可以直接使用react-native-super-lottery组件开发抽奖功能。 一、布局 布局很简单,我们可以采用flex 3行...

人人贷大前端技术中心
05/27
0
0
如何实现一个React Native抽奖九宫格

本文将介绍从零开始实现一个 React Native 版本的九宫格抽奖转盘,先看最终效果图 也可以直接使用react-native-super-lottery组件开发抽奖功能。 一、布局 布局很简单,我们可以采用flex 3行...

人人贷大前端技术中心
05/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

全面兼容IE6/IE7/IE8/FF的CSS HACK写法

浏览器市场的混乱,给设计师造成很大的麻烦,设计的页面兼容完这个浏览器还得兼容那个浏览器,本来ie6跟ff之间的兼容是很容易解决的。加上个ie7会麻烦点,ie8的出现就更头疼了,原来hack ie...

前端老手
9分钟前
3
0
常用快递电子面单批量打印api接口对接demo-JAVA示例

目前有三种方式对接电子面单: 1.快递公司:各家快递公司逐一对接接口 2.菜鸟:支持常用15家快递电子面单打印 3.快递鸟:仅对接一次,支持常用30多家主流快递电子面单打印 目前也是支持批量打...

程序的小猿
12分钟前
5
0
Yii 框架中rule规则必须搭配验证函数才能使用

public $store_id;public $user_id;public $page;public $limit;public $list;public $mch_list;public $cart_id;public $is_community;public $shop_id;public $cart_typ......

chenhongjiang
14分钟前
2
0
Flutter使用Rammus实现阿里云推送

前言: 最近新的Flutter项目有“阿里云推送通知”的需求,就是Flutter的App启动后检测到有新的通知,点击通知栏然后跳转到指定的页面。在这里我使用的是第三方插件Rammus来实现通知的推送,之...

EmilyWu
14分钟前
38
0
Knative 实战:三步走!基于 Knative Serverless 技术实现一个短网址服务

短网址顾名思义就是使用比较短的网址代替很长的网址。维基百科上面的解释是这样的: 短网址又称网址缩短、缩短网址、URL 缩短等,指的是一种互联网上的技术与服务,此服务可以提供一个非常短...

阿里巴巴云原生
29分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部