JavaScript中Math与日期对象使用方法及案例_js技术math对象案例

作者：知新_RL | 2024-05-07 17:29:39

踩

js技术math对象案例

1.Math的使用

Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。

Math 用于 Number 类型。它不支持 BigInt。

1.1.Math的属性

成员	功能
PI	获取圆周率，结果为 3.141592653589793
abs(x)	获取 x 的绝对值，可传入普通数值或是用字符串表示的数值
max()	获取所有参数中的最大值
min()	获取所有参数中的最小值
pow(base, exponent)	获取基数（ base ）的指数（exponent）次幂，即 baseexponent
sqrt(x)	获取 x 的平方根
ceil(x)	获取大于或等于 x 的最小整数，即向上取整 ( 舍弃小数部分，整数部分加 1)
flfloor(x)	获取小于或等于 x 的最大整数，即向下取整 ( 舍弃小数部分，整数部分不变)
round(x)	获取 x 的四舍五入后的整数值
random()	获取大于或等于 0.0 且小于 1.0 的随机

1.2.Math的示例代码


<body>
    <script>
        // 获取圆周率
        Math.PI;
        // 获取绝对值
        Math.abs(-1);
        Math.abs('-11')
        // 获取最大值
        Math.max(1, 2, 3, 4, 5);
        // 获取最小值
        Math.min(1, 2, 3, 4, 5);
        // 获取基数（base）的指数（exponent）次幂
        Math.pow(2, 4);// 获取2的4次幂
        // 获取x的平方根
        Math.sqrt(9);
        // 向上取整
        Math.floor(1.9);
        // 向下取整
        Math.ceil(1.9);
        // 四舍五入
        Math.round(1.5);
        // 四舍五入
        Math.round(-1.5);
    </script>

示例代码.生成指定范围的随机数

Math.random() 用来获取随机数，每次调用该方法返回的结果都不同。

该方法返回的结果是一个很长的浮点数，其范围是 0~1 （不包括 1 ）。


<body>
    <script>
        // 生成0-1之间的随机数
        // [0,1)
        var res = Math.random()
        console.log(res);
        // 生成大于或等于min且小于max的随机值
        // [1-10)
        var res1 = Math.random() * (10 - 1) + 1;
        console.log(res1);
        // 生成0到任意数之间的随机整数
        // [0,10]
        var res2 = Math.floor(Math.random() * (10 + 1));
        console.log(res2);
        // 生成1到任意数之间的随机整数
        // [1,10]
        var res3 = Math.floor(Math.random() * 10 + 1);
        console.log(res3);
    </script>
</body>

案例一求10-20（包含10和20）之间的随机整数


<body>
    <script>
        // 分析公式
        // 1. Math.random() [0, 1) 0 <= x < 1
        // 2. Math.random() * (max - min + 1) 公式 注意先计算乘数
        // 3. 带入数据
        // 4. Math.random() * (20 - 10 + 1)
        // 5. Math.random() * (11)
        // 6. [0, 1) * 11 ==> [0, 11)
        // 7. [0, 11) + min ==> [0, 11) + 10 ==> [10, 21)
        // 8. Math.floor([10, 21)); ==> [10, 20](20.后面的所有小数取整都为20)
        // Math.floor(Math.random() * (max - min + 1) + min)
        function getRandom(min, max) {
        // Math.random()获取[0,1)
        // Math.random() * (max - min + 1)+min表示获取[10,21)
        // Math.floor([10,21))向下取整 [10,20]
        return Math.floor(Math.random() * (max - min + 1) + min);
        }
        console.log(getRandom(10, 20))
    </script>
</body>

案例 2 ：利用随机数，实现在数组中随机获取一个元素


<body>
    <script>
        function getRandom(min, max) {
        // Math.floor向下取整
        return Math.floor(Math.random() * (max - min + 1) + min);
        }
        console.log(getRandom(10, 20))
        var arr = ['apple', 'banana', 'orange', 'pear']
        // 通过getRandom函数获取随机数
        console.log(arr[getRandom(0, arr.length - 1)])
    </script>
</body>

案例 3 ：要求：随机生成颜色RGB （ 0-255 ， 0-255 ， 0-255 ）


<body>
    <script>
        function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
        }
        function getRGB(min, max) {
        var c1 = getRandom(min, max);
        var c2 = getRandom(min, max);
        var c3 = getRandom(min, max);
        return 'rgb(' + c1 + ', ' + c2 + ', ' + c3 + ')';
        }
        console.log(getRGB(0, 255));
    </script>
</body>

2.日期对象的使用

用途：

JavaScript中的日期对象用来处理日期和时间。

注意：

JavaScript中的日期对象需要使用new Date()实例化对象才能使用，Date()是日期对象的构造函数

（和Math是有区别的）。

2.1 日期对象的常用get方法(日期格式化)

方法	作用
getFullYear()	获取表示年份的 4 位数字，如 2020
getMonth()	获取月份，范围 0~11 （0表示一月， 1 表示二月，依次类推）
getDate()	获取月份中的某一天，范围 1~31
getDay()	获取星期，范围 0~6 （0表示星期日， 1 表示星期一，依次推）
getHours()	获取小时数，返回 0~23
getMinutes()	获取分钟数，范围 0~59
getSeconds()	获取秒数，范围 0~59
getMilliseconds()	获取毫秒数，范围 0~999
getTime()	获取从 1970-01-01 00:00:00 距离 Date 对象所代表时间的毫秒数

2.2 日期对象的常用set方法

方法	作用
setFullYear(value)	设置年份
setMonth(value)	设置月份
setDate(value)	设置月份中的某一天
setHours(value)	设置小时数
setMinutes(value)	设置分钟数
setSeconds(value)	设置秒数
setMilliseconds(value)	设置毫秒数
setTime(value)	通过从 1970-01-01 00:00:00 计时的毫秒数来设置时间

案例：统计代码执行时间


<body>
    <script>
         // 方式1：通过日期对象的valueof()或getTime()方法
        var date1 = new Date();
        // valueOf用于获取对象的原始值
        console.log(date1.valueOf()); // 示例结果：1571196996188
        console.log(date1.getTime()); // 示例结果：1571196996188
        // 方式2：使用“+”运算符转换为数值型
        var date2 = + new Date();
        console.log(date2); // 示例结果：1571196996190
        // 方式3：使用HTML5新增的Date.now()方法
        console.log(Date.now()); // 示例结果：1571196996190
    </script>
</body>

案例：倒计时

写一个函数，格式化日期对象，HH:mm:ss 的形式比如 00:10:45


<body>
    <script>
        function getTimer() {
        // 获取当前时间
        var date = new Date();
        // var str = date.getHours() + ':' + date.getMinutes() + ':' +
        date.getSeconds();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getMinutes();
        // 使用三元表达式格式化日期
        h = h < 10 ? '0' + h : h
        m = m < 10 ? '0' + m : m
        s = s < 10 ? '0' + s : s
        return h + ':' + m + ':' + s;
        }
        console.log(getTimer());
    </script>

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/550387

JavaScript中Math与日期对象使用方法及案例_js技术math对象案例

1.Math的使用

1.1.Math的属性

2.日期对象的使用

2.1 日期对象的常用get方法(日期格式化)

2.2 日期对象的常用set方法