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

最新资讯
德国英飞凌否认暂停向华为供货

德国英飞凌否认暂停向

德国半导体制造企业英飞凌21日对新华社记者表示,将继续
中国经济的韧性|华为:三十功名 向死而生

中国经济的韧性|华为:三

他们往往不会站在前台锋芒毕露,成为媒体的宠儿、谈论自
小度智能音箱出货量中国第一 负责人晋升百度副总裁

小度智能音箱出货量中

小度智能音箱出货量升至中国第一,负责人景鲲晋升百度副
美团王慧文谈那些年踩过的“坑”

美团王慧文谈那些年踩

王慧文表示,“消费互联网跟产业互联网之间的融合”就像
NASA公布最新登月计划:2028年开建月球基地

NASA公布最新登月计划

近日,NASA更新了代号“阿尔忒弥斯”的登月计划细节。在
一图看全任正非受访:华为已准备好 不会出现极端情况

一图看全任正非受访:

任正非今日在华为总部接受了新浪科技等媒体的专访,对近
最新文章
JavaScript解析及序列化JSON的方法实例分析

JavaScript解析及序列

这篇文章主要介绍了JavaScript解析及序列化JSON的方法
如何为vuex实现带参数的 getter和state.commit

如何为vuex实现带参数

这篇文章主要介绍了如何为vuex实现带参数的getter和st
使用VUE+iView+.Net Core上传图片的方法示例

使用VUE+iView+.Net C

这篇文章主要介绍了使用VUE+iView+.Net Core上传图片
JS实现的获取银行卡号归属地及银行卡类型操作示例

JS实现的获取银行卡号

这篇文章主要介绍了JS实现的获取银行卡号归属地及银行
Angular6 用户自定义标签开发的实现方法

Angular6 用户自定义

这篇文章主要介绍了Angular6 用户自定义标签开发的实
React 实现拖拽功能的示例代码

React 实现拖拽功能的

这篇文章主要介绍了React 实现拖拽功能的示例代码,小编