小猿圈web前端之jQuery抽獎系統
阿新 • • 發佈：2019-06-28
jquery框架做前端的朋友們都會用到吧，很普遍，會用它工作起來會十分方便的，今天呢，小猿圈講師自己敲了一段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>
以上就是小編學到的，不知道你學會了沒有，作為小白的我突然感覺jquery居然這麼強大，不需要借後臺就可以實現這麼強大的功能，而且比原生的javascript還簡單，突然讓我學jquery想法蠢蠢欲動，最近在小猿圈學習，