js随机点名代码

最新推荐文章于 2024-09-14 18:52:56 发布

小菜菜love

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量343

点赞数 6

分类专栏： useful 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/xccevol/article/details/139606797

版权

useful 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

代码

<!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>随机点名</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        button {
            background-color: moccasin;
            margin: 40px;
            height: 50px;
            width: 150px;
            border: rgb(245, 165, 165) 1px solid;
            font-size: 18px;
            cursor: pointer;
        }

        .start {
            margin-left: 360px;
        }

        .calling {
            width: 1200px;
            margin: auto;
        }

        span {
            display: block;
            float: left;
            height: 40px;
            width: 100px;
            margin: 6px;
            padding: 10px;
            font-size: 18px;
            text-align: center;
            line-height: 40px;
            background-color: mistyrose;
        }
    </style>
</head>

<body>
    <div class="calling">
        <table>
            <button class="start">开始</button>
            <button class="end">结束</button>
        </table>
        <div id="names"></div>
    </div>
    <script>
        var call_1 = document.querySelector('.calling')
        var start = document.querySelector('.start')
        var end = document.querySelector('.end')
        var names = document.querySelector('#names')
				//替换为班级班级中的人
        var arrStudent = ['张三', '李四', '王五', '陈六', '张麻子', '汤师爷', '蔡徐坤', 
	        '张三丰', '张居正', '徐阶'
        ]
        for (var i = 0; i < arrStudent.length; i++) {
            var span1 = document.createElement('span')
            span1.innerHTML = arrStudent[i]
            names.appendChild(span1)
        }
        var span2 = document.querySelectorAll('span')
        var index_num = -1;
        start.addEventListener('click', show)

        function show() {
            //生成一个随机整数
            function getRandom(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
            var num = getRandom(0, arrStudent.length - 1)
            if (index_num !== -1) {
                span2[index_num].style.backgroundColor = 'mistyrose'
            }
            span2[num].style.backgroundColor = 'red'
            index_num = num
        }
        var timer;
        start.addEventListener('click', setInt)

        function setInt() {
            clearInt()
            timer = setInterval(show, 10)
        }
        document.onkeydown = function (e) {
            console.log(e.keyCode);
            if (e.keyCode == 69) {
                clearInt()
            } else if (e.keyCode == 83) {
                setInt()
            }
        }
        end.onclick = function () {
            clearInt()
        }

        function clearInt() {
            clearInterval(timer)
        }
    </script>
</body>

</html>

方法

Math.random() 是 JavaScript 中的一个内置函数，用于生成一个介于 0（包括 0）和 1（不包括 1）之间的随机浮点数。

//生成 1 和 10 之间的随机整数
var min = 1;
var max = 10;
var randomInt = Math.floor(Math.random() * (max - min + 1)) + min;

这里使用 Math.floor() 函数将随机浮点数向下取整，然后将结果与最小值和最大值进行计算，确保生成的随机数在指定的范围内。

function getRandomNumber(min, max) {
  // 使用 Math.floor() 函数将随机浮点数向下取整
  var randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
  return randomNumber;
}

var minNumber = 1;
var maxNumber = 10;
var randomResult = getRandomNumber(minNumber, maxNumber);

console.log(randomResult);