js實現隨機抽號

本文轉載自查看原文 2018-10-14 20:34 700 JavaScript

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .maxBox {
                padding: 4px 6px;
                font-size: 16px;
                color: #3EAFE0;
            }
            
            .clickBtn {
                border: 1px solid #3EAFE0;
                background-color: #3EAFE0;
                color: #FFF;
                font-size: 14px;
                padding: 4px 6px;
            }
            
            .result {
                font-size: 80px;
                color: #3EAFE0;
                font-weight: bold;
                padding: 30px;
            }
            
            .txt_center {
                text-align: center;
            }
            
            .exist {
                border: 1px solid #EEE;
                padding: 20px;
                margin: 20px auto;
                width: 600px;
                min-height: 100px;
                text-align: left;
            }
            
            .exist span {
                display: inline-block;
                padding: 2px 10px;
                margin: 4px;
                border-radius: 3px;
                background-color: #3EAFE0;
                color: #FFFFFF;
            }
            
            .info {
                border: 1px solid blue;
                color: #000;
                font-weight: 500;
                padding: 20px;
                margin: 20px auto;
                width: 600px;
            }
        </style>
    </head>

    <body>
        <div class="txt_center">
            <div class="result">
                <span class="" id="result">0</span>
            </div>
            <input class="maxBox" type="text" id="txt" placeholder="請在里面輸入號碼最大值！">
            <input class="clickBtn" type="button" id="btn" value="抽號">
            <div class="exist">
                <div>已抽取：</div>
                <div id="exist"></div>
            </div>
        </div>
        <!--練習說明-->
        <div class="info">
            1、在文本框中輸入抽號最大值<br/> 2、點擊按鈕，開始抽號，隨機生成1~最大值之間的整數
            <br/> 3、已經抽取的號碼存入一個數組
            <br/> 4、為了保證號碼的唯一性，每次生成一個號碼，跟數組中的已抽取的號碼比對
            <br/> 5、如果已存在，重新生成號碼
            <br/> 6、如果不存在，放入數組中保存，並顯示出來 <br/> 7、將號碼結果放入result中顯示出來
            <br/> 8、將已經生成的號碼（數組）存入exist中顯示出來
            <br/>
        </div>
        <script type="text/javascript">
            window.onload = function() {
                var oBtn = document.getElementById("btn");
                var oTxt = document.getElementById("txt");
                var oRes = document.getElementById("result");
                var oExt = document.getElementById("exist");
                var arr = [];
                var max = 0
                oBtn.onclick = function() {
                    max = parseInt(oTxt.value);
                    //如果不是數字，終止
                    if(isNaN(max)) {
                        alert("請輸入大於1的數字！");
                        return;
                    }
                    //如果達到最大值
                    if(arr.length == max) {
                        oTxt.value = "";
                        alert("號碼已全部抽完！");
                        return;
                    }
                    //前面情況不存在，正常執行
                    getRandomNum();
//                    generateResult()
                    oRes.innerHTML = arr[arr.length - 1];
                    //生成已抽取的號碼結果
                    generateExist();
                }

                //生成隨機數
                function getRandomNum() {
                    var tmp = Math.floor(Math.random() * max + 1);
                    // 判斷是不是好數
                    var flag = isGood(tmp);
                    if(flag) {
                        arr.push(tmp);
                    } else {
                        //遞歸
                        getRandomNum();
                    }
                }
                //判斷是否重復
                function isGood(x) {
                    for(var i = 0; i < arr.length; i++) {
                        if(arr[i] == x) {
                            return false;
                        }
                    }
                    return true;
                }
                //生成已抽取的號碼
                function generateExist() {
                    var html = ''
                    for(var i = 0; i < arr.length; i++) {
                        html += '<span>' + arr[i] + '</span>';
                    }
                    oExt.innerHTML = html;
                }
                
                

            }
        </script>
    </body>

</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ppt VBA 實現隨機抽題上機課堂隨機抽號小程序，選擇困難症的福音！用JS實現根據當前時間隨機生成流水號或者訂單號 Java隨機抽撲克牌 JS實現的隨機顯示圖片 JS實現數組隨機排序 js實現數組隨機排序 JS生成不重復的隨機序列號用JavaScript+HTML實現雙色球隨機搖號效果 js實現隨機數及隨機數組