JavaScript的Math对象和Date对象

已于 2024-04-21 11:40:22 修改
阅读量2.2k 收藏 52
点赞数 74
文章标签： javascript 开发语言 ecmascript
于 2024-04-20 23:19:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyjioo/article/details/138010710
版权

Math对象

1.概念:
        Math对象用于执行数学任务。
2.属性:

        1. E表示算数常量e

        2.LNn表示以e为底n的对数

        3.LOGnE表示以n为底E的对数

        4.PI圆周率Π

        5.SQRTn获得n的平方根

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			document.write(Math.E,"<br/>");//算数常量e
			document.writeln(Math.PI,"<br/>");//圆周率Π
			document.writeln(Math.LN2,"<br/>");//以e为底2的对数
			document.writeln(Math.LN10,"<br/>");//以e为底10的对数
			document.writeln(Math.LN3,"<br/>");//像是LN2/LN10除外的以e为底的对数都是没有被定义的,会返回undefined
			document.writeln(Math.LOG2E,"<br/>");//返回以2为底e的对数
			document.writeln(Math.LOG10E,"<br/>");//返回以10为底e的对数
			document.writeln(Math.SQRT1_2,"<br/>");//2平方根的倒数
			document.writeln(Math.SQRT2,"<br/>");///1/2的平方根
		}
	</script>
</body>
</html>

        注意,像是LN3这种没有被定义的属性都是获取不到的,会返回undefined

结果如左所示

3.Math方法:

        1.sin(x)获得正弦值

        2.cos(x)获得余弦值

        3.tan(x)获得正切值

        4.acos(x)获得反余弦值

        5.asin(x)获得反正弦值

        6.atan(x)获得反正切值（介于-Π/2到Π/2）

        7.atan2(y,x)获取(x,y)与x轴正方向的夹角,取值范围为[-π， π]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			document.write(Math.sin(Math.PI/2),"<br/>");
			document.write(Math.cos(Math.PI/2),"<br/>");
			document.write(Math.tan(Math.PI/2),"<br/>");
			document.write(Math.asin(1),"<br/>");
			document.write(Math.acos(1),"<br/>");
			document.write(Math.atan(1),"<br/>");
			document.write(Math.tan(Math.atan2(-1,-1)),"<br/>");
		}
	</script>
</body>
</html>

结果如左所示

 如上述代码,

sin(x)举例中选取了Π/2,可知为1,与浏览器中显示的一致

cos(x)举例的Π/2虽然算出来应该是0,由于计算机浮点数精度问题会略微偏离0,结果的6.123233995736766e-17是科学计数法,大小差不多是6*10^-17这样的数十分接近0

tan(x)的横坐标范围应该不包含Π/2,但是使用了Π/2还是会有输出,输出一个很大的值

asin(x)实际上就是arcsin(x),也可看成siny = x,此时x带入1,获得的y就是Π/2

acos(1)同理就是0,atan(1)就是Π/4

最后一个atan2(y,x)表示(x,y)到x坐标轴正方向的角度,这里选取(-1,-1)表示角度为Π/2+Π/4

那么为了更清晰表示,这里使用tan(x)包裹了这个方法,tan(Π/2+Π/4) = tan(Π/4)即输出1

        1.abs(x)返回绝对值

        2.ceil(x)进行上舍入

        3.floor(x)进行下舍入

        4.exp(x)返回e的x次方

        5.log(x)e为底的x对数

        6.pow(x,y)返回x的y次幂

        7.round(x)四舍五入

        8.sqrt(x)x的平方根

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			document.write(Math.abs(-1),"<br/>");
			document.write(Math.abs(-1.20),"<br/>");
			document.write(Math.ceil(2.2),"<br/>");
			document.write(Math.ceil(2),"<br/>");
			document.write(Math.floor(2),"<br/>");
			document.write(Math.floor(2.2),"<br/>");
			document.write(Math.exp(0),"<br/>");
			document.write(Math.log(Math.E),"<br/>");
			document.write(Math.pow(Math.E,0),"<br/>");
			document.write(Math.round(5.5),"<br/>");
			document.write(Math.sqrt(2),"<br/>");
			document.write(Math.sqrt(-2),"<br/>");
		}
	</script>
</body>
</html>

 结果如左图所示

需要注意的是负数的平方根是虚数,但是返回的是NaN,所以可见Math.sqrt(x)函数不支持直接处理虚数。

        1.max(x,y)获得x和y的最大值

        2.min(x,y)获得x和y的最小值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			document.write(Math.max(1,-1),"<br/>");
			document.write(Math.min(1,-1),"<br/>");
		}
	</script>
</body>
</html>

结果如左所示

        random()返回0到1的随机值

        random()*100返回0到100的随机值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			document.write(Math.random(),"<br/>");
		}
	</script>
</body>
</html>

这里不需要写其他语句进行生成随机数种子等操作,只需要直接写下random就可以进行随机数,而且每次随机数都不同

4.math对象的使用例子:

        写一段生成0到100的随机数,然后与用户猜的数比较大小,如果猜的数过大,则返回输入过大提示语,过小就提示过小,并且修改原来的提示文案。

运行结果如上图,代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			var max = document.getElementById("max");//获得id为max的标签
			var min = document.getElementById("min");//获得id为min的标签
			max.innerHTML = "100";//初始化max
			min.innerHTML = "0";//初始化min
			var num = Math.ceil(Math.random()*100);//生成0到100的值
			var btn = document.getElementById("btn");//获取btn标签
			var content = document.getElementById("content");//获取content标签
			var lab = document.getElementById("text");//获取text提示语标签
			btn.onclick=function(){//按钮被点击
				var val = content.value;//获取输入值
				if(val>num){
					lab.innerHTML = "猜大了";
					max.innerHTML = val;
				}
				else if(val==num){
					lab.innerHTML = "猜对了";
				}
				else{
					lab.innerHTML = "猜小了";
					min.innerHTML = val;
				}
			}
		}
	</script>
	请从<label id="max"></label>到<label id="min"></label>中选一值
	请输入猜测的数值:<input type="text" id="content">
	<input type="button" value="确认" id="btn">
	<label id="text"></label>
</body>
</html>

这段代码的大致思想是:

创建上下两个提示语,一个提示范围,一个提示输入太大了还是太小了,lable值的修改使用innerHTML,上面写的JavaScript代码window.onload = function()是页面加载后运行,btn.οnclick=function()表示按钮按下运行,Math.ceil(Math.random()*100);//生成0到100的值生成0到100,ceil是为了避免出现小数,然后再在function中进行比较,并修改提示语

这段代码可以继续添加比较输入的数比以往输入的最小值还要小的判断,比如之前输入40发现比较小,这一次又输入39,需要进行比较即与min使用if语句比较,如果判断比min还要小,就使用lab.innerHTML="不能比以往猜的数还小"之类的提示,并使用return;退出。

Date对象

1.创建方法:

        var 变量名 = new Date();

2.Date对象方法:

        getYear()返回年号,这个年号是指减去1900的值     

        getFullYear()返回年数 

        getMonth()获取月份(0~11)

        getDate()返回一个月中哪一天(1~31)

        getDay()返回一个信息的哪一天(0~6,其他0表示周日)

        getHours()返回一天中哪一个小时(0~23)

        getMinutes()返回一小时的哪一分钟(0~59)

        getSeconds()返回一分钟的那一秒(0~59)

 对于小时,分钟,秒数都是要加上在后面s,例如minutes,seconds,hours

除了年,日期date其他都是从0开始

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			var d = new Date();
			document.write("日期",d.getDate(),"<br/>");
			document.write("星期",d.getDay(),"<br/>");
			document.write("小时",d.getHours(),"<br/>");
			document.write("分钟",d.getMinutes(),"<br/>");
			document.write("秒数",d.getSeconds(),"<br/>");
			document.write("年号",d.getYear(),"<br/>");
			document.write("年数",d.getFullYear(),"<br/>");
		}
	</script>
</body>
</html>

返回如左所示

        setYear(year)设置年数

        setMonth(month)设置月份

        setDate(day)设置日期
        setHours(hours)设置小时
        setMinutes(mins)设置分钟
        setSeconds(secs)设置秒数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			var d = new Date();
			d.setYear(91);
			document.write("日期",d.getYear(),"<br/>");
			d.setYear(2024);
			document.write("日期",d.getYear(),"<br/>");
			
		}
	</script>
</body>
</html>

 需要注意的是setYear可以设置二位数或者四位数,二位数表示距离1900年的距离,如果是四位数就是普通的年数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			var d = new Date();
			d.setMonth(15);
			document.write("月份",d.getMonth(),"<br/>");
			document.write("年数",d.getFullYear(),"<br/>");
			
		}
	</script>
</body>
</html>

setMonth也可以写超过11的数,最终得到的值为15-11(最高的12月序号是11)-1(从0开始计算) = 3月份,并且会对年份加一

结果如左图所示,现在的年份是2024,需要加上1为2025

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			var d = new Date();
			d.setDate(32);
			document.write("日期",d.getDate(),"<br/>");
			document.write("月份",d.getMonth(),"<br/>");
			
		}
	</script>
</body>
</html>

setDate也一样,32超过现在事件的4月份的30天,32 - 30 = 2,月份加一减一(从0开始)所以月份变为4,日期变为2

结果如左所示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			var d = new Date();
			d.setHours(25);
			document.write("日期",d.getDate(),"<br/>");
			document.write("小时",d.getHours(),"<br/>");
			
		}
	</script>
</body>
</html>

现在日期21,小时超过25-23-1为1,日期+1为22

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			var d = new Date();
			d.setMinutes(61);
			document.write("分钟",d.getMinutes(),"<br/>");
			document.write("小时",d.getHours(),"<br/>");
			
		}
	</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math</title>
</head>
<body>
	<script language="javascript">
		window.onload = function(){
			var d = new Date();
			d.setSeconds(61);
			document.write("分钟",d.getMinutes(),"<br/>");
			document.write("秒数",d.getSeconds(),"<br/>");
			
		}
	</script>
</body>
</html>

尝试以上代码后,可见只要超过对应时间数,就对对其取余数,商加到上一级的时间上

liyjioo
关注
  • 74
    点赞
  • 踩
  • 52
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
浅谈JavaScript中Date(日期对象),Math对象
10-24
JavaScript中的Date对象和Math对象是两个非常重要的内置对象，它们提供了处理时间和数学计算的功能。 Date对象主要用于处理日期和时间。Date对象可以存储任意一个日期，精度达到毫秒级。创建一个新的Date对象通常...
跟我学习javascript的Date对象
10-23
JavaScript中的Date对象是用于处理日期和时间的核心组件。在JavaScript中，Date对象提供了一系列的方法来创建、修改和读取日期和时间。这篇文章将深入探讨Date对象的各个方面，帮助你更好地理解和应用这个对象。 1....
javaScript Math对象与Date的使用
z1783883121的博客
11-28 938
Math对象 定义： math对象是一个静态对象（不需要实例化，可以直接用） Math对象常用的方法： 1. min() 和 max() ：取最小值和最大值 let max = Math.max(3,5,8,1); let min = Math.min(3,5,8,1); console.log(max); // 8 console.log(min); // ...
JavaScript Math 算数对象
梁辰兴的博客
03-06 585
Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。下面的例子使用了 Math 对象的 round 方法对一个数进行四舍五入。除了可被 Math 对象访问的算数值以外，还有几个函数（方法）可以使用。注意： Math对象无需在使用这个对象之前对它进行定义。Math（算数）对象的作用是：执行常见的算数任务。Math（算数）对象的作用是：执行普通的算数任务。
JavaScript Math和Date对象
好记性不如赖笔头
03-31 299
1、Math对象在使用Math对象时，不用使用new创建实例，直接使用对象名.成员方式（Math.xxx）调用。 举例： Math.max(argument1，argument2，)；取出参数中最大的一个， 例如：Math.max(3,88,2,90,-1,333)； Math.min(argument1，argument2，)；取出参数中最小的一个； Math.random()；产生一个
JavaScript Math对象介绍和运用
LILI_JU88的博客
03-20 1088
Math对象用于执行数学任务，它里面封装了数学运算相关的属性和方法。 常用属性：Math.PI表示圆周率 Math.ceil() 只要小数点后面有值都取1，除了0 Math.floor() 无论小数点是什么，都会去掉 Math.round() 可以对一个数进行四舍五入取整 Math.random() 可以用运算符来执行 0-X的随机数 Math.random()*X ...
JS内置对象和Math对象知识点详解
10-15
通过理解和掌握这些内置对象和Math对象的使用，可以极大地提高JavaScript编程的效率和代码的可读性。在实际开发中，这些工具可以帮助开发者处理各种数学问题，从简单的算术运算到复杂的统计和概率计算。
Javascript中Date类型和Math类型详解
10-22
主要给大家介绍了Javascript中Date类型和Math类型的一些基础知识，非常的实用，有需要的小伙伴可以参考下
Next.js静态导出与动态路由优化
天涯学馆
07-20 1053
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 409
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
【React 】开发环境搭建详细指南
lph159的博客
07-24 839
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 997
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
qq_61132537的博客
07-22 898
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 987
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 505
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
thinkphp8结合layui2.9 图片上传验证
quweiie的专栏
07-21 310
thinkphp8图片上传的验证
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
最新发布
KenkoTech的博客
07-24 343
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
javaScrip的学习（一）
weixin_65450681的博客
07-19 1313
这篇文章让我们简单来了解一下js，那么什么是js?JavaScript（简称JS）是一种高级编程语言，主要用于为网页添加交互功能。它可以嵌入到HTML页面中，通过对DOM（文档对象模型）的操作来实现动态效果和用户交互。JavaScript由Netscape公司的Brendan Eich于1995年创造，最初是为了增强HTML页面的功能性。随着时间的推移，JavaScript逐渐演变成一种通用的编程语言，可以在浏览器以外的环境中运行，例如服务器端的Node.js。
JavaScript教程：深入理解Math对象
2. 基于对象：JavaScript提供了许多内置对象，如Array、Date和Math，可以直接使用。 3. 简单性：语法简洁，易于学习。 4. 安全性：JavaScript运行在沙盒环境中，限制了对系统资源的直接访问，降低了潜在的安全风险。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值