小猿圈web前端之jQuery抽奖系统

你有没有想过有一天可以成为千万富翁呢？你是通过自己的努力和奋斗还是其他手段获得的呢？前端程序员是通过jQuery获得的，他自己写了一个抽奖系统，下面就小猿圈前端讲师分享给大家。

效果图：

<!DOCTYPE html>

<html>

<head>

<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>

</div>

(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>

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抽奖系统，希望对你成为百万富翁有一定的帮助吧仅供娱乐，如果遇到技术上的问题可以到小猿圈寻找你需要的答案，里面有最全最新的技术等你去学习。

转载于:https://juejin.im/post/5cd532526fb9a0324e4a5403

小猿圈web前端之jQuery抽奖系统相关推荐

小猿圈Web前端开发学习路线
很多人已经下定决心学习前端开发,但是学习很盲目,没有一个明确的目标,导致学了很长时间效果也没有很明显,最终放弃了,这个结果是我们最不想看到的结果,那么学习路线就十分重要了,好的学习路线对学习会引向成功 ...
小猿圈web前端之网站性能优化方案
现在前端不仅要能做出一个网站页面,还要把这个页面做的炫酷,那需要很大程度的优化,那么怎么优化才更好呢?小猿圈总结了一下自己优化的方案,感兴趣的朋友可以看一下. 一般网站优化都是优化后台,如接口的响应时 ...
小猿圈web前端之移动端Vue+Vant实现上传压缩旋转图片功能
小猿圈web前端讲师为了大家更好的学习前端知识决定每天分享一个web前端案例,希望对你与学习前端的你有所帮助,今天分享的是移动端Vue+Vant的Uploader实现上传.压缩.旋转图片等功能的详细介 ...
小猿圈web前端简述canvas如何实现二维码和图片合成
你经常看到活动海报什么的,上都是有各种宣传文案以及二维码形成的,你知道怎么用canvas实现二维码和图片合成,下面小猿圈Linux讲师为你详细介绍一下canvas如何实现二维码和图片合成的. 使用ur ...
th:text为null报错_小猿圈web前端之vue-cli项目打包完成后运行文件路径报错问题
学习前端的小伙伴越来越多,问题也就越多,前面基础部分还好一些,特别是一到框架的时候,难住了一大部分人,今天小猿圈web前端讲师就为大家总结了vue-cli项目打包完成后运行文件路径报错问题,有兴趣的小 ...
web前端三大主流框架_小猿圈web前端之前端的主流框架都有哪些？
社会在不断发展,互联网更新换代也是飞速,web框架也是经历一代又一代的革新,那么当今时代什么框架是前端的主流框架呢?小猿圈web前端讲师查了一些资料,整理出当今时代比较流行的三种框架,下面说一下这三种 ...
css怎么使元素绝对定位有过度效果_小猿圈web前端讲解div+css绝对定位和相对定位...
最近很多网友问我绝对定位和相对定位怎么区分,怎么使用?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面小猿圈w ...
前端 input怎么显示null_小猿圈WEB前端之HTML5+CSS3面试题（一）
学习是一件非常充实的过程,特别是把自己的乐趣变成工作的时候,很多朋友就喜欢学习web前端,所以学习前端,也希望从事前端的工作,但是因为缺少实战经验,所以很多都是卡在面试这关上,下面小猿圈总结了web前 ...
ajax中async_小猿圈web前端之ajax的同步和异步有怎样的区别？
对于ajax我们应该知道ajax是主要用来在前端页面中向服务器后端请求数据,ajax中根据async的值不同分为同步(async = false)和异步(async = true)两种执行方式,那么, ...

小猿圈web前端之jQuery抽奖系统

小猿圈web前端之jQuery抽奖系统相关推荐

最新文章

热门文章