JavaScript中的random小案例

news2025/1/11 7:48:13

前言

Math对象是JavaScript的内置对象，而random是Math对象属性

Math.random（）函数返回一个浮点数，伪随机数在范围从0 到小于1，也就是说，从 0（包括 0）往上，但是不包括 1（排除 1），然后你可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。

一、每次打印都输出一个随机数

// 求随机数 
console.log(Math.random());//0-1之间小数
var arr = ['上官婉儿','萌芽','甄姬','虞姬','典韦'];
function Random(arr){
  var index = parseInt(Math.random() * arr.length);
  console.log(arr[index])
}
Random(arr);

代码运行结果如下：

二、生成随机圆

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
<script>

  for (var i = 0; i < 100; i++) {
    //创建元素
    var div = document.createElement("div")
    div.classList.add("div")

    //
    var widts = Math.random() * 50 + 30
    var tops = Math.random() * (innerHeight - widts)
    var lefts = Math.random() * (innerWidth - widts)
    console.log(tops);
    console.log(lefts);
    div.style.width = widts + "px"
    div.style.height = widts + "px"
    div.style.left = lefts + "px"
    div.style.top = tops + "px"
    //0-255
    function cl() {
      return col1 = Math.floor(Math.random() * 256)
    }
    var r = cl()
    var g = cl()
    var b = cl()
    div.style.backgroundColor = `rgb(${r},${g},${b})`

    document.body.append(div)
  }

</script>
<style>
  div {
    position: fixed;
    border-radius: 50%;
  }
</style>

代码运行结果如下：

三、随机点名案例（由案例一延伸）

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        h2 {
            text-align: center;
        }
 
        .box {
            margin: 100px auto;
            padding: 50px;
            width: 600px;
            background-color: rgb(156, 3, 3);
            background-image: url(./festival.jpg);
            background-position: center;
            background-size: cover;
            border: 5px solid gold;
            border-radius: 5px;
        }
 
        .content {
            display: flex;
            margin: 50px auto;
            width: 600px;
            font-size: 25px;
            text-align: center;
            line-height: 40px;
            color: goldenrod;
        }
        .content span {
            padding: 10px 0;
        }
        .qs {
            padding: 10px;
            width: 450px;
            height: 40px;
            background-color: #000;
            color: gold;
        }
        .btns {
            text-align: center;
        }
 
        .btns button {
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <h2>随机点名</h2>
        <div class="content">
            <span>名字是：</span>
            <div class="qs">幸运嘉宾</div>
        </div>
        <div class="btns">
            <button class="start">开始</button>
            <button class="end">结束</button>
        </div>
    </div>
    <script>
        // 数据数组
        const arr = ['马超', '黄忠', '赵云', '关羽', '张飞','曹操','孙权']
        // 业务1. 开始按钮模块
        // 定时器全局变量
        let timeId = 0
        // 随机号全局变量
        let random = 0
        // 1.1 获取姓名区域对象
        const uname = document.querySelector('.qs')
        // 1.2 获取开始按钮对象
        const start_btn = document.querySelector('.btns .start')
        // 1.3 添加点击事件
        start_btn.addEventListener('click', function () {
            // 开启定时器
            timeId = setInterval(function () {
                // 随机数
                random = Math.floor(Math.random() * arr.length)
                // console.log(arr[random]);
                uname.innerHTML = arr[random]
            }, 50)
            // 点击开始按钮，禁用开始按钮
            start_btn.disabled = true
            // 如果数组里面只有一个值、不需要抽取，直接禁用开始、结束按钮
            if (arr.length === 1) {
                // start_btn.disabled = true
                // end_btn.disabled = true
                start_btn.disabled = end_btn.disabled = true
            }
        })
        // 业务2. 结束按钮模块
        // 2.1 获取结束按钮对象
        const end_btn = document.querySelector('.btns .end')
        // 2.2 添加点击事件
        end_btn.addEventListener('click', function () {
            // 点击结束按钮，启用开始按钮
            start_btn.disabled = false
            // 关闭定时器
            clearInterval(timeId)
            console.log(arr[random]);
            // 结束，删除抽到的对应数组元素
            arr.splice(random, 1)
            console.log(arr);
        })
    </script>
</body>
 
</html>

代码运行结果如下：

开始界面：