【JavaScript速成之路】JavaScript内置对象--Math和Date对象
创始人
2024-06-03 09:27:23
0

在这里插入图片描述

📃个人主页:「小杨」的csdn博客
🔥系列专栏:【JavaScript速成之路】

🐳希望大家多多支持🥰一起进步呀!


文章目录

  • 前言
    • 1,Math对象
      • 1.1,常用属性方法
        • 1.1.1,获取x的绝对值
        • 1.1.2,次幂平方根
        • 1.1.3,向上向下取整
        • 1.1.4,四舍五入
      • 1.2,生成指定范围的随机数
      • 1.3,Math使用案例
    • 2,Date对象
      • 2.1,日期对象
      • 2.2,常用get方法
      • 2.3,常用set方法
      • 2.4,日期对象案例
        • 2.4.1,获取时间戳
        • 2.4.2,统计代码执行时间
        • 2.4.3,案例:倒计时
  • 结语


前言

📜前言:小杨在上一篇带着大家一起学习了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的绝对值


示例结果:

image-20221016000457730


1.1.2,次幂平方根


示例结果:

image-20221016001950200


1.1.3,向上向下取整


示例结果:

image-20221016003622370


1.1.4,四舍五入


示例结果:

image-20221016003059255


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

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

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

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


示例结果:

image-20221016085404609

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

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


示例结果:

image-20221016085140975


1.3,Math使用案例

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



2,Date对象

2.1,日期对象

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

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

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

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

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

示例结果:

image-20221016094030325

知识点:

  • 在创建日期对象时,必须先用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方法的使用,示例如下:


示例结果:

image-20221016095633930


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方法的使用,示例如下:


示例结果:

image-20221016101812097

知识点:

  • 如果没有输入任何参数,则 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,获取时间戳


示例结果:

image-20221016102952256


2.4.2,统计代码执行时间


示例结果:

image-20221016103742205


2.4.3,案例:倒计时


示例结果:

image-20221016110028462


结语

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

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

在这里插入图片描述


相关内容

热门资讯

喜欢穿一身黑的男生性格(喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思(思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
网络用语zl是什么意思(zl是... 今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
华为下载未安装的文件去哪找(华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
怎么往应用助手里添加应用(应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
家里可以做假山养金鱼吗(假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
一帆风顺二龙腾飞三阳开泰祝福语... 本篇文章极速百科给大家谈谈一帆风顺二龙腾飞三阳开泰祝福语,以及一帆风顺二龙腾飞三阳开泰祝福语结婚对应...
美团联名卡审核成功待激活(美团... 今天百科达人给各位分享美团联名卡审核成功待激活的知识,其中也会对美团联名卡审核未通过进行解释,如果能...
四分五裂是什么生肖什么动物(四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...