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

最新资讯
理想汽车申请赴美IPO 2020年第一季度净亏损7711.3万元

理想汽车申请赴美IPO

2020年第一季度,理想汽车实现营收8.52亿元人民币,对应毛
苹果CEO库克2019年薪酬总额超过1.33亿美元

苹果CEO库克2019年薪

库克几乎所有的薪酬都是以股票奖励和相关绩效奖金的形
电竞工作者不单单是打游戏 或成为年轻人择业的新蓝海

电竞工作者不单单是打

高校毕业生就业统计相关指标,其中比较引人注目的一点是
理想汽车申请赴美IPO 李想和王兴分列第一第二大股东

理想汽车申请赴美IPO

李想是理想汽车的最大自然人股东,持有约3.56亿股,约占总
6月国内手机出货量2863.0万部 5G手机占比超六成

6月国内手机出货量286

据中国信通院最新发布的报告,2020年6月,国内手机市场总
芒果超媒上半年预盈破10亿,“浪姐”赚了多少钱?

芒果超媒上半年预盈破

开源证券研报数据披露,乐观预计,《乘风破浪的姐姐》赞助
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大