小猿圈web前端之jQuery抽奖系统
你有没有想过有一天可以成为千万富翁呢？你是通过自己的努力和奋斗还是其他手段获得的呢？前端程序员是通过jQuery获得的，他自己写了一个抽奖系统，下面就小猿圈前端讲师分享给大家。效果图：https://upload-images.jianshu.io/upload_images/15397392-42368b076cccd3bf.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240<!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> <!--> <style> .lottery img{ display: none; } </style> <!--></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, width = _this.width, height = _this.height, ctx = _this.getContext("2d"), imgs = [], awardTitle = [], awardPic = [] for (var item in _default.list) { awardTitle.push(_default.list.name) imgs.push(_default.list.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 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 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 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, -48, -48 - 130); ctx.font = _default.title.font; ctx.fillStyle = _default.title.color ctx.textAlign = "center"; ctx.fillText(awardTitle, 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.percent if(percent<=totalPercent){ return initData.list } } } var list = {}
var angel = 360 / initData.list.length // 格式化成插件需要的奖品列表格式 for (var i = 0, l = initData.list.length; i < l; i++) { list.rank] = { id:initData.list.id, name: initData.list.name, image: initData.list.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.id) { break; } count++ } }
// 转盘抽奖， wheelSurf.lottery((count * angel + angel / 2), function () { $("#message").html(winData.name) throttle = true; }) }) </script></body></html>以上就是小猿圈web前端讲师给大家分享的jQuery抽奖系统，希望对你成为百万富翁有一定的帮助吧仅供娱乐，如果遇到技术上的问题可以到小猿圈寻找你需要的答案，里面有最全最新的技术等你去学习。
页:
[1]