HTML 随机点名 --个人写法

最新推荐文章于 2024-04-22 15:32:24 发布

醉在音乐里

最新推荐文章于 2024-04-22 15:32:24 发布

阅读量4.7k

点赞数 3

文章标签： js javascript html css

本文链接：https://blog.csdn.net/ZZYYL_/article/details/107885395

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点名3.0</title>
    <style>
        button{
            height: 40px;
            width: 80px;
            margin: 5px;
            background:#FFFAF0;
            border-width:1px;
            font-size: 18px;
        }
        span{
            height: 200px;
            width: 200px;
            background: bisque;
            margin: 5px;
            font-size: 20px;
        }

        .D1{
            height: 400px;
            width: 1500px;
            background: #fff;
        }
        .B{
            height: 40px;
            width: 80px;
            margin: 5px;
            border-radius: 5px;
        }
        .Dm{
            height: 65px;
            width: 300px;
            font-size: 50px;
            background: #fff;
            border-radius: 10px;
        }
    </style>
</head>
<body onload="A()">
<div align="center">
    <div id="D1" class="D1" align="center" >
        <input type="button" value="开始" class="B" onclick="begin()"><br>
        <input type="button" value="结束" class="B" onclick="end()" ><br>
    </div>
    <div class="Dm">
        <p  id="P2"></p>
    </div>
</div>

<script>
    let name;
    let f;
    let k=0;
    let F=true;
    let names=[
        "裴磊", "杨三坡", "赵世博", "孙涛", "无", "黄焱", "刑士祥", "朱文宝", "王得虎", "徐啸儒", "任苗苗", "谭威",
        "窦文铭", "涂凯", "无", "刘雪峰", "张好", "无", "张子强", "无", "张坤", "何俊豪", "汪权", "姚勇",
        "杨佳鹏", "张亚军", "王帝豪", "赵文娟", "刘莎莎", "刘腾飞", "陈志浩", "张红娟", "张阳", "李慧琴", "褚亚涛", "王鑫",
        "张永宝","刘海鹏", "张宇", "杨淼州", "张子阳", "刘崇","张克琪", "陶宇", "杨锡坤", "无", "无", "魏邵杰",
        "无",    "高杜炜", "万功贺", "朱晨辉", "杨文昊", "王少华","郭亮","无","王艳康","无","张浩然","周俊杰",
        "无",    "无","姬家兴","无","李智成","周鹏","吕浚鹏","无","无","无","无","无"];
    //生成当前名单
    function A(){
        for(let i=0;i<names.length;i++){
            if(names[i].length>1){
                let x=document.createElement("button");
                x.id=k+'';
                let t=document.createTextNode(names[i]);
                x.appendChild(t);
                document.getElementById("D1").appendChild(x);
                if((i+1)%12==0&i!=0){
                    let x=document.createElement("br");
                    document.getElementById("D1").appendChild(x);
                }
                k++;
            }else{
                let x=document.createElement("button");
                let t=document.createTextNode(names[i]);
                x.appendChild(t);
                document.getElementById("D1").appendChild(x);
                if((i+1)%12==0&i!=0){
                    let x=document.createElement("br");
                    document.getElementById("D1").appendChild(x);
                }
            }
        }
    }
    function change(){
        let ID=Math.floor(Math.random()*k);
        name=document.getElementById(ID+'').innerHTML;
        for(let i=0;i<k;i++){
            if(ID!=i){
                document.getElementById(i+'').style.cssText="background:#FFFAF0";
            }
            document.getElementById(ID+'').style.cssText="background:#f00";

        }
    }
    function begin(){
        document.getElementById("P2").style.cssText="background: #ffd30b"
        document.getElementById("P2").innerHTML="";
        if(F){
            f=setInterval(change,50);
            F=false;
        }
    }
    function end(){
        F=true;
        document.getElementById("P2").style.cssText="background: #ffd30b"
        document.getElementById("P2").innerHTML=name;
        clearInterval(f);
    }
    
</script>

</body>
</html>

醉在音乐里

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
HTML 随机点名 --个人写法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点名3.0</title> <style> button{ height: 40px; width: 80px; margin: 5px; backgr
复制链接

扫一扫