你有没有想过有一天可以成为千万富翁呢？你是通过自己的努力和奋斗还是其他手段获得的呢？前端程序员是通过jQuery获得的，他自己写了一个抽奖系统，下面就小猿圈前端讲师分享给大家。
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>抽奖</title>
<style>
.lottery {
position: relative;
display: inline-block;
}
.lottery img {
position: absolute;
top: 50%;
left: 50%;
margin-left: -76px;
margin-top: -82px;
cursor: pointer;
}
#message {
position: absolute;
top: 0px;
left: 10%;
}
</style>
<!--[if lte IE 8]>
<style>
.lottery img{
display: none;
}
</style>
<![endif]-->
</head>
<body>
<div>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">
当前浏览器版本过低，请使用其他浏览器尝试
</canvas>
<p id="message"></p>
<img src="./images/start.png" id="start">
</div>
<script src="这里引入jquery.js"></script>
<script>
(function ($) {
/**
* @param {Object} options
* @param {Array} options.list 存储奖品的的列表，example [{1:{name:'谢谢参与',image:'1.jpg'}}]
* @param {Object} options.outerCircle {color:'#df1e15'} 外圈颜色，默认红色
* @param {Object} options.innerCircle {color:'#f4ad26'} 里圈颜色，默认黄色
* @param {Array} options.dots ['#fbf0a9', '#fbb936'] 装饰点颜色 ，默认深黄浅黄交替
* @param {Array} options.disk ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'] 中心奖盘的颜色，默认7彩
* @param {Object} options.title {color:'#5c1e08',font:'19px Arial'} 奖品标题颜色
*/
$.fn.WheelSurf = function (options) {
var _default = {
outerCircle: {
color: '#df1e15'
},
innerCircle: {
color: '#f4ad26'
},
dots: ['#fbf0a9', '#fbb936'],
disk: ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'],
title: {
color: '#5c1e08',
font: '19px Arial'
}
}
$.extend(_default,options)
// 画布中心移动到canvas中心
var _this = this[0],
width = _this.width,
height = _this.height,
ctx = _this.getContext("2d"),
imgs = [],
awardTitle = [],
awardPic = []
for (var item in _default.list) {
awardTitle.push(_default.list[item].name)
imgs.push(_default.list[item].image)
}
var num = imgs.length
// 圆心
var x = width / 2
var y = height / 2
ctx.translate(x, y)
return {
init: function (angelTo) {
angelTo = angelTo || 0;
ctx.clearRect(-this.width, -this.height, this.width, this.height);
// 平分角度
var angel = (2 * Math.PI / 360) * (360 / num);
var startAngel = 2 * Math.PI / 360 * (-90)
var endAngel = 2 * Math.PI / 360 * (-90) + angel
// 旋转画布
ctx.save()
ctx.rotate(angelTo * Math.PI / 180);
// 画外圆
ctx.beginPath();
ctx.lineWidth = 25;
ctx.strokeStyle = _default.outerCircle.color;
ctx.arc(0, 0, 243, 0, 2 * Math.PI)
ctx.stroke();
// 画里圆
ctx.beginPath();
ctx.lineWidth = 23;
ctx.strokeStyle = _default.innerCircle.color;
ctx.arc(0, 0, 218, 0, 2 * Math.PI)
ctx.stroke();
// 装饰点
var dotColor = _default.dots
for (var i = 0; i < 12; i++) {
// 装饰点 圆心 坐标计算
ctx.beginPath();
var radius = 230;
var xr = radius * Math.cos(startAngel)
var yr = radius * Math.sin(startAngel)
ctx.fillStyle = dotColor[i % dotColor.length]
ctx.arc(xr, yr, 11, 0, 2 * Math.PI)
ctx.fill()
startAngel += (2 * Math.PI / 360) * (360 / 12);
}
// 画里转盘
var colors = _default.disk
for (var i = 0; i < num; i++) {
ctx.beginPath();
ctx.lineWidth = 208;
ctx.strokeStyle = colors[i % colors.length]
ctx.arc(0, 0, 104, startAngel, endAngel)
ctx.stroke();
startAngel = endAngel
endAngel += angel
}
// 添加奖品
function loadImg() {
var dtd = $.Deferred()
var countImg = 0
if (awardPic.length) {
return dtd.resolve(awardPic);
}
for (var i = 0; i < num; i++) {
var img = new Image()
awardPic.push(img)
img.src = imgs[i]
img.onload = function () {
countImg++
if (countImg == num) {
dtd.resolve(awardPic);
}
}
}
return dtd.promise()
}
$.when(loadImg()).done(function (awardPic) {
startAngel = angel / 2
for (var i = 0; i < num; i++) {
ctx.save();
ctx.rotate(startAngel)
ctx.drawImage(awardPic[i], -48, -48 - 130);
ctx.font = _default.title.font;
ctx.fillStyle = _default.title.color
ctx.textAlign = "center";
ctx.fillText(awardTitle[i], 0, -170);
startAngel += angel
ctx.restore();
}
})
ctx.restore();
},
/**
* @param angel 旋转角度
* @param callback 转完后的回调函数
*/
lottery: function (angel, callback) {
angel = angel || 0
angel = 360-angel
angel += 720
// 基值（减速）
var baseStep = 30
// 起始滚动速度
var baseSpeed = 0.3
// 步长
var count = 1;
var _this = this
var timer = setInterval(function () {
_this.init(count)
if (count == angel) {
clearInterval(timer)
if (typeof callback == "function") {
callback()
}
}
count = count + baseStep * (((angel - count) / angel) > baseSpeed ? baseSpeed : ((angel - count) / angel))
if (angel - count < 0.5) {
count = angel
}
}, 25)
}
}
}
}(jQuery))
</script>
<script>
var wheelSurf
// 初始化装盘数据 正常情况下应该由后台返回
var initData = {
"success": true,
"list": [{
"id": 100,
"name": "5000元京东卡",
"image": "./images/1.png",
"rank":1,
"percent":3
},
{
"id": 101,
"name": "1000元京东卡",
"image": "./images/2.png",
"rank":2,
"percent":5
},
{
"id": 102,
"name": "100个比特币",
"image": "./images/3.png",
"rank":3,
"percent":2
},
{
"id": 103,
"name": "50元话费",
"image": "./images/4.png",
"rank":4,
"percent":49
},
{
"id": 104,
"name": "100元话费",
"image": "./images/5.png",
"rank":5,
"percent":30
},
{
"id": 105,
"name": "500个比特币",
"image": "./images/6.png",
"rank":6,
"percent":1
},
{
"id": 106,
"name": "500元京东卡",
"image": "./images/7.png",
"rank":7,
"percent":10
}
]
}
// 计算分配获奖概率(前提所有奖品概率相加100%)
function getGift(){
var percent = Math.random()*100
var totalPercent = 0
for(var i = 0 ,l = initData.list.length;i<l;i++){
totalPercent += initData.list[i].percent
if(percent<=totalPercent){
return initData.list[i]
}
}
}
var list = {}
var angel = 360 / initData.list.length
// 格式化成插件需要的奖品列表格式
for (var i = 0, l = initData.list.length; i < l; i++) {
list[initData.list[i].rank] = {
id:initData.list[i].id,
name: initData.list[i].name,
image: initData.list[i].image
}
}
// 查看奖品列表格式
// 定义转盘奖品
wheelSurf = $('#myCanvas').WheelSurf({
list: list, // 奖品 列表，(必填)
outerCircle: {
color: '#df1e15' // 外圈颜色(可选)
},
innerCircle: {
color: '#f4ad26' // 里圈颜色(可选)
},
dots: ['#fbf0a9', '#fbb936'], // 装饰点颜色(可选)
disk: ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'], //中心奖盘的颜色，默认7彩(可选)
title: {
color: '#5c1e08',
font: '19px Arial'
} // 奖品标题样式(可选)
})
// 初始化转盘
wheelSurf.init()
// 抽奖
var throttle = true;
$("#start").on('click', function () {
var winData = getGift() // 正常情况下获奖信息应该由后台返回
$("#message").html('')
if(!throttle){
return false;
}
throttle = false;
var count = 0
// 计算奖品角度
for (const key in list) {
if (list.hasOwnProperty(key)) {
if (winData.id == list[key].id) {
break;
}
count++
}
}
// 转盘抽奖，
wheelSurf.lottery((count * angel + angel / 2), function () {
$("#message").html(winData.name)
throttle = true;
})
})
</script>
</body>
</html>
以上就是小猿圈web前端讲师给大家分享的jQuery抽奖系统，希望对你成为百万富翁有一定的帮助吧仅供娱乐前端自学交流群：820024416，如果遇到技术上的问题可以到小猿圈寻找你需要的答案，里面有最全最新的技术等你去学习。