javascript实现随机点名

最新推荐文章于 2024-09-18 23:50:01 发布

tangy_q__

最新推荐文章于 2024-09-18 23:50:01 发布

阅读量735

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/tcugg/article/details/132379556

版权

展示

1.制作样式

使用html和css将自己想要的样式制作出来

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .wrap {
        width: 400px;
        height: 600px;
        border: 2px solid red;
        margin-left: 100px;
        margin-top: 50px;
    }

    .box {
        width: 100%;
        height: 200px;
        background: #aa57ff;
        text-align: center;
        align-items: center;
        display: flex;
        justify-content: space-around;
    }

    button {
        width: 140px;
        height: 60px;
        border-radius: 20px;
        font-size: 20px;
        color: #000000;
        font-weight: bold;
        background-color: #20a79b;
    }

    #name {
        width: 100%;
        height: 400px;
        background: #ff0000;
        text-align: center;
        line-height: 400px;
        font-size: 50px;
        font-weight: bold;
        color: #000000;
    }
</style>

<body>
    <div class="wrap">
        <div class="box">
            <button id="btn1">点击开启</button>
            <button id="btn2">点击停止</button>
        </div>
        <div id="name">幸运儿</div>
    </div>
</body>

</html>

我这个样式有点丑，大家根据自己进进行更改

2.编写一个方法随机生成一个数

function randomNum(a, b) {
            var min = Math.min(a, b)
            var max = Math.max(a, b)

            return Math.floor(Math.random() * (max - min + 1)) + min
        }

这里我输出100000个数看看生成的随机数是否公平

var obj = {}
        var arr = []
        // 统计出现的个数
        for (var i = 0; i < 100000; i++) {
            arr.push(randomNum(1,20))
        }
        arr.forEach(function (item) {
            if (obj[item]) {
                obj[item]++
            } else {
                obj[item] = 1
            }
        })
        console.log(obj)

可以看到输出的随机数是差不多多的，都在5000左右

3.获取元素

var btn1 = document.getElementById('btn1')
var btn2 = document.getElementById('btn2')
var nameBox = document.getElementById('name')

使用document.getElementById将html里设置了id的元素拿到

4.定义数组

var nameList = ['张三', '李四','怀玉','慧心','慧颖','慧雅','慧智','慧美','慧捷','慧丽','慧月','慧云','慧俊','慧秀','慧巧','慧英','慧艳','浩岚','馨兰','馨欣']

将你们班的同学的名单写入数组

5.绑定事件

        btn1.onclick = function () {
            //避免出现定时器累加的问题 在开启下一个之前 先清除上一个定时器
            clearInterval(timer)
            //绑定点击开始按钮
            timer = setInterval(function () {
                //这里生成的随机数是0到你们班的人数-1
                var num = randomNum(0, nameList.length - 1)
                //绑定内容
                nameBox.innerText = nameList[num]
            }, 100)//每0.1秒生成一个随机数

        }
        //绑定结束按钮
        btn2.onclick = function () {
        //清除定时器就是结束
            clearInterval(timer)
        }

这里需要绑定三处事件

第一，绑定开始按钮，点击开始按钮后随机生成一个数，将这个数当做数组的索引，从数组里去取值；

第二，绑定内容，将你从数组里面取出的值返回到内容区域进行显示

第三，绑定结束按钮，点击结束后，停止生成随机数，将最后一个随机数返回到数组，取出值后定格在内容区域。

6.完整代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .wrap {
        width: 400px;
        height: 600px;
        border: 2px solid red;
        margin-left: 100px;
        margin-top: 50px;
    }

    .box {
        width: 100%;
        height: 200px;
        background: #aa57ff;
        text-align: center;
        align-items: center;
        display: flex;
        justify-content: space-around;
    }

    button {
        width: 140px;
        height: 60px;
        border-radius: 20px;
        font-size: 20px;
        color: #000000;
        font-weight: bold;
        background-color: #20a79b;
    }

    #name {
        width: 100%;
        height: 400px;
        background: #ff0000;
        text-align: center;
        line-height: 400px;
        font-size: 50px;
        font-weight: bold;
        color: #000000;
    }
</style>

<body>
    <div class="wrap">
        <div class="box">
            <button id="btn1">点击开启</button>
            <button id="btn2">点击停止</button>
        </div>
        <div id="name">幸运儿</div>
    </div>
    <script>
        
        var nameList = ['张三', '李四','怀玉','慧心','慧颖','慧雅','慧智','慧美','慧捷','慧丽','慧月','慧云','慧俊','慧秀','慧巧','慧英','慧艳','浩岚','馨兰','馨欣']
        //随机点名
        var btn1 = document.getElementById('btn1')
        var btn2 = document.getElementById('btn2')
        var nameBox = document.getElementById('name')
        var timer = null

        btn1.onclick = function () {
            clearInterval(timer)
            timer = setInterval(function () {
                var num = randomNum(0, nameList.length - 1)
                nameBox.innerText = nameList[num]
            }, 100)

        }
        btn2.onclick = function () {
            clearInterval(timer)
        }

        function randomNum(a, b) {
            var min = Math.min(a, b)
            var max = Math.max(a, b)

            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        
    </script>
</body>

</html>

结果：