html++css+js 课堂随机点名案例

秋绥冬禧.

已于 2023-09-19 08:42:09 修改

阅读量711

点赞数 1

于 2022-11-10 13:02:15 首次发布

本文链接：https://blog.csdn.net/m0_61663332/article/details/127786728

版权

html + css + js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

课堂点名案例：该案例分为html++css+js三部分，可以通过链接的方式引入到一个HTML文件。也可以把内容写在style标签和script标签内；

使用前把学生名单放到arr数组内，可以指定抽取1-4位学生(可修改)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名案例</title>
</head>
<style>
    body {
    background-color: #062741;
}
input,
select {
    outline: none;
    border: 0;
    cursor: pointer;
}

.map {
    position: relative;
    margin: 0 auto;
    width: 1000px;
    height: 650px;
    background-image: url(img/bg.png);
}
.result {
    position: absolute;
    top: 200px;
    left: 200px;
    width: 400px;
    height: 110px;
    text-align: center;
    line-height: 110px;
    font-size: 50px;
    color: #fff;
}
.img {
    position: absolute;
    top: 350px;
    left: 320px;
    width: 128px;
    height: 128px;

}
.sel {
    position: absolute;
    top: 230px;
    right: 178px;
    width: 112px;
    height: 43px;
    padding-left: 20px;
    font-size: 20px;
    color: #009999;
}
.start,
.stop {
    position: absolute;
    top: 304px;
    right: 178px;
    width: 112px;
    height: 43px;
    color: #7a1616;
    font-size: 20px;
    background-color: #ffde00;
}
.stop {
    top: 382px;
}
</style>
<body>
    <div class="map">
        <div class="result"></div>
        <img src="img/1.png" class="img">
        <select name="" id="" class="sel">
            <option value="1">1名</option>
            <option value="2">2名</option>
            <option value="3">3名</option>
            <option value="4">4名</option>
        </select>
        <input type="button" value="开始" class="start">
        <input type="button" value="结束" class="stop">
    </div>
    <script>
        window.onload = function(){
    // 让js后加载
    // 获取元素对象
    var start = get_obj('.start');
    var stop = get_obj('.stop');
    // 定义变量存储，结果的元素对象
    var result = get_obj('.result');
    var img = get_obj('.img');
    var sel = get_obj('.sel');
    // 通过点击事件执行相关的函数
    start.onclick = start_luck;
    stop.onclick = stop_luck;
    // 定义变量来存储人员名单,数组的下标是从零开始
    var arr = ["曹操", "司马懿", "曹丕", "刘备", "诸葛亮", "关羽", "姜维", "张飞", "孙权", "周瑜", "鲁肃","马谡"];
    // 定义定时器变量
    var timer1 = null;
    var tiemr2 = null;
    // 定义变量，记录定时器间隔时间
    var steep = 10;
    // 第一开始相关逻辑
    function start_luck(){
        // 当执行start_luck函数时，禁用一些按钮
        // disabled 属性，如果值设置为true，按钮被禁用，如果值为false可以点击
        start.disabled = true;
        sel.disabled = true;
        stop.disabled = false;
        var luck_name = [];
        var nums = sel.value;  // 2 "曹操", "曹操"
        for(var i = 0; i < nums; i++){
            // js中的随机数 Math.random 它能随机0-1之间的小数，包含0 不包含1
            var key = Math.floor(Math.random() * arr.length);
            if(luck_name.includes(arr[key]) == false) {
                // 如果数组里面没有当前筛选出来的名字，就添加到数组中
                luck_name[i] = arr[key];
            }else {
                // 说明当前选出来的名字在luck_name中已经存在，当前这次循环就不能算数
                i--;
            }
        }
        if(nums == 2){
            // 设置字体大小
            set_style(result, 45); 
        }else if(nums == 3){
            set_style(result, 40);
        }else if(nums == 4){
            set_style(result, 35);
        }
        result.innerHTML = luck_name.join('-');
        // 随机图片
        var img_key = Math.floor(Math.random() * 102) + 1;
        var img_src = "img/" + img_key + ".png";
        img.src = img_src;
        timer1 = setTimeout(start_luck, steep);
    }
    // 第二结束相关逻辑
    function stop_luck(){
        // 结束函数也需要定时器
        tiemr2 = setTimeout(stop_luck, 200);
        // 点击结束按钮时，让开始函数执行的间隔时间变长
        steep = steep + 50;
        if(steep > 1000){
            clearTimeout(timer1);
            clearTimeout(tiemr2);
            // 把定时器时间间隔恢复
            steep = 10;
            // 把禁用的按钮开启
            start.disabled = false;
            sel.disabled = false;
            stop.disabled = true;
        }
    }
    // 定义设置字体属性函数
    function set_style(obj, n){
        obj.style.fontSize = n + 'px';
    }
    function get_obj(id_name){
        return document.querySelector(id_name);
    }
}
    </script>
</body>
</html>