抽奖小游戏
Posted hjysunshine
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了抽奖小游戏相关的知识，希望对你有一定的参考价值。
html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="./index.css"/> </head> <body> <div id="app"> </div> <script src="./tools.js" type="text/javascript" charset="utf-8"></script> <script src="./index.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> lottery.init({ el : document.getElementById(‘app‘), row : 4, col : 4, width : 100, height : 100, spacing : 5, lottery : [‘一等奖‘, ‘二等奖‘, ‘三等奖‘,‘四等奖‘, ‘五等奖‘, ‘六等奖‘,‘七等奖‘, ‘八等奖‘, ‘九等奖‘,‘十等奖‘, ‘十一等奖‘, ‘十二等奖‘], }); </script> </body> </html>
css代码：
.lottery { position: relative; user-select: none; } .lottery .lottery-items { background: #ff0000; text-align: center; color: #FFFFFF; position: absolute; } .on { background: #FFFF00 !important; color: #FF0000 !important; } .lottery .btn { position: absolute; top: 50%; left: 50%; background: #ff0000; text-align: center; color: yellow; transform: translateX(-50%) translateY(-50%); border-radius: 10px; font-size: 22px; font-weight: 600; cursor: pointer; }
index.js代码：
// 步骤 // 1.拿到数据 initData // 2.个数 去生成元素了 渲染 render // 3.监听事件 handle var lottery = { flag : false, index : 0, time : 200, timer : null, init: function(options) { this.initData(options); this.render(); this.handle(); }, initData: function(options) { this.el = options.el; this.row = options.row; //格子的行数 this.col = options.col; //格子的列数 this.width = options.width || 100; this.height = options.height || 100; this.spacing = options.spacing || 5; this.lottery = options.lottery; this.childLength = this.row * this.col - (this.row - 2) * (this.col - 2); //格子个数 this.domPosArr = this.getPosition(this.childLength); //每个格子的边框数据 this.totalWidth = this.width * this.col + (this.col - 1) * this.spacing; this.totalHeight = this.height * this.row + (this.row - 1) * this.spacing; }, getPosition: function(childLength) { //得到每个格子的位置信息 var arr = []; //临界值点 var criticalVal1 = 0; var criticalVal2 = this.col; var criticalVal3 = this.col + this.row - 1; var criticalVal4 = 2 * this.col + (this.row - 2); for (var i = 0; i < childLength; i++) { if (i >= criticalVal1 && i < criticalVal2) { arr[i] = { top: ‘0px‘, left: i * (this.width + this.spacing) + ‘px‘, } } else if (i >= criticalVal2 && i < criticalVal3) { arr[i] = { right: ‘0px‘, top: (i + 1 - criticalVal2) * (this.height + this.spacing) + ‘px‘, } } else if(i >= criticalVal3 && i < criticalVal4){ arr[i] = { bottom : ‘0px‘, left : (criticalVal4 - i - 1 ) * (this.width + this.spacing) + ‘px‘, } } else if(i >= criticalVal4){ arr[i] = { left : ‘0px‘, bottom : (i - criticalVal4 + 1) * (this.height + this.spacing) + ‘px‘, } } } return arr; }, render: function() { for (var i = 0; i < this.childLength ; i++) { var posInfo = this.domPosArr[i]; var oDiv = document.createElement(‘div‘); oDiv.setAttribute(‘class‘, ‘lottery-items‘); if (posInfo.top) { oDiv.style.top = posInfo.top; } if (posInfo.bottom) { oDiv.style.bottom = posInfo.bottom; } if (posInfo.left) { oDiv.style.left = posInfo.left; } if (posInfo.right) { oDiv.style.right = posInfo.right; } oDiv.style.width = this.width + ‘px‘; oDiv.style.height = this.height + ‘px‘; oDiv.style.lineHeight = oDiv.style.height; oDiv.innerText = i + 1; oDiv.dataset.praise = this.lottery[i]; this.el.appendChild(oDiv); } //添加抽奖按钮 var oDiv = document.createElement(‘div‘); oDiv.innerHTML = ‘点我抽奖‘; oDiv.setAttribute(‘class‘, ‘btn‘); oDiv.style.width = (this.col - 2) * this.width + ‘px‘; oDiv.style.height = (this.row - 2) * this.height + ‘px‘; oDiv.style.lineHeight = oDiv.style.height; this.el.appendChild(oDiv); this.el.classList.add(‘lottery‘); //预防 el 的 id改变后所造成样式不可用的问题 this.el.style.width = this.totalWidth + ‘px‘; this.el.style.height = this.totalHeight + ‘px‘; }, handle: function() { var self = this; var oBtn = this.el.getElementsByClassName(‘btn‘)[0]; addEvent(oBtn, ‘click‘, function() { if(!self.flag) { self.startLottery(); } }); }, startLottery : function () { this.flag = true; var onDom = this.el.getElementsByClassName(‘lottery-items‘)[this.index]; onDom.classList.add(‘on‘); setTimeout(this.runner.bind(this), this.time); }, runner : function() { clearTimeout(this.timer); var index = Math.floor(Math.random() * this.childLength); while(index === this.index) { index = Math.floor(Math.random() * this.childLength); } this.index = index; var onDom = this.el.getElementsByClassName(‘on‘)[0]; onDom.classList.remove(‘on‘); onDom = this.el.getElementsByClassName(‘lottery-items‘)[this.index]; onDom.classList.add(‘on‘); this.time -= 20; if(this.time < 20){ this.end(); return; } this.timer = setTimeout(this.runner.bind(this), this.time); }, end : function () { var self = this; setTimeout(function() { alert(self.el.getElementsByClassName(‘lottery-items‘)[self.index].dataset.praise); self.resetting(); }, 0); }, resetting : function() { this.flag = false; this.index = 0; this.time = 500; this.el.getElementsByClassName(‘on‘)[0].classList.remove(‘on‘); }, };
以上是关于抽奖小游戏的主要内容，如果未能解决你的问题，请参考以下文章