javascript 随机点名器

最新推荐文章于 2022-12-04 19:47:54 发布

单名一个川

最新推荐文章于 2022-12-04 19:47:54 发布

阅读量358

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/weixin_49982777/article/details/108394944

版权

随机点名器

***为了更好的理解解释代码中的注释写在代码后部此处为了方便并没有遵守规范，只是为了更好的理解。

style样式

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var chooseName = ["赵一","钱二","孙三","李四","周五","郑六","王七","冯八","程九","楚十","魏零"];
    </script>
    <style>
        div.d1{
            z-index: -1;//将div.d1置于最底层
            position: absolute;//定位属性：absolute为绝对定位
            background-color: coral;//设置背景颜色
            width: 400px;//宽度400px
            height: 300px;//高度300px
            border-radius: 10px;//圆角设置
        }
        div.d2{
            position:relative;//定位属性：relative为相对定位
            top:100px;//距离上部边界距离
            left: 125px;//距离左部边界距离
            width: 150px;
            height: 50px;
            background-color: #ddd;
            text-align: center;//文字居中
            line-height: 50px;//行高
            border-radius: 10px;
        }
        div.d3{
            z-index: 99999;
            position:relative;
            margin-top: 200px;
            width: 50px;
            height: 20px;
            background-color: green;
            border-radius: 5px;
        }
    </style>
    <H1 id="hid">随机点名器</H1>
</head>

body排列内容

<body>
    <div class="d1"></div> //最大的背景块
    <div id="d2" class="d2" style="vertical-align: middle;">随机点名器</div>//随机点名的块
    <div id="d3">
        <input type="button" value="开始" id="btn" style="margin-left: 175px;margin-top: 200px;">
    </div>//开始按钮
</body>

java script 代码

<script>
    var btn = document.getElementById("btn");//将 id：btn 赋值给btn
    btn.onclick = function(){//btn即开始按钮的点击事件函数
        if(this.value == "开始"){//此处的this为btn  当btn.value值为“开始时”则开始下列函数run（）
            function run(){
                btn.style.backgroundColor = "red";//改变背景颜色
                //开始随机变换名字
                m = 0;
                m = Math.floor(Math.random()*chooseName.length);//随机数字
                document.getElementById("d2").innerHTML= chooseName[m];//显示chooseName数组中m下标的名字
                }
                this.value = "停止"//将btn.value的值改为停止
                timer = setInterval(run,2);//定义定时器的作用域
            }else{
                clearInterval(timer);//停止计时
                this.value = "开始";//将btn.value值重新改为开始
                this.style.backgroundColor = "green";//更改背景颜色
        }
    }

以上就是我经过学习和请教后写出的代码。如有重复，纯属水平有限[捂脸]。
本人只是java学习中的小学生，有更好的想法请说明并解释，不然我怕我看不懂[捂脸]。