内置对象Math

2. Math对象

2.1 概述

2.2 常用方法

2.3 案例

2.31 math对象最大值

<script>
        // Math数学对象 不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可
        console.log(Math.PI); // 一个属性 圆周率
        console.log(Math.max(1, 99, 3)); // 99
        console.log(Math.max(-1, -10)); // -1
        console.log(Math.max(1, 99, 'pink老师')); // NaN
        console.log(Math.max()); // -Infinity
</script>

2.32 封装一个数学对象

<script>
        // 利用对象封装自己的数学对象  里面有 PI 最大值和最小值
        var myMath = {
            PI: 3.141592653,
            max: function() {
                var max = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] > max) {
                        max = arguments[i];
                    }
                }
                return max;
            },
            min: function() {
                var min = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] < min) {
                        min = arguments[i];
                    }
                }
                return min;
            }
        }
        console.log(myMath.PI);
        console.log(myMath.max(1, 5, 9));
        console.log(myMath.min(1, 5, 9));
</script>

2.33 math基本方法

<script>
        // 1.绝对值方法
        console.log(Math.abs(1)); // 1
        console.log(Math.abs(-1)); // 1
        console.log(Math.abs('-1')); // 隐式转换 会把字符串型 -1 转换为数字型
        console.log(Math.abs('pink')); // NaN 

        // 2.三个取整方法
        // (1) Math.floor()   地板 向下取整  往最小了取值
        console.log(Math.floor(1.1)); // 1
        console.log(Math.floor(1.9)); // 1
        // (2) Math.ceil()   ceil 天花板 向上取整  往最大了取值
        console.log(Math.ceil(1.1)); // 2
        console.log(Math.ceil(1.9)); // 2
        // (3) Math.round()   四舍五入  其他数字都是四舍五入，但是 .5 特殊 它往大了取  
        console.log(Math.round(1.1)); // 1
        console.log(Math.round(1.5)); // 2
        console.log(Math.round(1.9)); // 2
        console.log(Math.round(-1.1)); // -1
        console.log(Math.round(-1.5)); // 这个结果是 -1
</script>

2.34 随机对象方法

<script>
        // 1.Math对象随机数方法   random() 返回一个随机的小数  0 =< x < 1
        // 2. 这个方法里面不跟参数
        // 3. 代码验证 
        console.log(Math.random());
        // 4. 我们想要得到两个数之间的随机整数 并且 包含这2个整数
        // Math.floor(Math.random() * (max - min + 1)) + min;
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        console.log(getRandom(1, 10));
        // 5. 随机点名  
        var arr = ['张三', '张三丰', '张三疯子', '李四', '李思思', 'pink老师'];
        // console.log(arr[0]);
        console.log(arr[getRandom(0, arr.length - 1)]);
</script>

2.35 随机猜数字游戏

<script>
        // 猜数字游戏
        // 1.随机生成一个1~10 的整数  我们需要用到 Math.random() 方法。
        // 2.需要一直猜到正确为止，所以需要一直循环。
        // 3.while 循环更简单
        // 4.核心算法：使用 if  else if 多分支语句来判断大于、小于、等于。
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        // var random = getRandom(1, 10);
        // while (true) { // 死循环
        //     var num = prompt('你来猜？ 输入1~10之间的一个数字');
        //     if (num > random) {
        //         alert('你猜大了');
        //     } else if (num < random) {
        //         alert('你猜小了');
        //     } else {
        //         alert('你好帅哦，猜对了');
        //         break; // 退出整个循环结束程序
        //     }

        // }
        // 要求用户猜 1~50之间的一个数字 但是只有 10次猜的机会
        alert('你来猜？ 输入1~10之间的一个数字(只有10次机会)')
        for (var i = 0; i < 10; i++) {
            var random = getRandom(1, 10)
            var num;
            if (i == 9) {
                num = prompt('最后一次，把握机会')
            } else {
                num = prompt('这是你猜的第 ' + (i + 1) + ' 次')
            }

            if (num > random) {
                alert('你猜大了,数字是 ' + random);
            } else if (num < random) {
                alert('你猜小了,数字是 ' + random);
            } else {
                alert('你好帅哦，猜对了,数字是 ' + random);
                break; // 退出整个循环结束程序
            }
        }
</script>

2.36 随机颜色

<script>
        // 题目描述：使用Math对象，制作一个16进制的随机颜色
        // ​题目提示：16进制包括 “ 0  1  2  3  4  5  6  7  8  9  A  B  C  D  E  F ”
        // 例： “#f23a4b” 
        function color() {
            var arrNum = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']
            // console.log(arrNum.toString());
            // console.log(arrNum.length); 

            // var newArr=arrNum.toString();
            var newArr = arrNum.join('');//数组转换字符串
            console.log(newArr);
            console.log(newArr.length);
            var str = '#'; //#号
            for (var i = 0; i < 6; i++) {
                var j = Math.floor(Math.random() * arrNum.length);
                str += newArr[j]
            }
            console.log(str);
        }
        color()


        function getColor() {

            var str = '#'; //#号

            var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8',
                '9', 'a', 'b', 'c', 'd', 'e', 'f']; // 0-e的数组

            for (var i = 0; i < 6; i++) { //    循环6次
                var num = parseInt(Math.random() * 16); //    随机这16位中的数字字母
                arr[num];
                str += arr[num]; //    把每一项添加给str
            }
            return str;
        }
        console.log(getColor());
</script>

2.37 随机颜色生成器

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 35vw;
            height: 35vw;
            background-color: #87ceeb;
        }

        .content{
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            display: flex;
        }
        span{
            width: 100px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            color: white;
            background-color: rgb(0, 0, 0);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="content">
            <button>更换颜色</button>
            <span>#87ceeb</span>
        </div>
    </div>
    <script>
        var btn=document.querySelector('button')
        var txt=document.querySelector('span')
        var box=document.querySelector('.box')
        function color() {
            var arrNum = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']
            var newArr = arrNum.join('');//数组转换字符串
            var str = '#'; //#号
            for (var i = 0; i < 6; i++) {
                var j = Math.floor(Math.random() * arrNum.length);
                str += newArr[j]
            }
            return str
        }
        btn.onclick=function() {
            box.style.backgroundColor=color()
            txt.innerHTML=color()
        }
    </script>
</body>

</html>