第十四节 JavaScript数学对象和日期对象

一. Math对象

一般用来执行js中的数学运算

Math对象的方法

Math.PI 圆周率

Math.random() 获取随机数字 [0,1)

Math.min(a,b) a和b中取小值

Math.max(a,b) a和b中取大值

Math.ceil(x) 把x上取整

Math.floor(x) 把x下取整

Math.round(x) 把x四舍五入

Math.abs(x) 取x的绝对值

Math.sin(x) 求x的正弦值

Math.cos(x) 求x的余弦值

Math.tan(x) 求x的正切值

Math.pow(x,y) 求x的y次方

Math.sqrt(x) 求x的平方根

1. Math对象

Math是js的内置对象,可以直接使用,

检测Math是不是一个对象

console.log(typeof Math);

2.方法的使用

2.1 常用属性方法

// 获取圆周率 Math的属性PI
console.log(Math.PI);   

// Math的方法
// 1.随机数[0,1)
console.log(Math.random());

// 2.获取最小值,返回参数最小值
// 如果传入的参数不是数字类型,会转为数字类型,转不了也就比不来最小返回NaN
// 可以传一个参数
// 不传参为Infinity
console.log(Math.min(10,20,30,50))

// 3.获取最大值,返回参数最大值
// 可以传一个参数
// 不传参为-Infinity
console.log(Math.max(10,20,30,50));

// 4.向上取整
// 正常返回整数
// 接受一个参数,如果有多个参数,自动忽略后面的
// 如果传入的不是数字类型,隐式转换数字类型,转不了NaN
// 不传参,返回NaN
console.log(Math.ceil(2.3));

// 4.向下取整
// 正常返回整数
// 接受一个参数,如果有多个参数,自动忽略后面的
// 如果传入的不是数字类型,隐式转换数字类型,转不了NaN
// 不传参,返回NaN
console.log(Math.floor(2.3));

// 5.四舍五入
// 正常返回整数
// 接受一个参数,如果有多个参数,自动忽略后面的
// 如果传入的不是数字类型,隐式转换数字类型,转不了NaN
// 不传参,返回NaN
console.log(Math.round(2.3));

// 6.绝对值
// 正常返回正数
// 接受一个参数,如果有多个参数,自动忽略后面的
// 如果传入的不是数字类型,隐式转换数字类型,转不了NaN
// 不传参,返回NaN
console.log(Math.abs(2.3));

求一个数组内的最小值

var arr=[10,30,49,5,72,66,101]
var min =Math.min.apply(null,arr)//apply第一个参数为null表示不改变数组指向，第二个参数表示apply接收数组。Math.min接收的是数组中每一项的值
console.log(min);

2.2 其他方法

// 1. 求正弦值 
// Math.sin(弧度值)
console.log(Math.sin(Math.PI/6));

// 2. 求余弦值 
// Math.cos(弧度值)
console.log(Math.cos(Math.PI/6));

// 3. 求正切
// Math.tan(弧度值)
console.log(Math.tan(Math.PI/6));

// 4. x的y次幂
// Math.pow(x,y)    x的y次方
// 接受两个参数,传入多个忽略后面的
// 只传一个参数或不传就是NaN
// x,y支持负数
console.log(Math.pow(x,y));

// 4. 开方
// Math.sqrt(x)  
// 接受一个参数,传入多个忽略后面的
// 其他数据类型会转数字类型,转不了为NaN
// 不传就是NaN
console.log(Math.sqrt(x) );

随机验证码(有重复数字)

function unique(){
    var str = "0123456789abcdefghijklmnopqrstuvwsyzABCDEFGHIJKLMNOPQRSTUVWSYZ";
    var newStr = ""
    for(var i = 0; i < 4; i++){
        newStr += str[parseInt(Math.random()*str.length)];
    }
    return newStr;
}

随机验证码(无重复数字)

function unique(){
    var str = "0123456789abcdefghijklmnopqrstuvwsyzABCDEFGHIJKLMNOPQRSTUVWSYZ";
    var newStr = ""
    for(var i = 0; i < 4; i++){
        var randow = parseInt(Math.random()*str.length);
        if(newStr.indexOf(str[randow]) !== -1){
            i--;
            continue;
        }else{
            newStr += str[randow];
        }
        
    }
    return newStr;
}

二. 日期对象 Date

日期对象是JS中提供的用于控制年份日期.时间.的对象

1. 创建日期对象

Date是js内置的构造函数,使用前,先通过new操作符构造一个日期对象出来

var date = new Date();  
console.log(date);   // Fri Apr 26 2019 15:14:55 GMT+0800 (中国标准时间)

注意,这个获取时间不是实时的,是将此时此刻你获取的时间拍照报存在变量date中

2. 优化获取的时间

date.toLocaleString() ==> 获取本地日期字符串
date.toLocaleDateString() ==> 获取本地(年/月/日)形式的字符串
date.toLocaleTimeString() ==> 获取本地(时/分/秒)形式的字符串

2.1 本地日期格式

date.toLocaleString();     // "2019/4/26 下午3:17:33"
date.toLocaleDateString(); // "2019/4/26"
date.toLocaleTimeString(); // "下午3:17:33"

3. 日期对象的方法

3.1 日期对象的获取方法

date.getFullYear() ==>获取年份

date.getMonth() ==>获取月份 (0-11)

date.getDate() ==>获取日 (1-31)

date.getHours() ==>获取小时

date.getMinutes ==>获取分钟

date.getSeconds ==>获取秒钟

date.getMilliseconds ==>获取毫秒

date.getDay() ==>获取星期几 (0-6) 星期天是0

date.getTime() ==>获取当前时间到1970年1月1日午夜的毫秒数

date.getTimezoneOffset() ==> 获取当前时区的偏移时间 东8区是-480

// 1. 获取年份
date.getFullYear();   //2019

// 2. 获取月份
// 注意,月份的计数是从0开始的的,也就是1月份的数字为0,
// 所以获取月份数字后加1才是真正的月份
date.getMonth() + 1;    // 3 + 1 = 4  ,

// 3. 获取日期
date.getDate();   // 26

// 4. 获取小时
date.getHours();      // 10

// 5. 获取分钟
date.getMinutes();      // 30

// 6. 获取秒数
date.getSeconds();      // 20

// 7. 获取毫秒数
date.getMilliseconds();      // 862

// 8. 获取星期几
date.getDay();         //  5

// 9. 获取时间戳
date.getTime();       //1556264444841(1970年1月1日0时0分0秒到现在的毫秒数)

// 10. 获取格林威治时间与本地时间相差的分钟数
date.getTimezoneOffset();  // -480 时区偏移,我们是东八区
// 查看格林威治时间
date.setHours(date.getHours() + date.getTimezoneOffset()/60);
date.toLocaleString();

3.2 设置时间的方法

date.setFullYear() ==>设置年份

date.setMonth() ==>设置月份 (0-11)

date.setDate() ==>设置日 (1-31)

date.setHours() ==>设置小时

date.setMinutes() ==>设置分钟

date.setSeconds() ==>设置秒钟

date.setMilliseconds() ==>设置毫秒

// 1. 设置日期的年份
date.setFullYear(2017);     // 返回时间戳

// 2. 设置月份
// 注意如果你传入的参数大于11,将会减掉11,加一年,然后剩下的再修改月份
date.setMonth(10);         // 返回时间戳 

例子:

每隔一秒将当前时间打印子控制台上

setInterval(function(){
    var date = new Date();
    var YY = date.getFullYear();   //2019
    var MM = date.getMonth() + 1;
    var DD =  date.getDate();  
    var hh = date.getHours(); 
    var mm = date.getMinutes();    
    var ss = date.getSeconds();  
    console.log('现在的时间时'+YY+'年'+MM+'月'+DD+'日'+hh+'时'+mm+'分'+ss+'秒');
},1000)

写一个时钟并输出到页面上（获取一个时间戳，不会更新）

<div id="time">
  </div>
  <script>
    //写一个时钟并输出到页面上（获取一个时间戳，不会更新，只有刷新是更新）
    var date = new Date;
    var YYYY = date.getFullYear();
    var MM = date.getMonth();
    var DD = date.getDate();
    var hh = date.getHours();
    var mm = date.getMinutes();
    var ss = date.getSeconds();
    time.innerHTML += '当前的时间为：';//频繁操作DOM会影响性能
    time.innerHTML += YYYY + '年';
    time.innerHTML += MM +1 + '月';
    time.innerHTML += DD + '日';
    time.innerHTML += ' ';
    time.innerHTML += hh + '时';
    time.innerHTML += mm + '分';
    time.innerHTML += ss + '秒';
  </script>

写一个时钟并输出到页面上（使用定时器，每隔一秒会自动更新）

  <div id="time">
  </div>
  <script>
    function clock() {
      time.innerHTML ="";//每次清空DOM节点，不能累加
      var date = new Date;
      var YYYY = date.getFullYear();
      var MM = date.getMonth();
      var DD = date.getDate();
      var hh = date.getHours();
      var mm = date.getMinutes();
      var ss = date.getSeconds();
      time.innerHTML += '当前的时间为：' + YYYY + '年'+ ( MM +1 ) + '月' +DD + '日'+ ' ' + hh + '时' +mm + '分'+ss + '秒'; //这样写优点：只操作一次DOM
    }
    setInterval(clock,1000);//循环定时器
  </script>

写一个时钟并输出到页面上，JS中插入标签，定义字符串，给数字添加样式（使用定时器，每隔一秒会自动更新）

<style>
    #time span{
      color:red;
    }
  </style>
</head>
<body>
  <div id="time">
  </div>
  <script>
    function clock() {
      time.innerHTML = "";//每次清空DOM节点，不能累加
      var date = new Date;
      var YYYY = date.getFullYear();
      var MM = date.getMonth();
      var DD = date.getDate();
      var hh = date.getHours();
      var mm = date.getMinutes();
      var ss = date.getSeconds();
      var str = "";
      str +=  '当前的时间为：';
      str += '<span>' + YYYY + '</span>'+'年';
      str += '<span>' +(MM + 1)  + '</span>'+'月';//要加括号
      str += '<span>' + DD + '</span>'+'日';
      str += '<span>' + ' '+'</span>';
      str += '<span>' + hh + '</span>'+'时';
      str += '<span>' + mm + '</span>'+'分';
      str += '<span>' + ss + '</span>'+'秒';
      time.innerHTML = str;
    }
    setInterval(clock, 1000);//循环定时器
  </script>

4. 获取指定的时间

var date = new Date(参数) ==>获取指定时间
参数形式 ==>2019,1,5 2019年2月5日

// 获取指定的时间
var date = new Date(2019,1,5)    // ,写法
var date = new Date('2019-05-27 20:30:25');  // -写法
var date = new Date('2019/05/27 20:30:25');  // /写法


<script>
    var date = new Date;//获取当前此时此刻的时间戳
    console.log(date);
    date.setFullYear(1999)//通过设置时间戳获取指定时间戳
    console.log(date);
    //new Date() 可以传参，参数就是指定的时间戳
    var date2 = new Date(2021, 11, 30, 11, 30, 30)   //月份的值是减一的,这种数字参数的写法平时不用
    console.log(date2);
    var date3 = new Date('2022-11-30 15:3:30')//参数可以是字符串格式，就是日期格式.字符串月份不用减一.这种格式也行2022/11/30
    console.log(date3);
  </script>

5. 获取两个时间戳相差的毫秒数

两个时间戳相减是毫秒数

var date = new Date(2020,0,25);
var now = new Date();
var _date = date - now;     // _date的值是毫秒数


    var date = new Date();
    var date3 = new Date('2021-11-30 15:3:30')
    var _date = date3 - date;
    console.log("相差毫秒数 "+_date+" ms");
    console.log("相差天数 " + parseInt(_date/3600000/24)+" 天");

5.1 距离过年的时间

// 距离过年的天,时,分,秒
setInterval(function(){
    var day = Math.floor(_date/(1000*60*60*24));
    var hours = Math.floor(_date/(1000*60*60)%24);
    var minutes = Math.floor(_date/(1000*60)%60);
    var seconds = Math.floor(_date/(1000)%60);
},1000)

// toTwo
function toTwo(num){
    if(num < 10){
        return '0' + num;
    }else{
        return num;
    }
}

    <head>
      <style>
        #time span {
          color: red;
        }
      </style>
    </head>
    
    <body>
      <div id="time">
      </div>
      <script>
        //输出两位过年时间值
        var year = new Date("2021-11-30 00:01:01");
        function yearTime() {
          var now = new Date();
          var ms = year - now;
          var day = parseInt(ms / 1000 / 60 / 60 / 24);
          var hh = parseInt(ms / 1000 / 60 / 60 % 24);
          var mm = parseInt(ms / 1000 / 60 % 60);
          var ss = parseInt(ms / 1000 % 60);
          var str = "";
          str += "距离过年还有";
          str += "<span>" + toTwo(day) + "天" + "</span>" + "<span>" + toTwo(hh) + "</span>" + "时" + "<span>" + toTwo(mm) + "</span>" + "分" + "<span>" + toTwo(ss) + "</span>" + "秒";
          time.innerHTML = str;
        }
        //转成占两位函数
        function toTwo(num) {
          return (num >= 10 ? "" : "0") + num;
        }
        setInterval(yearTime, 1000)
      </script>
    </body>