当前位置: article > 正文

JavaScript——内置对象（Math，Date）_(math,date)

作者：小小林熬夜学编程 | 2024-05-18 18:21:44

踩

(math,date)

文章目录

内置对象

内置对象

JavaScript中的对象分为3种：内置对象、浏览器对象、自定义对象

JavaScript 提供多个内置对象：Math/Array/Number/String/Boolean…

对象只是带有属性和方法的特殊数据类型。

内置对象的方法很多，我们只需要知道内置对象提供的常用方法，使用的时候查询文档。

通过MDN/W3C来查询

学习一个内置对象的使用，只要学会其常用的成员的使用（通过查文档学习）

MDN：https://developer.mozilla.org/zh-CN/
WC3：https://www.w3school.com.cn/

验证变量是不是对象的方法

//    如何验证变量是不是对象
    console.log(Array instanceof Object);
    var obj={};
    console.log(obj instanceof Object);
1
2
3
4

Math对象

Math对象不是构造函数，它具有数学常数和函数的属性和方法，都是以静态成员的方式提供

跟数学相关的运算来找Math中的成员（求绝对值，取整）

Math

演示：Math.PI、Math.random()、Math.floor()/Math.ceil()、Math.round()、Math.abs() 、Math.max()

Math.PI						// 圆周率
Math.random()				// 生成随机数
Math.floor()				// 向下取整
Math.ceil()	 				//向上取整
Math.round()				// 取整，四舍五入
Math.abs()					// 绝对值
Math.max()/Math.min()		 // 求最大和最小值
Math.sin()/Math.cos()		 // 正弦/余弦
Math.power()/Math.sqrt()	 // 求指数次幂/求平方根
Math.fround() 					//可以将任意的数字转换为离它最近的单精度浮点数形式的数字。
1
2
3
4
5
6
7
8
9
10

案例：随机生成颜色RGB

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>$永远的24k纯帅$</title>
  <style>
    div {
      width: 300px;
      height: 200px;
      background-color: pink;
    }
  </style>
  <script>
    //随机产生一个十六进制的颜色值
    //封装成一个函数
    console.log(parseInt(Math.random() * 5));

    function getColor() {
      var str = "#";
      //一个十六进制的值的数组
      var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
      for (var i = 0; i < 6; i++) {
        //产生的每个随机数都是一个索引,根据索引找到数组中对应的值,拼接到一起
        var num = parseInt(Math.random() * 16);
        str += arr[num];
      }
      return str;
    }
    //页面记载的事件
    window.onload = function () {
      //在文档中通过id属性的值查找这个元素(标签).设置该标签的背景颜色
      document.getElementById("dv").style.backgroundColor = getColor();
    };
    //console.log(getColor());
  </script>
</head>
<body>
<div id="dv"></div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

Date对象

创建 Date 实例用来处理日期和时间。Date 对象基于1970年1月1日（世界标准时间）起的毫秒数。

// 获取当前时间，UTC世界时间，距1970年1月1日（世界标准时间）起的毫秒数
var now = new Date();
console.log(now.valueOf());	// 获取距1970年1月1日（世界标准时间）起的毫秒数

Date构造函数的参数
1. 毫秒数 1498099000356		new Date(1498099000356)
2. 日期格式字符串  '2015-5-1'	 new Date('2015-5-1')
3. 年、月、日……				  new Date(2015, 4, 1)   // 月份从0开始
1
2
3
4
5
6
7
8

获取日期的毫秒形式

var now = new Date();
// valueOf用于获取对象的原始值
console.log(date.valueOf())	

// HTML5中提供的方法，有兼容性问题
var now = Date.now();	

// 不支持HTML5的浏览器，可以用下面这种方式
var now = + new Date();			// 调用 Date对象的valueOf() 
1
2
3
4
5
6
7
8
9

日期格式化方法

toString()		// 转换成字符串
valueOf()		// 获取毫秒值
// 下面格式化日期的方法，在不同浏览器可能表现不一致，一般不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()
1
2
3
4
5
6
7

获取日期指定部分

getTime()  	  // 返回毫秒数和valueOf()结果一样，valueOf()内部调用的getTime()
getMilliseconds() 
getSeconds()  // 返回0-59
getMinutes()  // 返回0-59
getHours()    // 返回0-23
getDay()      // 返回星期几 0周日   6周6
getDate()     // 返回当前月的第几天
getMonth()    // 返回月份，***从0开始***
getFullYear() //返回4位的年份  如 2016
1
2
3
4
5
6
7
8
9

案例

写一个函数，格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式

function formatDate(d) {
  //如果date不是日期对象，返回
  if (!date instanceof Date) {
    return;
  }
  var year = d.getFullYear(),
      month = d.getMonth() + 1, 
      date = d.getDate(), 
      hour = d.getHours(), 
      minute = d.getMinutes(), 
      second = d.getSeconds();
  month = month < 10 ? '0' + month : month;
  date = date < 10 ? '0' + date : date;
  hour = hour < 10 ? '0' + hour : hour;
  minute = minute < 10 ? '0' + minute:minute;
  second = second < 10 ? '0' + second:second;
  return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

计算时间差，返回相差的天/时/分/秒

function getInterval(start, end) {
  var day, hour, minute, second, interval;
  interval = end - start;
  interval /= 1000;
  day = Math.round(interval / 60 /60 / 24);
  hour = Math.round(interval / 60 /60 % 24);
  minute = Math.round(interval / 60 % 60);
  second = Math.round(interval % 60);
  return {
    day: day,
    hour: hour,
    minute: minute,
    second: second
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/589386