【JavaScript速成之路】JavaScript内置对象--Math和Date对象

最新推荐文章于 2024-06-28 16:20:01 发布

小杨MiManchi

最新推荐文章于 2024-06-28 16:20:01 发布

阅读量475

点赞数 15

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_64338546/article/details/129460350

版权

JavaScript 专栏收录该内容

14 篇文章 12 订阅

订阅专栏

在这里插入图片描述

📃个人主页：「小杨」的csdn博客
🔥系列专栏：【JavaScript速成之路】
🐳希望大家多多支持🥰一起进步呀！

前言

📜前言：小杨在上一篇带着大家一起学习了JavaScript中的对象，想必大家对JavaScript的对象已经有所了解了，那么今天我们将继续带着大家学习一下JavaScript的内置对象中的Math对象和Date对象这部分相关知识，希望大家收获多多！

1，Math对象

1.1，常用属性方法

方法	作用
PI	获取圆周率，结果：3.141592653589793
abs(x)	获取x的绝对值，可传入普通数值或是字符串表示的数值
max(value1,value2,…)	获取所有参数中的最大值
min(value1,value2,…)	获取所有参数中的最小值
pow(base,exponent)	获取基数(base)的指数(exponent)次幂，即base[^ exponent]
sqrt(x)	获取x的平方根
ceil(x)	获取大于或等于x的最小整数，即向上取整
floor(x)	获取小于或等于x的最大整数，即向下取整
round(x)	获取x的四舍五入后的整数值
random(x)	获取大于或等于0.0且小于1.0的随机值

1.1.1，获取x的绝对值

<script>  
    //获取绝对值
    console.log(Math.abs(121));    //获取绝对值，正数直接为正数,故输出121
    console.log(Math.abs(-121));   //获取绝对值，负数转换为正数,故输出121
    console.log(Math.abs('121'));  //获取绝对值，自动转换为数字,故输出121
    console.log(Math.abs('b'));    //获取绝对值，无法转换为数字,故输出NaN
</script>

示例结果：

1.1.2，次幂平方根

<script>  
    //次幂
    console.log(Math.pow(2,3));    //获取2的3次幂，故输出8
    console.log(Math.pow(2,-3));   //获取2的-3次幂，故输出0.125
    console.log(Math.pow(1.1,2));  //获取1.1的2次幂，故输出1.21
    //平方根
    console.log(Math.sqrt(4));     //获取正整数4的平方根，故输出2
    console.log(Math.sqrt(1.21));  //获取浮点数1.21的平方根，故输出1.1
    console.log(Math.sqrt(-4));    //获取负数-4的平方根，负数无平方根，故输出NaN
</script>

示例结果：

1.1.3，向上向下取整

<script>  
    //向上取整
    console.log(Math.ceil(1.2));
    console.log(Math.ceil(-1.8));
    //向下取整
    console.log(Math.floor(1.8));
    console.log(Math.floor(-1.2));
</script>

示例结果：

1.1.4，四舍五入

<script>  
    //四舍五入
    console.log(Math.round(1.2));  
    console.log(Math.round(1.5));
    console.log(Math.round(1.8));
    console.log(Math.round(-1.2));
    console.log(Math.round(-1.5));    //取较大值-1
    console.log(Math.round(-1.8));   
</script>

示例结果：

1.2，生成指定范围的随机数

Math.random()用来获取随机值，每次调用返回的结果都不相同，该方法返回的结果是一个浮点数，其范围是0~1（不包括1）。

由于Math.random()返回的这个随机数不太常用，我们可借助数学公式来转换成任意范围内的随机数。

例如：公式Math.random()*(max-min)+min，表示生成的随机数处于[min,max)的范围，且为浮点数。

<script>
    function  getRandom(min,max){
        return Math.random()*(max-min) + min;
    }
    console.log(getRandom(1,10));  //返回值的范围为[1,10)，浮点数
    console.log(getRandom(0,10));  //返回值的范围为[0,10)，浮点数
</script>

示例结果：

如若需要获取整数结果时，可以使用Math.floor()来实现。

例如：公式公式Math.floor(Math.random()*(max-min+ 1)+min)，表示生成的随机数处于[min,max]的范围，且为整数。

<script>
    function  getRandom(min,max){
        return Math.floor(Math.random()*(max-min+1) + min);
    }
    console.log(getRandom(1,10));  //返回值的范围为[1,11)，整数
    console.log(getRandom(0,10));  //返回值的范围为[0,11)，整数
</script>

示例结果：

1.3，Math使用案例

经典Math使用示例：猜数字游戏

<script>
    //定义生成指定范围的随机整数的函数,指定范围：[min，max]
    function getRandom(min,max){
        return Math.floor(Math.random()*(max-min+1)+min);
    }
    //生成一个指定范围的随机整数，整数范围：[1,10]
    var random = getRandom(1,10);
    //规定猜数字游戏的最大机会数
    var count = 3;
    //猜数字游戏的游戏规划
    while(count){
        var num = prompt();
        count --;
        if(num > random){
            if(count != 0){
                alert('你所猜的数猜大了！还剩机会数为' + count);
            }else{
                alert('你所猜的数猜大了！还剩机会数为' + count + ',很遗憾你游戏失败！');
            }
            
        }else if(num < random){
            if(count != 0){
                alert('你所猜的数猜小了！还剩机会数为' + count);
            }else{
                alert('你所猜的数猜小了！还剩机会数为' + count + ',很遗憾你游戏失败！');
            }
        }else{
            alert('恭喜你猜对了！');
            break;
        }
    }
</script>

2，Date对象

2.1，日期对象

JavaScript中的日期对象用来处理日期和时间。例如：秒杀活动中日期的实时展示效果，在线日历等。

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

在创建日期对象时，可以为Date()构造函数传入一些参数，来表示具体的日期。

日期对象的创建方式可简单地划分为3种，

无参数，使用当前系统的当前时间作为对象保存的时间
传入年，月（范围为0~11，即真实月份数-1），日，时，分，秒等参数
用字符串表示日期和时间

<script>
    //法1：无参数，使用当前系统的当前时间作为对象保存的时间
    var date1 = new Date();
    console.log(date1);
    //法2：传入年，月（范围为0~11，即真实月份数-1），日，时，分，秒等参数
    var date2 = new Date(2022,10,15,10,15,10);
    console.log(date2);
    //法3：用字符串表示日期和时间
    var date3 = new Date('2022-10-15 10:15:10');
    console.log(date3);
</script>

示例结果：

知识点：

在创建日期对象时，必须先用new创建Date对象，否则会报错。
如果传入参数数据超过参数的范围，系统会自动转化，不会报错。
如果用字符串表示日期和时间，注意该字符串是否合法，若不合法，系统会报错（Invalid Date）。

2.2，常用get方法

方法	作用
getFullYear()	获取表示年份的4位数字，如2022
getMonth()	获取月份，范围为0~11（0表示1月，1表示2月，依次类推）
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对象所代表时间的毫秒数

为了更好地理解上述get方法的使用，示例如下：

<script>
    var date = new Date();                 //通过new基于当前日期创建对象date
    console.log(date);                     //获取当前日期
    console.log(date.getFullYear());       //获取月
    console.log(date.getMonth());          //获取月
    console.log(date.getDate());           //获取日
    console.log(date.getHours());          //获取小时数
    console.log(date.getMinutes());        //获取分钟数
    console.log(date.getSeconds());        //获取秒数
    console.log(date.getMilliseconds());   //获取毫秒数
    console.log(date.getTime());           //获取从1970-01-01 00:00:00距离Date对象所代表时间的毫秒数
</script>

示例结果：

2.3，常用set方法

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

为了更好地理解上述set方法的使用，示例如下：

<script>
    var date = new Date();                //通过new基于当前日期创建对象date
    date.setFullYear(2022);               //设置月
    date.setMonth(10);                    //设置月
    date.setDate(15);                     //设置日
    date.setHours(10);                    //设置小时数
    date.setMinutes(15);                  //设置分钟数
    date.setSeconds(10);                  //设置秒数
    console.log(date);                    //获取当前创建的时间
</script>

示例结果：

知识点：

如果没有输入任何参数，则 Date 的构造器会依据系统设置的当前时间来创建一个 Date 对象。
如果提供了至少两个参数，其余的参数均会默认设置为 1（如果没有指定 day 参数）或者 0（如果没有指定 day 以外的参数）。
JavaScript 的时间由世界标准时间（UTC）1970 年 1 月 1 日开始，用毫秒计时，一天由 86,400,000 毫秒组成。Date 对象的范围是 -100,000,000 天至 100,000,000 天（等效的毫秒值）。
以一个函数的形式来调用 Date 对象（即不使用 new 操作符）会返回一个代表当前日期和时间的字符串。
Date 对象为跨平台提供了统一的行为。时间属性可以在不同的系统中表示相同的时刻，而如果使用了本地时间对象，则反映当地的时间。

2.4，日期对象案例

2.4.1，获取时间戳

<script>
    //获取时间戳法1：通过日期对象的valueOf()和getTime()方法
    var date1 = new Date();
    console.log(date1.getTime());
    console.log(date1.valueOf());

    //获取时间戳法2：通过使用+运算符转换为数值型
    var date2 = new Date();
    console.log(+date2);

    //获取时间戳法3：通过使用html5新增的Date.now()方法
    var date3 = new Date();
    console.log(Date.now());
</script>

示例结果：

2.4.2，统计代码执行时间

<script>
    var timestamp1 = +new Date();
    for(var i = 0, str = ''; i < 1000 ; i++){
        str += i;
    }
    var timestamp2 = +new Date();
    console.log('代码执行时间为' + (timestamp2 - timestamp1));
</script>

示例结果：

2.4.3，案例：倒计时

<script>
    function countDown(time){
        var nowTime = +new Date();                  //获取当前时间的时间戳
        var inputTime = +new Date(time);            //获取未来时间的时间戳
        var times = (inputTime - nowTime) / 1000;   //获取两个时间的时间戳差值
        var d = parseInt(times / 60 / 60 / 24);     //获取天数
        d = d < 10 ? '0'+ d : d;
        var h = parseInt(times / 60 / 60 % 24);     //获取小时数
        h = h < 10 ? '0'+ h : h;
        var m = parseInt(times / 60 % 60);          //获取分钟数
        m = m < 10 ? '0'+ m : m;
        var s = parseInt(times % 60);               //获取秒数
        s = s < 10 ? '0'+ s : s;
        return '距四级英语考试还有' + d + '天'+ h + '小时' + m + '分' + s + '秒';
    }
		console.log(countDown('2022-12-10 9:00:00'));
</script>

示例结果：

结语

这就是本期博客的全部内容啦，想必大家已经对内置Math对象和内置Date对象详解的相关内容有了全新地认识和理解吧，如果有什么其他的问题无法自己解决，可以在评论区留言哦！

最后，如果你觉得这篇文章写的还不错的话或者有所收获的话，麻烦小伙伴们动动你们的小手，给个三连呗（点赞👍，评论✍，收藏📖），多多支持一下！各位的支持是我最大的动力，后期不断更新优质的内容来帮助大家，一起进步。那我们下期见！

在这里插入图片描述

小杨MiManchi

关注

15
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
11
评论
【JavaScript速成之路】JavaScript内置对象--Math和Date对象

JavaScript速成之路10：带你了解JavaScript中的Math内置对象和Date内置对象，主要向大家介绍JavaScript中的Math内置对象和Date内置对象的相关内容，也就是内置对象中常用的属性和方法以及一些相关案例。
复制链接

扫一扫