这篇文章主要介绍了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>

最新资讯
网店沃尔玛养成记:线上消费+线下取货

网店沃尔玛养成记:线上

最新调查显示,美国网民在网上购买食品杂货时,第一选择是
“双11”商家拉着明星送礼物 真福利还是薅羊毛?

“双11”商家拉着明星

这个“双11”,粉丝有点忙……明星定制款、签名海报、偶
贾跃亭拒绝查账 恒大正式起诉:8亿美元咋花光的

贾跃亭拒绝查账 恒大

文/文丰来源:大摩财经赶走恒大委派的出纳员恒大与贾跃
抖音5分钟人间1小时? 短视频刷屏背后的沉迷与觉醒

抖音5分钟人间1小时?

上世纪70年代,艺术家安迪•沃霍尔曾对未来做出两个预言
工商部门发布“双十一”消费提示

工商部门发布“双十一

昨天,市工商局发布10份消费者投诉分析,特别推出“双十一
7-Eleven在美国测试无人收银系统

7-Eleven在美国测试无

7-Eleven计划在经过前期14门店的测试后,在2019年将这项
最新文章
vue中引用swiper轮播插件的教程详解

vue中引用swiper轮播

这篇文章主要介绍了vue中引用swiper轮播插件的方法,在
JS实现的视频弹幕效果示例

JS实现的视频弹幕效果

这篇文章主要介绍了JS实现的视频弹幕效果,涉及javascr
jQuery实现的页面弹幕效果【测试可用】

jQuery实现的页面弹幕

这篇文章主要介绍了jQuery实现的页面弹幕效果,涉及jQu
深入理解Vue 组件之间传值

深入理解Vue 组件之间

这篇文章较详细的给大家介绍了vue组件之间传值的方法,
bootstrap实现点击删除按钮弹出确认框的实例代码

bootstrap实现点击删

本文通过实例代码给大家介绍了bootstrap实现点击删除
详解vue移动端项目的适配(以mint-ui为例)

详解vue移动端项目的

这篇文章主要介绍了详解vue移动端项目的适配(以mint-u