欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實現(xiàn)班級抽簽小程序

 更新時間：2021年05月19日 16:25:26   作者：是榆榆啊  
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)班級抽簽小程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)班級抽簽小程序的具體代碼，供大家參考，具體內(nèi)容如下

項目展示

項目中假設(shè)一個班只有三十個人

html結(jié)構(gòu)

<div class="outerContainer">
    <div class="question">請問你要抽幾個xx班的小寶貝呢？</div>

    <div class="number">
        <input type="text" style="color: #999;" value="請輸入需要的人數(shù)" onblur="if (this.value == '') {this.value = '請輸入需要的人數(shù)';this.style.color = '#999';}" onfocus="if (this.value == '請輸入需要的人數(shù)') {this.value = '';this.style.color = '#424242';}">
    </div>

    <div class="btnWrapper">
        <button>開始抽簽</button>
    </div>

    <div class="viewDiv"></div>

    <div class="foot">制作者：chenyu-max</div>
</div>

CSS層疊樣式

.outerContainer {
    margin-top: 100px;
}

.question {
    margin-top: 30px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 25px;
    transition: all .3s linear; 
    /* 顏色變化的時候，會有個漸變的效果 */
    text-align: center;
}

.number {
    margin-top: 30px;
    display: block;
    left: 200px;
    text-align: center;
}

.number input {
    height: 30px;
    font-size: 20px;
    line-height: 30px;
}

.btnWrapper {
    margin-top: 30px;
    width: 100%;
    height: 30px;
    text-align: center;
}

.btnWrapper button {
    outline: none;
    color: rgb(233, 8, 8);
    cursor: pointer;
    border-radius: 15px;
    width: 100px;
    height: 25px;
    line-height: 19px;
}

.viewDiv {
    margin: 20px auto;
    width: 900px;
    height: 300px;
    text-align: center;
    font-size: 30px;
    line-height: 50px;
    border: 1px solid black;
}

.foot {
    margin: 0 auto;
    text-align: center;
}

JS邏輯

獲取dom元素

var input = document.getElementsByTagName('input')[0];
var viewDiv = document.getElementsByClassName('viewDiv')[0];
var btn = document.getElementsByTagName('button')[0];
var question = document.getElementsByClassName('question')[0];

其余變量

var arr = [];   // 存放抽取處的學(xué)號
var count = 0;   // 計數(shù)器，用以 question 的顏色修改

question的顏色變化

setInterval(function() {
    var temp = count % 6;
    switch (temp) {
        case 0:
            question.style.color = 'red';
            break;
        case 1:
            question.style.color = 'green';
            break;
        case 2:
            question.style.color = 'blue';
            break;
        case 3:
            question.style.color = 'grey';
            break;
        case 4:
            question.style.color = 'purple';
            break;
        case 5:
            question.style.color = 'black';
            break;
        default:
            break;
    }
    count++;
}, 700);

抽獎邏輯

btn.onclick = function() {
    // 檢查輸入的內(nèi)容是否是是1~30人
    // 若是班級人數(shù)不止三十人，改成 input.value < 班級人數(shù) + 1
    var check = (function() {
        if (input.value > 0 && input.value < 31) {
            return true;
        } else {
            return false;
        }
    }());

    // 如果輸入的是正確的，那么進行抽簽
    if (check) {
        var num = input.value;
        arr = [];
        for (var i = 0; arr.length < num; i++) {
            // 生成1 ~ 30 的隨機數(shù)
            // 需要更改人數(shù)，直接修改 乘號后面的 30 未你們班需要的人數(shù)即可
            var temp = Math.floor(Math.random() * 30 + 1); // 1 ~ 30
            var flag = true;
            arr.forEach(function(value) {
                // 遍歷數(shù)組，防止生成的隨機數(shù)和已有的數(shù)字重復(fù)
                if (value == temp) {
                    flag = false;
                }
            })
            if (flag) {
                arr.push(temp);
            }
        }

        // 將抽出的人數(shù)的學(xué)號進行升序排序
        arr.sort(function(a, b) {
            return a - b;
        })


        var str = arr.join(", ");
        viewDiv.innerHTML = " <span style='color : red'>恭喜以下小可愛/帥哥 被抽中！</span> </br> " + str;
    } else {
        // 若不是，則輸出錯誤提示
        // 人數(shù)可以修改
        viewDiv.innerHTML = "<span style='color : red'>請輸入正確的人數(shù)（1 ~ 30）哦</span>";
    }
}

增加功能

document.onkeydown = function(e) {
    // 摁下回車鍵 觸發(fā) btn 的onclick事件
    if (e.keyCode == 13) {
        btn.onclick();
    }
}

全部代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>給xx班小寶貝來個抽簽</title>
    <link rel="icon" href="">
    <style>
        .outerContainer {
            margin-top: 100px;
        }
        
        .question {
            margin-top: 30px;
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 25px;
            transition: all .3s linear;
            text-align: center;
        }
        
        .number {
            margin-top: 30px;
            display: block;
            left: 200px;
            text-align: center;
        }
        
        .number input {
            height: 30px;
            font-size: 20px;
            line-height: 30px;
        }
        
        .btnWrapper {
            margin-top: 30px;
            width: 100%;
            height: 30px;
            text-align: center;
        }
        
        .btnWrapper button {
            outline: none;
            color: rgb(233, 8, 8);
            cursor: pointer;
            border-radius: 15px;
            width: 100px;
            height: 25px;
            line-height: 19px;
        }
        
        .viewDiv {
            margin: 20px auto;
            width: 900px;
            height: 300px;
            text-align: center;
            font-size: 30px;
            line-height: 50px;
            border: 1px solid black;
        }
        
        .foot {
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="outerContainer">
        <div class="question">請問你要抽幾個xx班的小寶貝呢？</div>

        <div class="number">
            <input type="text" style="color: #999;" value="請輸入需要的人數(shù)" onblur="if (this.value == '') {this.value = '請輸入需要的人數(shù)';this.style.color = '#999';}" onfocus="if (this.value == '請輸入需要的人數(shù)') {this.value = '';this.style.color = '#424242';}">
        </div>

        <div class="btnWrapper">
            <button>開始抽簽</button>
        </div>

        <div class="viewDiv"></div>

        <div class="foot">制作者：chenyu-max</div>
    </div>

    <script>
        var input = document.getElementsByTagName('input')[0];
        var viewDiv = document.getElementsByClassName('viewDiv')[0];
        var btn = document.getElementsByTagName('button')[0];
        var question = document.getElementsByClassName('question')[0];

        var arr = []; // 存放抽取處的學(xué)號
        var count = 0; // 計數(shù)器，用以question 的顏色修改器
        setInterval(function() {
            var temp = count % 6;
            switch (temp) {
                case 0:
                    question.style.color = 'red';
                    break;
                case 1:
                    question.style.color = 'green';
                    break;
                case 2:
                    question.style.color = 'blue';
                    break;
                case 3:
                    question.style.color = 'grey';
                    break;
                case 4:
                    question.style.color = 'purple';
                    break;
                case 5:
                    question.style.color = 'black';
                    break;
                default:
                    break;
            }
            count++;
        }, 700);


        document.onkeydown = function(e) {
            // 摁下回車鍵 觸發(fā) btn 的onclick事件
            if (e.keyCode == 13) {
                btn.onclick();
            }
        }

        btn.onclick = function() {
            // 檢查輸入的內(nèi)容是否是是1~30人
            // 若是班級人數(shù)不止三十人，改成 input.value < 班級人數(shù) + 1
            var check = (function() {
                if (input.value > 0 && input.value < 31) {
                    return true;
                } else {
                    return false;
                }
            }());

            // 如果輸入的是正確的，那么進行抽簽
            if (check) {
                var num = input.value;
                arr = [];
                for (var i = 0; arr.length < num; i++) {
                    // 生成1 ~ 30 的隨機數(shù)
                    // 需要更改人數(shù)，直接修改 乘號后面的 30 未你們班需要的人數(shù)即可
                    var temp = Math.floor(Math.random() * 30 + 1); // 1 ~ 30
                    var flag = true;
                    arr.forEach(function(value) {
                        // 遍歷數(shù)組，防止生成的隨機數(shù)和已有的數(shù)字重復(fù)
                        if (value == temp) {
                            flag = false;
                        }
                    })
                    if (flag) {
                        arr.push(temp);
                    }
                }

                // 將抽出的人數(shù)的學(xué)號進行升序排序
                arr.sort(function(a, b) {
                    return a - b;
                })


                var str = arr.join(", ");
                viewDiv.innerHTML = " <span style='color : red'>恭喜以下小可愛/帥哥 被抽中！</span> </br> " + str;
            } else {
                // 若不是，則輸出錯誤提示
                // 人數(shù)可以修改
                viewDiv.innerHTML = "<span style='color : red'>請輸入正確的人數(shù)（1 ~ 30）哦</span>";
            }
        }
    </script>
</body>

</html>

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

相關(guān)文章

  • JS實現(xiàn)單行文字不間斷向上滾動的方法

    JS實現(xiàn)單行文字不間斷向上滾動的方法

    這篇文章主要介紹了JS實現(xiàn)單行文字不間斷向上滾動的方法,以實例形式較為詳細(xì)的分析了文字滾動效果實現(xiàn)的原理與技巧,需要的朋友可以參考下
    2015-01-01
  • html的DOM中document對象anchors集合用法實例

    html的DOM中document對象anchors集合用法實例

    這篇文章主要介紹了html的DOM中document對象anchors集合用法,實例分析了anchors集合的功能及使用技巧,需要的朋友可以參考下
    2015-01-01
  • js實現(xiàn)簡單五子棋游戲

    js實現(xiàn)簡單五子棋游戲

    這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡單五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-05-05
  • 維護loading加載狀態(tài)的幾個方法小結(jié)

    維護loading加載狀態(tài)的幾個方法小結(jié)

    在項目開發(fā)中,當(dāng)頁面請求接口時,組件局部或者頁面全局顯示loading加載遮罩可謂是司空見慣了,下面來討論一下如何優(yōu)雅的使用loading狀態(tài),文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
    2024-09-09
  • JS實現(xiàn)縱向輪播圖（初級版）

    JS實現(xiàn)縱向輪播圖（初級版）

    這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)縱向輪播圖的初級版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-01-01
  • 原生js實現(xiàn)自由拖拽彈窗代碼demo

    原生js實現(xiàn)自由拖拽彈窗代碼demo

    這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)彈窗拖拽代碼demo，以及在實現(xiàn)js彈窗拖拽效果需要注意的事項，感興趣的小伙伴們可以參考一下
    2016-06-06
  • JavaScript 使用 splice 方法刪除數(shù)組元素可能導(dǎo)致的問題分析

    JavaScript 使用 splice 方法刪除數(shù)組元素可能導(dǎo)致的問題分析

    這篇文章主要介紹了JavaScript 使用 splice 方法刪除數(shù)組元素可能導(dǎo)致的問題分析,當(dāng)在 JavaScript 中從數(shù)組中刪除元素時，使用 splice 方法時需要謹(jǐn)慎，本文給大家詳細(xì)講解，需要的朋友可以參考下
    2023-04-04
  • xWin之JS版

    xWin之JS版

    xWin之JS版...
    2006-11-11
  • javascript判斷變量是否有值的方法

    javascript判斷變量是否有值的方法

    這篇文章主要介紹了javascript判斷變量是否有值的方法,可實現(xiàn)有效判斷值的功能,非常具有實用價值,需要的朋友可以參考下
    2015-04-04
  • 簡單的JS輪播圖代碼

    簡單的JS輪播圖代碼

    這篇文章主要介紹了簡單的JS輪播圖實現(xiàn)方法，代碼簡單易懂，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
    2016-07-07

最新評論