随机函数Math.random()案例

2024-07-22 04:12:02
开发
16

1. 随机点名案例

1.1 需求

请把['赵云','黄忠','关羽','张飞','马超','刘备','曹操']随机显示一个名字到页面中

1.2 分析

①：利用随机函数随机生成一个数字作为索引

②：数组[随机数]生成到页面中

1.3 展示

1.4 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名案例</title>
</head>
<body>
    <script>
        let persons = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
        let random = Math.floor(Math.random()*persons.length)
        document.write(`${persons[random]}同学请回答问题。`)
    </script>
</body>
</html>

2. 随机点名案例改进

2.1 需求

请把['赵云','黄忠','关羽','张飞','马超','刘备','曹操']随机显示一个名字到页面中，但是不允许重复显示

2.2 分析

①：利用随机函数随机生成一个数字作为索引

②：数组[随机数]生成到页面中

③：数组中删除刚才抽到的索引号

2.3 展示

2.4 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名案例改进</title>
</head>
<body>
    <script>
        let persons = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
        // 1. 得到一个随机数，作为数组的索引号，这个随机数 0-6
        let random = Math.floor(Math.random()*persons.length)
        // 2. 页面输出数组里面的元素
        document.write(`${persons[random]}同学请回答问题。`)
        // 3. splice(起始位置（下标），删除几个元素)
        persons.splice(random,1)
        console.log(persons)

    </script>
</body>
</html>

3. 猜数字游戏

3.1 需求

程序随机生成1~10之间的一个数字，用户输入一个数字

①：如果大于该数字，就提示，数字猜大了，继续猜

②：如果小于该数字，就提示，数字猜小了，继续猜

③：如果猜对了，就提示猜对了，程序结束

3.2 分析

①：利用随机数生成一个数字

②：需要一直猜，所以需要不断的循环

③：因为条件是结果猜对了，就是判断条件退出，用while循环合适

④：内部判断可以用多分支语句

3.3 展示

3.4 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
</head>
<body>
    <script>
        // 1. 随机生成一个数字1-10
        // 取到M-N的随机整数
        function getRandom(M, N){
           return Math.floor(Math.random()*(N-M+1))+M
        }
        
        let random = getRandom(1, 10)
        console.log(random)
        // 不断的循环
        while(true){
            // 2. 用户输入一个值
            let num = +prompt('请输入你猜的数字：')
            // 3. 判断输出
            if(num > random){
                alert('您猜大了')
            }else if(num < random){
                alert('您猜小了')
            }else{
                alert('猜对了，您真厉害！')
                break
            }
        }
        document.write(random)
    </script>
</body>
</html>

4. 猜数字游戏设定次数

4.1 需求

程序随机生成1~10之间的一个数字，用户输入一个数字，只有三次机会

①：如果大于该数字，就提示，数字猜大了，继续猜

②：如果小于该数字，就提示，数字猜小了，继续猜

③：如果猜对了，就提示猜对了，程序结束

④：用户最多只能猜三次

4.2 分析

①：利用随机数生成一个数字

②：只能猜三次，所以用for循环合适

③：因为条件是结果猜对了或者次数用完了，就判断条件退出

④：内部判断可以用多分支语句

4.3 展示

4.4 代码

<!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>
    <script>
        // 1. 随机生成一个数字1-10
        // 取到M-N的随机整数
        function getRandom(M, N){
           return Math.floor(Math.random()*(N-M+1))+M
        }
        
        let random = getRandom(1, 10)
        console.log(random)
        let flag = true
        // 不断的循环
        for(let i = 1; i<=3; i++){
            // 2. 用户输入一个值
            let num = +prompt('请输入你猜的数字：')
            // 3. 判断输出
            if(num > random){
                alert('您猜大了，继续')
            }else if(num < random){
                alert('您猜小了，继续')
            }else{
                flag = false
                alert('猜对了，您真厉害！')
                break
            }
        }
        if(flag){
            alert('次数用完了')
        }
        document.write(random)
    </script>
</body>
</html>

5. 随机颜色案例

5.1 需求

该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。

5.2 分析

提示： 16进制颜色格式为: ‘#ffffff’ 其中f可以是任意 0-f之间的字符,需要用到数组， let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
提示: rgb颜色格式为: ‘rgb(255,255,255) ’ 其中255可以是任意0-255之间的数字

步骤： ①：如果参数为true或者无参数，则处理16进制颜色，核心思想是循环6次，生成随机的6个数字（取值范围0~15），根据这个数字去找数组的值，然后和 # 拼接起来，并且返回值。 ②：如果参数为false，随机生成一个0~255的数给三个变量，分别作为 r g b 三个颜色，之后拼接字符串rgb(255,255,255)格式

5.3展示

5.4 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机颜色案例</title>
</head>
<body>
    <script>
        // 自定义一个随机颜色函数
        function getRandomColor(flag = true){
            if(flag){
                // 如果是true，则返回#ffffff
                let str='#'
                let arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
                // 利用for循环随机抽取6次，累加到str里面
                for(let i = 1; i <= 6; i++){
                    let random = Math.floor(Math.random()*arr.length)
                    str += arr[random]
                }
                return str
            }else{
                // 否则是false 则返回rgb(255,255,255)
                let r = Math.floor(Math.random()*256)
                let g = Math.floor(Math.random()*256)
                let b = Math.floor(Math.random()*256)
                return  `rgb(${r},${g},${b})`
            }
        }

        // 调用函数 getRandomColor()
        console.log(getRandomColor(false))
        console.log(getRandomColor(true))
        console.log(getRandomColor())
    </script>
</body>
</html>

原文地址:https://blog.csdn.net/m0_58258716/article/details/140516522 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1815117552523808768.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部