【JavaScript编程实操11】1.编写一个函数,获得一个十六进制的随机颜色的字符串方法 2.利用数学函数实现一个数组的最大值和最小值 3.利用数学函数实现一个数组的最大值和最小值-CSDN博客

本次主要是针对Javascript阶段的Math与Date的实操练习，共有3个实操，分别是：1.编写一个函数,获得一个十六进制的随机颜色的字符串方法；2.利用数学函数实现一个数组的最大值和最小值； 3.利用数学函数实现一个数组的最大值和最小值。大家可以在实操的过程中更加深入地理解JavaScript中Math与Date的知识。

1.编写一个函数,获得一个十六进制的随机颜色的字符串方法

代码：

<!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>
    <button onclick="getColor()">点击一下，随机出现颜色</button>
    <p id="colorText"></p>
    <script>
        //编写一个函数
        //十六进制：#000000 #FFFFFF: #0123456789abcdef
        //十六进制的颜色之组成位数:6位
        //1.首先定义了一个包含十六进制数字的字符串，并创建了一个以"#"开头的color变量。
        function getColor() {
            var str = "0123456789abcdef";
            var color = "#";
            //2.通过循环生成6次随机的0到15之间的整数
            for (var i = 0; i < 6; i++) {
                var num = Math.floor(Math.random() * str.length);
                //3.将对应位置的十六进制数字添加到color变量中，最终返回生成的随机颜色代码。
                color = color + str[num];
            }
            //4.生成的随机颜色字符串赋值给 colorText 元素的文本内容，以便在页面上显示这个随机颜色。
            document.getElementById('colorText').textContent = color;
        }
    </script>
</body>

</html>

实现效果：

2.利用数学函数实现一个数组的最大值和最小值

代码：

<!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>
        //预定义一些名字，用于后面进行随机
        const name=["保罗","九零","编程","微风啊","身份是","双丰收","微软","百姓"];
        //定义函数来生成随机名字
        function RandomName() {
            //使用 Math.random() 方法生成一个0到1之间的随机数，
            //将其乘以名字列表的长度（name.length）来获取一个随机的数组索引
            const randomIndex=Math.floor(Math.random()*name.length);
            //最后返回该索引对应的名字
            return name[randomIndex];
        }
        //测试随机数组
        console.log(RandomName());
    </script>
</body>
</html>

实现效果：

3.利用数学函数实现一个数组的最大值和最小值

代码：

<!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>
        //定义一个数字数组
        const numbers=[2,3,4,5,24,67,23,6,8,1];
        //使用Math中max的max方法找数组的最大值
        const max=Math.max(...numbers);
        //使用Math中的min方法找数组的最小值
        const min=Math.min(...numbers);
        
        //输出最大值和最小值
        console.log("数组中的最大值是："+max);
        console.log("数组中的最小值是："+min);
    </script>
</body>
</html>