JS 自制点名器以及随机数简谈-CSDN博客

前几天一个简单的原因促使我写了一个简单的点名器，过程中的一些想法希望可以和大家分享一下。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #wrap{
            width: 500px;
            background-color: antiquewhite;
            /*border-radius: 20px;*/
            display: flex;
            flex-wrap: wrap;
        }
        .num{
            width: 100px;
            height: 40px;
            border: 1px #d3d3d3 solid;
            box-sizing: border-box;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            color: cyan;
            font-weight: bold;
        }
        .btn_wrap{
            width: 500px;
            display: flex;
            justify-content: space-around;
        }
        .btn{
            width: 80px;
            height: 40px;
            background-color: chartreuse;
            border-radius: 10px;
            cursor: pointer;
            text-align: center;
            line-height: 40px;
            margin-top: 30px;
        }
        .btn_start:active{
            border: 1px cornflowerblue solid;
        }
        .choose_num{
            background-color: brown;
        }
    </style>
</head>
<body>
<div id="wrap">

</div>
<div class="btn_wrap">
    <div class="btn btn_start">开始</div>
    <div class="btn btn_end">结束</div>
</div>

</body>
<script>
    let wrap = document.getElementById('wrap')
    let num = 30 //点名人数
    let r = null
    let min_time = 200 //点名的时间间隔
    let min_num = 1 //最小数
    let max_num = 30 //最大数
    //这里动态生成点名的主体html结构
    for(let i =1;i<=num;i++){
        let nodeNum = document.createElement('div')
        nodeNum.classList.add('num',i)
        nodeNum.innerText = i
        wrap.appendChild(nodeNum)
    }
    //点名开始
    let btn_start = document.getElementsByClassName('btn_start')[0]
    btn_start.addEventListener('click',function (event) {
        r = setInterval(()=>{
            let choose_node = document.getElementsByClassName('choose_num')[0]
            if(choose_node){
                choose_node.classList.remove('choose_num')
            }
            let random = getRandom(max_num,min_num)
            console.log(random)
            let aa = document.getElementsByClassName(random)[0]
            aa.classList.add('choose_num')
        },min_time)
    })
    //点名结束
    let btn_end =  document.getElementsByClassName('btn_end')[0]
    btn_end.onclick=function (event) {
        clearInterval(r)
    }
    function getRandom(Max,Min) {
         let Range = Max - Min;
         let Rand = Math.random();
         let random = Min + Math.round(Rand * Range); //四舍五入
        return random
    }
</script>
</html>
复制代码

很多都在注释里写了，这里就不在赘述了，下面是过程中的一些随想是收获。

随机数

在点名器中最重要的就是一个Math.random()函数了，但是在写的过程中我在想这是惟一的获取随机数的方法吗？这样获取的随机数是真的安全的随机数吗？疑问无疑是进步的开始，在随后的查找中果然找到了一种新的随机数的生成方式：window.crypto.getRandomValues(），下面总结了一下两种随机数的使用。

1.Math.random()

//下舍入
    function floor(min,max) {
      let range = Math.random()*(max-min)
      let value = Math.floor(range)+min
      return value
    }
    //上舍入
    function ceil(min,max) {
        let range = Math.random()*(max-min)
        let value = Math.ceil(range)+min
        return value
    }
    //四舍五入
    function round(min,max) {
        let range = Math.random()*(max-min)
        let value = Math.floor(range)+min
        return value
    }
    //三种方式的集合，参数fn='round' || 'ceil' || 'floor'
    function random(max,min=0,fn='round') {
        let range = Math.random()*(max-min)
        let value = Math[fn](range)+min
        return value
    }
复制代码

2.window.crypto.getRandomValues()

window.crypto.getRandomValues(typeArray) 方法让你可以获取符合密码学要求的安全的随机值。传入参数的数组被随机值填充（在加密意义上的随机)。
typeArray是类型化数组，相当于是内存的视图，使用Int8Array、Uint8Array、 Int16Array、 Uint16Array、 Int32Array 或者Uint32Array 构造函数创建。

getRandomValues()在生成多个随机数数组时该方法尤为方便。

eg:生成一个8位的随机数数组:

window.crypto.getRandomValues(new Uint16Array(new ArrayBuffer(8)))或者window.crypto.getRandomValues(new Uint16Array(8))
复制代码

当然要生成一个区间的随机数也是可以的：

function getRandom(Max,Min) {
        do{
            var random = window.crypto.getRandomValues(new Uint8Array(1))[0]
        }while (random>Max || random<=Min)
        return random
    }
复制代码

更多关于typeArray和ArrayBuffer可以查看MDN介绍。