能夠設定中獎概率的抽獎效果

螞蟻小編發表於2017-04-14

分享一段程式碼例項，它實現了圓盤抽獎效果。

並且我們能夠人為的設定中獎概率，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
#warp {
  width: 400px;
  height: 600px;
  background:-webkit-gradient(linear,left top,left bottom,from(#EE0000),color-stop(0.5,#E9967A),to(#FF0000));
  background:-moz-linear-gradient(top,#EE0000, #E9967A 50%,#ff0000);
  position: absolute;
  right: 0;
}
#demo1 {
  width: 320px;
  height: 520px;
  background: white;
  border-radius: 20px;
  margin: 10px auto;
  overflow: hidden;
}
h3 {
  font: bolder 30px/25px Times-New-Roman;
  color: white;
  padding: 15px 0 0 140px;
}
ul {
  list-style: none;
}
li {
  padding: 5px 30px;
  border-bottom: dotted 2px #ccc;
}
/*轉盤樣式*/
#canvas {
  position: absolute;
  z-index: -1;
  transition: transform 4s;
  -webkit-transition: transform 4s;
  -moz-transition: transform 4s;
  -o-transition: transform 4s;
}
#canvas1 {
  position: absolute;
  z-index: 1;
}
#canvas2 {
  position: absolute;
  z-index: -2;
}
div {
  width: 800px;
  height: 600px;
}
</style>
</head>
<body>
<div id="warp">
  <h3>活動動態</h3>
  <div id="demo1">
    <ul id="ul"></ul>
  </div>
</div>
<!--轉盤結構-->
<div>
  <canvas id="canvas"></canvas>
  <canvas id="canvas1"></canvas>
  <canvas id="canvas2"></canvas>
</div>
<script>
  produce_text = ["iphone 6s 玫瑰金",
    "ipad air 2-64G",
    "100元淘寶購物券",
    "nubia z9 頂配版",
    "小米 note 頂配版",
    "華為榮耀土豪金",
    "華為p8 土豪金",
    "50QB充值卡",
    "索尼數位相機",
    "魅族note頂配",
    "移動全國流量1G",
    "愛奇藝黃金會員3個月"];
end_num = '';
num_text = ["139", "189", "131", "158", "177", "137", "131", "155", "150", "138"];
var random = function() {
  num1 = Math.floor(Math.random() * 11);
  end_num = Math.floor(Math.random() * 8999 + 1000);
  num3 = Math.floor(Math.random() * 10);
};
var createa_node = function() {
  var parent = document.getElementById("ul");
  for (var i = 0; i < 100; i++) {
    random();
    var text = document.createTextNode(num_text[num3] + "****" + end_num + "獲得了" + produce_text[num1]);
    var li = document.createElement("li");
    li.appendChild(text);
    parent.appendChild(li);
 
  }
};
 
function startmarquee(lh, speed, delay, index) {
  /*
   函式startmarquee的引數：
   lh：文字一次向上滾動的距離或高度；
   speed：滾動速度；
   delay：滾動停頓的時間間隔；
   index：可以使封裝後的函式應用於頁面當中不同的元素；
   */
  var t;
  var p = false;
  var o = document.getElementById("demo1");
  //獲取文件中的滾動區域物件，賦值給變數o；
  o.innerHTML += o.innerHTML; //物件中的實際內容被複制了一份，包含了兩個ul，當然li標籤也
  //    由原來的3行，變為6行；複製的目的在於給文字不間斷向上滾動提供過渡。
  o.onmouseover = function() {
    p = true
  };
  //滑鼠滑過，停止滾動；
  o.onmouseout = function() {
    p = false
  };
  //滑鼠離開，開始滾動；p是true還是false直接影響到下面start()函式的執行；
  o.scrollTop = 0;
  //文字內容頂端與滾動區域頂端的距離，初始值為0；
  function start() {
    t = setInterval(scrolling, speed); //每隔一段時間，setInterval便會執行一次
    //   scrolling函式；speed越大，滾動時間間隔越大，滾動速度越慢；
    if (!p) {
      o.scrollTop += 1;
    }
    //滾動停止或開始，取決於p傳來的布林值；
  }
 
  function scrolling() {
    if (o.scrollTop % lh != 0) {
      //如果不被整除，即一次上移的高度達不到lh，則內容會繼續往上滾動；
      o.scrollTop += 1;
      if (o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0;
      //物件o中的內容之前被複制了一次，所以它的滾動高度，其實是原來內容的兩倍高度；
      /*     當內容向上滾動到scrollHeight/2的高度時，全部3行文字已經顯示了一遍，至此整塊內容
           scrollTop歸0；再等待下一輪的滾動，從而達到文字不間斷向上滾動的效果；*/
    } else {
      clearInterval(t);
      //否則清除t，暫停滾動
      setTimeout(start, delay);
      //經過delay間隔後，啟動start() 再連續滾動
    }
  }
  setTimeout(start, delay);
  //第一次啟動滾動；setTimeout會在一定的時間後執行函式start()，且只執行一次
}
//傳遞引數
createa_node();
startmarquee(58, 30, 0, 0);
 
/*轉盤特效*/
var canvas = document.getElementById("canvas");
var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");
var ctx = canvas.getContext("2d");
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var itext = ["一等獎", "二等獎", "三等獎", "四等獎", "五等獎", "六等獎", "七等獎", "謝謝參與"];
canvas.width = document.body.clientWidth;
canvas.height = 600;
canvas1.width = document.body.clientWidth;
canvas1.height = 600;
canvas2.width = document.body.clientWidth;
canvas2.height = 600;
var w = canvas.width / 2;
var h = canvas.height / 2;
var startangle = 0;
var endangle = 0;
angel = Math.PI * 2 / 8;
angel1 = Math.PI * 2 / 32;
speed = 50;
degree = 0;
price = "";
mark = 9;
var num, round;
 
var outcircle = function() {
  ctx.lineWidth = 200;
  ctx.translate(w, h);
  ctx.rotate(Math.PI / 180 * 290);
  ctx.translate(-w, -h)
  for (var i = 0; i < 8; i++) {
    startangle = angel * i;
    endangle = angel * (i + 1);
    (i + 1) % 2 ? ctx.strokeStyle = "         #1E90FF" : ctx.strokeStyle = "#1874CD";
    ctx.beginPath();
    ctx.arc(w, h, 100, startangle, endangle);
    ctx.stroke();
  }
 
};
var bgborder = function() {
  ctx2.fillStyle = "#FFA07A";
  ctx2.beginPath();
  ctx2.arc(w, h, 220, 0, 2 * Math.PI);
  ctx2.fill();
}
 
var bgcirecle = function() {
  ctx2.translate(w, h);
  ctx2.fillStyle = " #ffff00";
  for (var i = 0; i < 32; i++) {
    ctx2.beginPath();
    ctx2.arc(0, -210, 9, 0, 2 * Math.PI);
    ctx2.fill();
    ctx2.rotate(angel1);
  }
}
 
var incircle = function() {
  ctx.fillStyle = "rgba(0,0,0,0.5)";
  ctx.beginPath();
  ctx.arc(w, h, 75, 0, 2 * Math.PI);
  ctx.fill();
};
var text = function() {
  ctx.font = "30px bold Arial";
  ctx.fillStyle = "#f60";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.translate(w, h);
  ctx.rotate(angel / 2);
  ctx.rotate(-angel);
  for (var i = 0; i < 8; i++) {
    ctx.rotate(-angel);
    ctx.fillText(itext[i], 135, 0);
 
  }
  ctx.translate(-w, -h);
};
 
var get_xy = function(ev) {
  var x, y;
  if (ev.layerX || ev.layerY == 0) {
    x = ev.layerX;
    y = ev.layerY;
  } else if (ev.offsetX || ev.offsetY) {
    x = ev.offsetX;
    y = ev.offsetY;
  }
  return {
    x: x,
    y: y
  }
};
i = 0;
canvas1.onclick = function(e) {
  p = get_xy(e);
  if (i == 0) {
    if (p && ctx1.isPointInPath(p.x, p.y)) {
      i++;
      spin();
      setTimeout("i=0,alert(price)", 4000);
 
    }
  }
};
 
var btn = function() {
  ctx1.font = "20px Arial";
  var c = ctx1.createLinearGradient(w - 50, h, w + 50, h);
  c.addColorStop(0, "#B2DFEE");
  c.addColorStop(1, "#AB82FF");
  ctx1.fillStyle = c;
  ctx1.textAlign = "center";
  ctx1.textBaseline = "middle";
  ctx1.beginPath();
  ctx1.arc(w, h, 50, 0, 2 * Math.PI);
  ctx1.fill();
  ctx1.fillStyle = "#fff";
  ctx1.fillText("開始抽獎", w, h);
 
};
var point = function() {
  ctx1.fillStyle = "#EE2C2C";
  ctx1.beginPath();
  ctx1.moveTo(w, h - 120);
  ctx1.lineTo(w - 46, h - 20);
  ctx1.lineTo(w + 46, h - 20);
  ctx1.fill();
};
j = 0;
num1 = -1;
range = 0;
var spin = function() {
  random();
  if (j == 0) {
    degree += Math.floor(360 * round) + (num) * 45;
    j++;
  } else {
    degree += Math.floor(360 * round) + ((num - num1) * 45);
  }
  num1 = num;
 
  console.log(degree, round, num, range, mark);
  if (num != 0) price = itext[num - 1];
  else {
    price = itext[7];
  }
  if (num == 0) {
    canvas.style.transform = "rotate(" + degree + "deg)";
  }
  if (num == 1) {
    canvas.style.transform = "rotate(" + degree + "deg)";
  }
  if (num == 2) {
    canvas.style.transform = "rotate(" + degree + "deg)";
  }
  if (num == 3) {
    canvas.style.transform = "rotate(" + degree + "deg)";
  }
  if (num == 4) {
    canvas.style.transform = "rotate(" + degree + "deg)";
  }
  if (num == 5) {
    canvas.style.transform = "rotate(" + degree + "deg)";
  }
  if (num == 6) {
 
    canvas.style.transform = "rotate(" + degree + "deg)";
  }
  if (num == 7) {
    canvas.style.transform = "rotate(" + degree + "deg)";
  }
 
};
var random = function() {
  mark = Math.floor(Math.random() * 10);
  if (mark >= 4) {
    num = 0;
  } else if (mark >= 1) {
    num = Math.floor(Math.random() * 5) + 3;
  } else
    num = 2;
 
  round = Math.floor(Math.random() * 2 + 4);
  if (num1 > num)
    range = Math.floor(Math.random() * 9 + 36);
  else {
    range = Math.floor(Math.random() * 8 + 35);
  }
};
 
window.onload = function() {
  document.body.style.overlfow = 'hidden'
  outcircle();
  text();
  incircle();
  point();
  btn();
  bgborder();
  bgcirecle();
}
</script>
</body>
</html>

相關文章