拋出隨機數實現一個“誰取餐的小游戲”，供大家參考，具體內容如下

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">隨機到最小數字的人去拿外賣</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偽元素在元素之后添加內容*//*content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內容*/.sign::after {    content: '';display: block; position: absolute;width: 40px;height: 7px; background: #ccc;right: 16px;top: 5px;}/*before偽元素在元素之前添加內容。*//*content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內容*/ .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 = [];//創建數組var mask = document.getElementsByClassName('mask')[0];var text = document.getElementsByClassName('contents')[0];var min = NaN;//最小值var index;//索引值