这篇文章主要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下

效果预览:


一、模拟抽奖的实现过程

原理:当支持CSS3属性采用transform: rotate(角度deg)设置,当角度为正数时顺时针,当为负数时逆时针。如果是IE8及其以下,采用采用绝对定位设置top和left,模拟角度

run方法,参数angle指角度


function run(angle) {
  if (isIE) {
  cosDeg = Math.cos(angle * Math.PI / 180);
  sinDeg = Math.sin(angle * Math.PI / 180);
  with (target.filters.item(0)) {
  M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
  }
  target.style.top = (orginH - target.offsetHeight) / 2 + "px";
  target.style.left = (orginW - target.offsetWidth) / 2 + "px";
  } else if (target.style.MozTransform !== undefined) {
  target.style.MozTransform = "rotate(" + angle + "deg)";
  } else if (target.style.OTransform !== undefined) {
  target.style.OTransform = "rotate(" + angle + "deg)";
  } else if (target.style.webkitTransform !== undefined) {
  target.style.webkitTransform = "rotate(" + angle + "deg)";
  } else {
  target.style.transform = "rotate(" + angle + "deg)";
  }
  }

模拟转盘加速,匀速和减速。当角度小于某个数值时,让其处于加速此处采用1.01的系数作为加速度,当大于某个数值时处于高速匀速状态,当角度大于设置的最大数值时,让其减速采用系数为0.99。设置负数作为减速的值(即变量 tmp),随即获取负360中的值(即变量 m),当大于这个值时,转盘停止。

var tmp = -900;
  var m = -parseInt(Math.random() * 360);
  timer = setInterval(function () {
  if (i > 3000) {
  tmp = parseInt(tmp * 0.99);
  if (tmp > m) {
  tmp = m;
  clearInterval(timer);
  msg(m);
  }
  run(tmp);
  }
  else if (i > 1000) {
  i = i + 45;
  run(i);
  }
  else {
  i = parseInt((i + 1) * 1.01);
  run(i);
  }
  }, 50);

启动抽奖和重新设置抽奖

<input id="test" type="button" value="抽奖" />
<input id="restart" style="display: none;" type="button" value="再抽一次" />
m$('test').onclick = function () {
  m$('test').style.display = "none";
  showMsg();
  }

  m$('restart').onclick = function () {
  m$('restart').style.display = "none";

  if (isIE) {
  m$("demo").style.top = "0px";
  m$("demo").style.left = "0px";
  } else if (m$("demo").style.MozTransform !== undefined) {
  m$("demo").style.MozTransform = 'rotate(0deg)';
  } else if (m$("demo").style.OTransform !== undefined) {
  m$("demo").style.OTransform = 'rotate(0deg)';

  } else if (m$("demo").style.webkitTransform !== undefined) {
  m$("demo").style.webkitTransform = 'rotate(0deg)';
  } else {
  m$("demo").style.transform = 'rotate(0deg)';
  }

  m$('test').style.display = "block";
  i = 0;
  }


二、完整代码demo:

<!DOCTYPE html>
<html>
<head>
  <title>抽奖</title>
  <style type="text/css">
  #container{width: 400px;height: 400px;position: relative;margin: 0 auto;}
  #demo{position: absolute;filter: progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");}
  </style>
</head>
<body style="height: 1000px;">
  <div id="container">
  <div id="demo">
  <img alt="" src="http://127.0.1.23/cj_img/2016/06-07/22t2d2ivo1y.png" width="400" height="400" />
  </div>
  </div>
  <input id="test" type="button" value="抽奖" />
  <input id="restart" style="display: none;" type="button" value="再抽一次" />
  <div id="msg">
  </div>
  <script type="text/javascript">
  var m$ = function (id) { return document.getElementById(id); }
  var ua = navigator.userAgent;
  var isIE = /msie/i.test(ua) && !window.opera;

  var i = 1, sinDeg = 0, cosDeg = 0, timer = null;
  var mRotate = function () {
  var rotate = function (target, msg) {
  target = m$(target);
  var orginW = target.clientWidth, orginH = target.clientHeight;
  clearInterval(timer);
  function run(angle) {
  if (isIE) {
  cosDeg = Math.cos(angle * Math.PI / 180);
  sinDeg = Math.sin(angle * Math.PI / 180);
  with (target.filters.item(0)) {
  M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
  }
  target.style.top = (orginH - target.offsetHeight) / 2 + "px";
  target.style.left = (orginW - target.offsetWidth) / 2 + "px";
  } else if (target.style.MozTransform !== undefined) {
  target.style.MozTransform = "rotate(" + angle + "deg)";
  } else if (target.style.OTransform !== undefined) {
  target.style.OTransform = "rotate(" + angle + "deg)";
  } else if (target.style.webkitTransform !== undefined) {
  target.style.webkitTransform = "rotate(" + angle + "deg)";
  } else {
  target.style.transform = "rotate(" + angle + "deg)";
  }
  }

  var tmp = -900;
  var m = -parseInt(Math.random() * 360);
  timer = setInterval(function () {
  if (i > 3000) {
  tmp = parseInt(tmp * 0.99);
  if (tmp > m) {
  tmp = m;
  clearInterval(timer);
  msg(m);
  }
  run(tmp);
  }
  else if (i > 1000) {
  i = i + 45;
  run(i);
  }
  else {
  i = parseInt((i + 1) * 1.01);
  run(i);
  }
  }, 50);
  }
  return { rotate: rotate }
  } ();

  function showMsg() {
  mRotate.rotate("demo", function msg(m) {
  if (m > -90 && m < -30) {
  m$("msg").innerHTML += "22222222";
  }
  else if (m > -150 && m < -90) {
  m$("msg").innerHTML += "333333333";
  }
  else if (m > -210 && m < -150) {
  m$("msg").innerHTML += "444444";
  }
  else if (m > -270 && m < -210) {
  m$("msg").innerHTML += "5555555";
  }
  else if (m > -330 && m < -270) {
  m$("msg").innerHTML += "6666666";
  } else {
  m$("msg").innerHTML += "111111111";
  }
  m$('restart').style.display = "block";
  });
  }

  window.onload = function () {
  m$('test').onclick = function () {
  m$('test').style.display = "none";
  showMsg();
  }

  m$('restart').onclick = function () {
  m$('restart').style.display = "none";

  if (isIE) {
  m$("demo").style.top = "0px";
  m$("demo").style.left = "0px";
  } else if (m$("demo").style.MozTransform !== undefined) {
  m$("demo").style.MozTransform = 'rotate(0deg)';
  } else if (m$("demo").style.OTransform !== undefined) {
  m$("demo").style.OTransform = 'rotate(0deg)';

  } else if (m$("demo").style.webkitTransform !== undefined) {
  m$("demo").style.webkitTransform = 'rotate(0deg)';
  } else {
  m$("demo").style.transform = 'rotate(0deg)';
  }

  m$('test').style.display = "block";
  i = 0;
  }
  }
  </script>
</body>
</html>

最新资讯
韩国反垄断监管机构降低对高通处罚至2亿美元

韩国反垄断监管机构降

2009年,韩国公平贸易委员会认为高通滥用其在CDMA调制解
直击|阿里云发布数十款全新产品 推出小程序繁星计划

直击|阿里云发布数十

2019阿里云峰会今日在北京举行,阿里云智能产品管理部总
软银中国宋安澜回顾过往:没投百度团队 感觉不接地气

软银中国宋安澜回顾过

寻找中国创客第五季启动峰会在北京开幕,在上午压轴环节
创世伙伴资本周炜:过去很多经验 今天都是负担

创世伙伴资本周炜:过去

寻找中国创客第五季启动峰会在北京开幕,在上午压轴环节
优客工场毛大庆:创业者必须具备对抗焦虑的本领

优客工场毛大庆:创业者

中国创客导师、优客工场创始人、董事长毛大庆称,创业就
最新文章
微信小程序CSS3动画下拉菜单效果

微信小程序CSS3动画下

这篇文章主要为大家详细介绍了微信小程序CSS3动画下拉
微信小程序使用swiper组件实现层叠轮播图

微信小程序使用swiper

这篇文章主要为大家详细介绍了微信小程序使用swiper组
微信小程序实现带缩略图轮播效果

微信小程序实现带缩略

这篇文章主要为大家详细介绍了微信小程序实现带缩略图
小程序实现五星点评效果

小程序实现五星点评效

这篇文章主要为大家详细介绍了小程序实现五星点评效果
微信小程序实现笑脸评分功能

微信小程序实现笑脸评

这篇文章主要为大家详细介绍了微信小程序实现笑脸评分
微信小程序自定义轮播图

微信小程序自定义轮播

这篇文章主要为大家详细介绍了微信小程序自定义轮播图