生活随笔
收集整理的這篇文章主要介紹了
js仿饿了吗？谁去拿外卖小游戏(锻炼布局思想、逻辑思维)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
小小案例 ? 直接上代碼 ? js部分有注釋
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>誰去取餐</title><style>*{padding: 0;margin: 0;list-style: none;}html,body{width: 100%;height: 100%;background-color: #fbfbfb;overflow: hidden;}.banner{width: 1180px;height: 100px;border: 1px solid #e6e6e6;background-color: #fff; margin: 100px auto;position: relative;}.banner .logo {width: 185px;height: 55px;position: absolute; right: 0;top: -50px; cursor: pointer;}.banner .logo img{width: 100%;height: 100%;}.mask {width:100%;height: 100%;background-color:rgba(0,0,0,0.5); position: fixed;top:0;left: 0;display: none;}.mask .container {width: 360px;margin: 100px auto;background-color: #fff;border: 1px solid gray;border-radius: 5px;}.mask .container .head{width: 100%;height: 44px;box-sizing: border-box;padding: 10px;position: relative;border-bottom: 1px solid #ccc;}.container .head .title{display: inline-block; }.container .head span{display: inline-block;position: absolute;right: 10px;top: 6px;font-size: 20px;color: #ccc;cursor: pointer;}.container .body{width: 100%;}.container .body .inner{width: 300px;margin: 15px 30px;background-color: #dbf0fa;/* 水平偏移量 垂直偏移量 擴展量 */box-shadow: 1px 1px 2px #ddd;}.container .body .inner .glory{width: 186px;height: 183px;margin: 0 auto;background: url('img/ico.png') 0 -120px no-repeat;position: relative;}.container .body .inner button{position:absolute;bottom: 5px;left: -42px;width: 271px;height: 40px;border: 0;background: url('img/ico.png') 0 0px no-repeat;}.container .body .content{width: 100%;padding: 10px 0;text-align: center;font-size: 12px;color: #777;}.container .body .content p{display: inline-block;padding: 0 12px;}.container .body .content::before,.container .body .content::after{content: '';width: 40px;height: 7px;display: inline-block;background-color: #ccc;}.container .body ul {padding: 5px 15px 0 15px;height: 180px;}.container .body ul li{font-size: 12px;padding-left: 5px;}.container .body ul li.active{line-height: 19px;color: #ff4400;font-weight: 700;background: url('img/ico.png') 0 -320px no-repeat;}</style>
</head>
<body><div class="banner"><div class="logo" id="_logo"><img src="img/logo.png" alt=""></div></div><div class="mask" id="_mask"><div class="container"><div class="head"><p class="title">誰去拿外賣</p><span id="_span">×</span></div><div class="body"><div class="inner"><div class="glory"><button id="btn"></button></div><div class="content"><p>隨機到最小數字的人去拿外賣</p></div><ul id="_ul"></ul></div></div></div></div>
</body>
</html>
<script>/*1:點擊彈出圖層2:生成li,生成隨機數*/var logo = document.getElementById('_logo');var mask = document.getElementById('_mask');var btn = document.getElementById('btn');var span = document.getElementById('_span');var ul = document.getElementById('_ul');var lis = ul.children;// 存放隨機數var arr = [];logo.addEventListener('click',function(){mask.style.display = 'block';});span.addEventListener('click',function(){mask.style.display = 'none';//關閉之后清空ul.innerHTML = '';arr=[];});btn.onmouseenter = function(){btn.style.backgroundPosition = '0 ' + '-40px';}btn.onmouseleave = function(){btn.style.backgroundPosition = '0 ' + '0';}btn.onclick = function(){btn.style.backgroundPosition = '0 ' + '-80px';if(arr.length >= 11)// 如果長度>=11移除第一個孩子{if(arr.indexOf(arr.getMin()) == 0 )// 如果最小值出現在最上面就移除ul的第二個孩子{ul.removeChild(ul.children[1]);arr.splice(1,1);}else{ul.removeChild(ul.children[0]);arr.shift();}}ul.innerHTML += createLi();for(var i = 0;i < lis.length;i++){lis[i].className = '';ul.children[arr.indexOf(arr.getMin())].className = 'active';}}function createLi(){var string = '';do{var num = Math.floor(Math.random()*100);}while(num == arr.getMin()); // 防止出現兩相同的最小值 arr.push(num);string += "<li>扔出一個"+num+"</li>";return string;}// 在原型上面添加一個方法：查找最小值Array.prototype.getMin = function(){var min = this[0]; for(var i = 0;i<this.length;i++){if(this[i] < min){min = this[i];} }return min;}</script>
總結
以上是生活随笔為你收集整理的js仿饿了吗？谁去拿外卖小游戏(锻炼布局思想、逻辑思维)的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
