js實現(xiàn)隨機數(shù)小游戲

更新時間：2019年06月28日 08:31:06 作者：''''''''馬賽克''''''''

這篇文章主要為大家詳細介紹了js實現(xiàn)隨機數(shù)小游戲，具有一定的參考價值，感興趣的小伙伴們可以參考一下

拋出隨機數(shù)實現(xiàn)一個“誰取餐的小游戲”，供大家參考，具體內(nèi)容如下

1、HTML結構代碼如下

<div class="mask">
 <div class="contents">
  <div class="head">
   <p>誰去拿外賣</p>
   <a href="#" id="close">X</a>
  </div>
  <div class="cont-wapper">
   <div class="cont-inner">
    <h2></h2>
    <button></button>
    <div class="sign">隨機到最小數(shù)字的人去拿外賣</div>
    <ul>
     <li class="takeout-list">扔出了一個2</li>
     <li>扔出了一個3</li>
    </ul>
   </div>
  </div>
 </div>
</div>

2、css樣式代碼如下

.mask { 
 position: fixed;left: 0;top: 0;
 width: 100%;height: 100%;
 background: rgba(0, 0, 0, 0.5);
}

.contents {
 position: absolute;top: 54px;left: 50%;
 width: 360px;border: 1px solid gray;background: white;
 border-radius: 5px;transform: translateX(-50%); 
}
.head {
 box-sizing: border-box;width: 100%;height: 44px;
 padding: 10px;border-bottom: 1px solid #eee; 
}
.head p {
 float: left;
}
.head a {
 float: right;width: 16px;
 line-height: 24px;color: #ccc;
}
.head a:hover {
 color: blue;
}
.cont-wapper {
 width: 300px;color: #555;
 padding: 15px 30px;margin: 0 auto;
}
 .cont-inner {
 font-size: 12px;background: #dbf0fa;
 padding-top: 15px;margin: 0 auto;
 margin-bottom: 10px;box-shadow: 1px 1px 2px #ddd;
}
 .cont-inner h2 {
 width: 186px;height: 188px;margin: 0 auto;
 background: url('../../Content/img1/ico.png') 0 -120px no-repeat;
}
.cont-inner button {
 display: block;cursor: pointer;/*箭頭變手*/
 outline:none;/*去掉瀏覽器默認的外邊框*/
 width: 271px;height: 40px;border: 0;
 background: url('../../Content/img1/ico.png') 0 0 no-repeat;
 margin: -45px auto 15px;
}
 .sign {
 position: relative;text-align: center;
 color: #777;margin-bottom: 10px;
}
/*after偽元素在元素之后添加內(nèi)容*/
/*content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內(nèi)容*/
.sign::after {   
 content: '';display: block;
 position: absolute;width: 40px;height: 7px;
 background: #ccc;right: 16px;top: 5px;
}
/*before偽元素在元素之前添加內(nèi)容。*/
/*content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內(nèi)容*/
 .sign::before {
 content: '';display: block;position: absolute;
 width: 40px;height: 7px;
 background: #ccc;left: 16px;top: 5px;
}
 .cont-inner ul {
 height: 180px;margin: 0 10px;
 padding: 5px 5px 0 5px;
 overflow: hidden;/*隱藏滾動條*/
}
.cont-wapper li.takeout-list {
 color: #fe5a23;font-weight: 600;
 height: 19px;line-height: 19px;
 background: url('../../Content/img1/ico.png') 0 -320px no-repeat;
}
.cont-wapper li {
 padding-left: 5px;
}

3、js代碼獲取元素

var button = document.getElementsByTagName('button')[0];//按鈕
var ullist = document.getElementsByTagName('ul')[0];
var arrList = [];//創(chuàng)建數(shù)組
var mask = document.getElementsByClassName('mask')[0];
var text = document.getElementsByClassName('contents')[0];
var min = NaN;//最小值
var index;//索引值

4、js代碼實現(xiàn)鼠標滑過的時候背景的動態(tài)變化

//鼠標按下事件
button.onmousedown = function () {
 this.style.backgroundPosition = '0 ' + (-80) + 'px';
 cteatNumer()//調(diào)用生成數(shù)組的方法
 //鼠標放開事件
 this.onmouseup = function () {
  this.style.backgroundPosition = '0 ' + (-40) + 'px';
 }
};
//鼠標移入事件
button.onmouseenter = function () {
 this.style.backgroundPosition = '0 ' + (-40) + 'px';
 //鼠標移出事件
 this.onmouseleave = function () {
  this.style.backgroundPosition = '0 ' + 0 + 'px';
 }
};

5、js代碼實現(xiàn)在數(shù)組輸出最小值

//在數(shù)組中輸出最小值
Array.prototype.min = function () {
 var min = this[0];//目前生成的數(shù)值
 var len = this.length;//數(shù)組目前的長度
 for (var i = 1; i < len; i++) {
  if (this[i] < min) {
   min = this[i];
  }
 }
 return min;
}

6、js代碼實現(xiàn)取出數(shù)組的最小值

//數(shù)組取最小值
function cteatNumer() {
 var num = Math.floor(Math.random() * 100);//0-100之間隨機生成一個精準的實數(shù)
 if (min == num) {//判斷是否有最小值重復 
  cteatNumer();//有重復就重新生成
  return;
 }  
 arrList.push(num);//在數(shù)組最下面顯示生成的值
 if (arrList.length > 11) {//數(shù)組長度超出11
  if (num > min && index == 0) {//當最小值索引值為0時
   arrList.splice(1, 1);//從數(shù)組索引值為1開始，刪除第2個數(shù)值
  } else {
   arrList.shift();//數(shù)組往上移動
  }
 }
 min = arrList.min();//最小值
 index = arrList.indexOf(min);//最小值在數(shù)組中的索引
 refurbishDom(arrList, index);//調(diào)用refurbishDom方法
}

7、用for循環(huán)遍歷當前數(shù)組的長度

function refurbishDom(arr, index) {
 ullist.innerHTML = '';//清空ul所有的數(shù)值
 var len = arr.length;//獲取當前數(shù)組的長度
 for (var i = 0; i < len; i++) {//顯示對應索引的數(shù)值
  ullist.innerHTML += '<li>' + '扔出了一個' + arr[i] + '</li>';
 }
 //在ul數(shù)組中動態(tài)指定最小值
 ullist.getElementsByTagName('li')[index].className = 'takeout-list';
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: