JavaScript implements class lottery applet

This article shares the specific code of JavaScript to implement the class lottery applet for your reference. The specific content is as follows

Project Display

In the project, it is assumed that there are only thirty people in a class.

HTML structure

<div class="outerContainer">
    <div class="question">How many babies from Class xx do you want to draw? </div>

    <div class="number">
        <input type="text" style="color: #999;" value="Please enter the required number of people" onblur="if (this.value == '') {this.value = 'Please enter the required number of people';this.style.color = '#999';}" onfocus="if (this.value == 'Please enter the required number of people') {this.value = '';this.style.color = '#424242';}">
    </div>

    <div class="btnWrapper">
        <button>Start the draw</button>
    </div>

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

    <div class="foot">Producer: chenyu-max</div>
</div>

CSS Cascading Styles

.outerContainer {
    margin-top: 100px;
}

.question {
    margin-top: 30px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 25px;
    transition: all .3s linear; 
    /* When the color changes, there will be a gradient effect*/
    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 Logic

Get DOM element

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

Other variables

var arr = []; // Store the student number of the extraction location var count = 0; // Counter, used to modify the color of the question

question color change

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);

Lottery Logic

btn.onclick = function() {
    // Check if the input is between 1 and 30 people // If the class size is more than 30, change to input.value < class size + 1
    var check = (function() {
        if (input.value > 0 && input.value < 31) {
            return true;
        } else {
            return false;
        }
    }());

    // If the input is correct, then draw lots if (check) {
        var num = input.value;
        arr = [];
        for (var i = 0; arr.length < num; i++) {
            // Generate random numbers from 1 to 30 // If you need to change the number of people, just modify the 30 after the multiplication sign to the number of people you need in your class var temp = Math.floor(Math.random() * 30 + 1); // 1 ~ 30
            var flag = true;
            arr.forEach(function(value) {
                // Traverse the array to prevent the generated random numbers from repeating the existing numbers if (value == temp) {
                    flag = false;
                }
            })
            if (flag) {
                arr.push(temp);
            }
        }

        // Sort the student numbers of the selected students in ascending order arr.sort(function(a, b) {
            return a - b;
        })


        var str = arr.join(", ");
        viewDiv.innerHTML = " <span style='color : red'>Congratulations to the following cute/handsome guys for being selected! </span> </br> " + str;
    } else {
        // If not, output an error message // The number of people can be modified viewDiv.innerHTML = "<span style='color : red'>Please enter the correct number of people (1 ~ 30)</span>";
    }
}

Adding functionality

document.onkeydown = function(e) {
    // Press the Enter key to trigger the onclick event of btn if (e.keyCode == 13) {
        btn.onclick();
    }
}

Full code

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Let's draw lots for the little ones in class 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">How many babies from Class xx do you want to draw? </div>

        <div class="number">
            <input type="text" style="color: #999;" value="Please enter the required number of people" onblur="if (this.value == '') {this.value = 'Please enter the required number of people';this.style.color = '#999';}" onfocus="if (this.value == 'Please enter the required number of people') {this.value = '';this.style.color = '#424242';}">
        </div>

        <div class="btnWrapper">
            <button>Start the draw</button>
        </div>

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

        <div class="foot">Producer: 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 = []; // Store the student number of the extraction var count = 0; // Counter, used for question color modifier 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) {
            // Press the Enter key to trigger the onclick event of btn if (e.keyCode == 13) {
                btn.onclick();
            }
        }

        btn.onclick = function() {
            // Check if the input is between 1 and 30 people // If the class size is more than 30, change to input.value < class size + 1
            var check = (function() {
                if (input.value > 0 && input.value < 31) {
                    return true;
                } else {
                    return false;
                }
            }());

            // If the input is correct, then draw lots if (check) {
                var num = input.value;
                arr = [];
                for (var i = 0; arr.length < num; i++) {
                    // Generate random numbers from 1 to 30 // If you need to change the number of people, just modify the 30 after the multiplication sign to the number of people you need in your class var temp = Math.floor(Math.random() * 30 + 1); // 1 ~ 30
                    var flag = true;
                    arr.forEach(function(value) {
                        // Traverse the array to prevent the generated random numbers from repeating the existing numbers if (value == temp) {
                            flag = false;
                        }
                    })
                    if (flag) {
                        arr.push(temp);
                    }
                }

                // Sort the student numbers of the selected students in ascending order arr.sort(function(a, b) {
                    return a - b;
                })


                var str = arr.join(", ");
                viewDiv.innerHTML = " <span style='color : red'>Congratulations to the following cute/handsome guys for being selected! </span> </br> " + str;
            } else {
                // If not, output an error message // The number of people can be modified viewDiv.innerHTML = "<span style='color : red'>Please enter the correct number of people (1 ~ 30)</span>";
            }
        }
    </script>
</body>

</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: