[JavaScript知识库]Math和Date

Math对象属性

1. Math:js内置对象，处理数学问题

2. Math对象的方法:abs(x) 返回数的绝对值

3. acos(x)返回数的反余弦值

4. asin(x)返回数的反正弦值

5. atan(x)以介于-π/2与π/2弧度之间的数值来返回x的反正切值

6. atan2(y,x) 返回从x轴到点（x,y）的角度（介于-π/2与π/2弧度之间）

7. ceil(x)对数进行上舍入

8. cos(x) 返回数的余弦

9. exp(x) 返回e的指数

10. floor(x) 对数进行下舍入

11. log(x) 返回数的自然对数(底为e)

12. max(x,y) 返回x和y中的最大值

13. min(x,y) 返回x和y中的最小值

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

15. random() 返回0~1之间的随机数

16. round(x) 把数四舍五入为最接近的整数

17. sin(x) 返回数的正弦

18. sqrt(x)返回数的平方根

19. tan(x) 返回角的正切

20. toSource() 返回该对象的源代码

21. valueOf() 返回Math对象的原始值

random:-- Math.random() 这个方法是用来生成一个 0 ~ 1 之间的随机数

-- 每次执行生成的数字都不一样，但是一定是 0 ~ 1 之间的

-- 生成的数字包含 0 ，但是不包含 1

round()，ceil()，floor()的区别:

1.Math.round()：根据“round”的字面意思“附近、周围”，可以猜测该函数是求一个附近的整数，看下面几个例子就明白。

小数点后第一位<5正数：Math.round(11.46)=11负数：Math.round(-11.46)=-11

小数点后第一位>5正数：Math.round(11.68)=12负数：Math.round(-11.68)=-12

小数点后第一位=5正数：Math.round(11.5)=12负数：Math.round(-11.5)=-11

<!--参数的小数点后第一位>5，运算结果为参数整数部分绝对值+1，符号（即正负）不变-->

<!--参数的[小数点]后第一位=5，正数运算结果为整数部分+1，负数运算结果为整数部分-->

<!--总结：（小数点后第一位）大于五全部加，等于五正数加，小于五全不加-->

2.Math.ceil()：根据“ceil”的字面意思“天花板”去理解；<!--执行的是向上取整计算，它返回的是大于或等于函数参数，并且与之最接近的整数 -->

例如：Math.ceil(11.46)=Math.ceil(11.68)=Math.ceil(11.5)=12

Math.ceil(-11.46)=Math.ceil(-11.68)=Math.ceil(-11.5)=-11

3.Math.floor()：根据“floor”的字面意思“地板”去理解；<!--返回小于参数的最大整数,即对浮点数向下取整 -->

例如：Math.floor(11.46)=Math.floor(11.68)=Math.floor(11.5)=11

Math.floor(-11.46)=Math.floor(-11.68)=Math.floor(-11.5)=-12

abs：Math.abs() 是返回一个数字的绝对值

max：Math.max() 得到的是传入的几个数字之中最大的那个数字

min：返回指定的数字中带有最低值的数字

数字转换进制：

进制：0x表示十六进制，但是js会强制转换为十进制来运算,0xa == 10

0开头表示八进制，同样强制转换为十进制来运算 010 = 8

1、toString():可把一个 Number 对象转换为一个字符串，并返回结果

语法

NumberObject.toString(转换的进制)

2、parseInt():可以在数字转换成字符串的时候给出一个进制数

注意： 只有字符串中的第一个数字会被返回

注意： 开头和结尾的空格是允许的

注意：如果字符串的第一个字符不能被转换为数字，那么 parseInt() 会返回 NaN

注意：在字符串以"0"为开始时旧的浏览器默认使用八进制基数。ECMAScript 5，默认的是十进制的基数

Date对象属性

Date 对象用于处理日期和时间。

创建 Date 对象的语法：

var time = new Date()

<!--Date 对象会自动把当前日期和时间保存为其初始值-->

new Date(),参数传递有以下五种方式：

1、new Date("month dd,yyyy hh:mm:ss");

2、new Date("month dd,yyyy");

3、new Date(yyyy,mth,dd,hh,mm,ss); 注意：这种方式下，必须传递整型；

4、new Date(yyyy,mth,dd);

5、new Date(ms);

注意：ms:是需要创建的时间和 GMT时间1970年1月1日之间相差的毫秒数；当前时间与GMT1970.1.1之间的毫秒数：var mills = new Date().getTime();

各种变量代表的含义是：

　　month:用英文 表示月份名称，从January到December ,缩写也行（Jan....Dec）;　　mth:用整数表示月份，从0（1月）到11（12月

? <!--月份是从0开始算的，0表示1月，依此类推-->

　　dd:表示一个 月中的第几天，从1到31 　　yyyy:四位数表示的年份 　　hh:小时数，从0（午夜）到23（晚11点） 　　mm: 分钟数，从0到59的整数 　　ss:秒数，从0到59的整数 　　ms:毫秒数，为大于等于0的整数

将日期字符串格式化成指定内容

一、JavaScript获取当前年、月、日在JavaScript中，使用getFullYear()、getMonth()和getDate()这3种方法来获取当前的年、月、日JavaScript获取当前年、月、日方法 说明getFullYear() 返回一个表示年份的4位数字getMonth() 返回值是0（一月）到11（十二月）之间的一个整数getDate() 返回值是1~31之间的一个整数举例：

  <script type="text/javascript">
 ? ? ?  var d = new Date();
 ? ? ?  var my_day=d.getDate();
 ? ? ?  var my_month=d.getMonth()+1;
 ? ? ?  var my_year=d.getFullYear();
 ? ? ?  document.write("今天是"+my_year+"年"+my_month+"月"+my_day+"日");
 ?  </script>

二、 JavaScript方法获取当前时、分、秒

在JavaScript中，使用getHours()、getMinutes()、getSeconds()这3种方法分别用来获取当前的时、分、秒

  <script type="text/javascript">
 ? ? ?  var d = new Date();
 ? ? ?  var my_hours=d.getHours();
 ? ? ?  var my_minutes=d.getMinutes();
 ? ? ?  var my_seconds=d.getSeconds();
 ? ? ?  document.write("当前时间是："+my_hours+":"+my_minutes+":"+my_seconds);
 ?  </script>

getDay():getDay() 方法可返回表示星期的某一天的数字。

语法

dateObject.getDay()

返回值

dateObject 所指的星期中的某一天，使用本地时间。返回值是 0（周日） 到 6（周六） 之间的一个整数

getTime():getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数

语法

Date.getTime()

工具函数：

**************************************时间格式化处理************************************/
 ? ?  function dateFtt(fmt, date) {
 ? ? ?  //author: meizz
 ? ? ?  var o = {
 ? ? ? ?  "M+": date.getMonth() + 1, //月份
 ? ? ? ?  "d+": date.getDate(), //日
 ? ? ? ?  "h+": date.getHours(), //小时
 ? ? ? ?  "m+": date.getMinutes(), //分
 ? ? ? ?  "s+": date.getSeconds(), //秒
 ? ? ? ?  "q+": Math.floor((date.getMonth() + 3) / 3), //季度
 ? ? ? ?  S: date.getMilliseconds(), //毫秒
 ? ? ?  };
 ? ? ?  if (/(y+)/.test(fmt))
 ? ? ? ?  fmt = fmt.replace(
 ? ? ? ? ?  RegExp.$1,
 ? ? ? ? ?  (date.getFullYear() + "").substr(4 - RegExp.$1.length)
 ? ? ? ?  );
 ? ? ?  for (var k in o)
 ? ? ? ?  if (new RegExp("(" + k + ")").test(fmt))
 ? ? ? ? ?  fmt = fmt.replace(
 ? ? ? ? ? ?  RegExp.$1,
 ? ? ? ? ? ?  RegExp.$1.length == 1
 ? ? ? ? ? ? ?  ? o[k]
 ? ? ? ? ? ? ?  : ("00" + o[k]).substr(("" + o[k]).length)
 ? ? ? ? ?  );
 ? ? ?  return fmt;
 ? ?  }
 
 ? ?  //创建时间格式化显示
 ? ?  function crtTimeFtt() {
 ? ? ?  var crtTime = new Date(); //当前时间
 ? ? ?  return top.dateFtt("yyyy-MM-dd hh:mm:ss", crtTime); //直接调用公共JS里面的时间类处理的办法
 ? ?  }
 
 ? ?  console.log(crtTimeFtt()); //2018-05-27 17:56:20
?

计算时间差

--先获取两个时间点到 格林威治时间 的毫秒数

--两个时间相减，得到两个时间点之间相差的毫秒数

--把我们计算的毫秒数换算成时间

案例:

  <script>
 ? ? ?  var time1 = new Date('1999-10-4 2:30:30')
 ? ? ?  var time2 = new Date('2021-7-29 10:53:30')
 ? ? ?  time1 = time1.getTime()
 ? ? ?  time2 = time2.getTime()
 ? ? ?  var differenetTime = time2 - time1
 ? ? ?  //天
 ? ? ?  var day = differenetTime / (24 * 60 * 60 * 1000)
 ? ? ?  var day = Math.floor(day)
 ? ? ?  console.log(day)
 ? ? ?  //小时
 ? ? ?  var afterdifferentHours = differenetTime - (24 * 60 * 60 * 1000 * 7969)
 ? ? ?  var hours = afterdifferentHours / (60 * 60 * 1000)
 ? ? ?  var hours = Math.floor(hours)
 ? ? ?  console.log(hours)
 ? ? ?  //分钟
 ? ? ?  var afterdifferentMinutes = afterdifferentHours - (60 * 60 * 1000 * 8)
 ? ? ?  var minutes = afterdifferentMinutes / (60 * 1000)
 ? ? ?  var minutes = Math.floor(minutes)
 ? ? ?  console.log(minutes)
 ? ? ?  document.write(`1999-10-4 2:30:30与2021-7-29 10:53:30相差${day}天${hours}时${minutes}分`)
 ?  </script>

计时器

什么叫定时器？我们可以看到很多网站首页有一个“图片轮播”特效，每隔2s图片变换一次，这里就用到了定时器。定时器用途非常广，在图片轮播、在线时钟、弹窗广告等地方大显身手。凡是自动执行的东西，很大可能都是跟定时器有关。在JavaScript中，关于定时器的实现，我们有2组方法：（1）setTimeout()和clearTimeout()；（2）setInterval()和clearInterval()；一、setTimeout()和clearTimeout()在JavaScript中，我们可以使用setTimeout()方法来设置“一次性”调用的函数。其中clearTimeout()可以用来取消执行setTimeout()方法。语法：

var 变量名 = window.setTimeout(code , time)

说明：参数code可以是一段代码，也可以是一个调用的函数名；参数time表示时间，表示要过多长时间才执行code中的内容，单位为毫秒。举例：参数code是一段代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 ? <title></title>
 ?  <script type="text/javascript">
 ? ? ? window.onload = function () {
 ? ? ? ? ? setTimeout("alert('欢迎来到javascript');", 2000);
 ? ? ? }
 ? </script>
</head>
<body>
 ? <p>2秒后提示欢迎语。</p>
</body>
</html>

二、setInterval()和clearInterval()在JavaScript中，我们可以使用setInterval()方法来设置“重复性”调用的函数。其中clearInterval()可以用来取消执行setTimeout()方法。语法：

var 变量名 = setInterval (code , time)

说明：参数code可以是一段代码，也可以是一个调用的函数名；参数time表示时间，表示要过多长时间才执行code中的内容，单位为毫秒。setTimeout()方法与setInterval()方法的语法很相似，实际上这两者在用法方面区别非常大。其中setTimeout()方法内的代码只会执行一次，而setInterval()方法内的代码会重复性执行，除非你使用clearInterval()方法来取消执行。

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 ?  <script type="text/javascript">
 ? ? ? //定义全局变量，用于记录秒数
 ? ? ?  var n = 5;
 ? ? ? window.onload = function () {
 ? ? ? ? ? //设置定时器，重复执行函数countDown()
 ? ? ? ? ? var t = setInterval("countDown()", 1000);
 ? ? ? }
 ? ? ? //定义函数
 ? ? ? function countDown() {
 ? ? ? ? ? //判断n是否大于0，因为倒计时不可能有负数
 ? ? ? ? ? if (n > 0){
 ? ? ? ? ? ? ? n--;
 ? ? ? ? ? ? ? document.getElementById("num").innerHTML = n;
 ? ? ? ? ? }
?
?
 ? ? ? }
 ? </script>
</head>
<body>
 ? <p>新年倒计时：<span id="num">5</span></p>
</body>
</html>

setInterval()和clearInterval()分析：window.onload表示在页面加载完毕执行，在“JavaScript页面相关事件”我们会详细讲解到。setInterval()方法会重复执行某一段代码或函数。如果这个例子使用setTimeout方法就不能实现了，因为setTimeout()方法只会执行一次，而setInterval()会重复执行。