JS标准库----Math对象，Date日期对象 ,定时器

最新推荐文章于 2024-08-30 20:29:15 发布

idiot_MAN

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量147

点赞数

分类专栏： javascript 前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/idiot_MAN/article/details/126316078

版权

前端同时被 2 个专栏收录

67 篇文章 2 订阅

订阅专栏

javascript

21 篇文章 0 订阅

订阅专栏

JS标准库----Math对象，Date 日期对象，定时器

Math对象

提供了各种数学功能，不是一个构造函数，不能产生实例。

Math.abs(); 返回绝对值

var num1 = -1;
console.log(Math.abs(num1));

max(a,b,c) 返回参数中最大值

console.log(Math.max(1,3,9,7));

min(a,b,c) 返回参数中最小的值

console.log(Math.min(1,3,9,7));

floor(num) 返回小于或等于参数值的最大整数(地板值,下舍入)

console.log(Math.floor(3.8));

ceil(num) 返回大于或等于参数值的最小整数(上舍入);

console.log(Math.ceil(3.3));

round() 四舍五入

console.log(Math.round(3.5));

pow() 幂运算

console.log(2 ** 3);
console.log(Math.pow(2,3)); // 2为底数，3为指数的幂运算。

sqrt() 平方根

console.log(Math.sqrt(4));

random() 返回0-1之间的随机数

// random() 返回0-1之间的随机数，可以等于0，但是不等于1。
var num4 = Math.random();
// 产生1-3的整数 2-6
num4 = Math.floor(Math.random()*3+1);  // 1-3.999999
// 封装产生范围内的随机整数方法
function randomInt(min, max){
  return Math.floor(Math.random()*(max-min+1)+min)
}
console.log(randomInt(2,6));
// 写一个产生随机的4位验证码的方法
function randomCode(){
  let str = "";
  for(let i=0;i<4;i++){  
    str += randomInt(0,9);
  }
  return str;
}
console.log(randomCode());

Date 日期对象

Date 日期对象,是一个构造函数，获取当前时间作为对象。

Date 日期计算起始时间(零点)是从 1970年1月1日 00:00:00

作为普通函数使用,返回当前的时间字符串

console.log(Date())

作为构造函数使用,返回日期对象

var date1 = new Date(); // 默认调用了实例的toString()，显示出来是一个日期字符串
console.log(date1);

Date.now(); // 返回当前时间距离零点时间的毫秒数(时间戳)

console.log(Date.now());

Date.parse() 解析日期字符串，返回日期离零点直接的毫秒数

console.log(Date.parse('Sun Jul 10 2022 21:45:21 GMT+0800 (中國標準時間)'))
console.log(Date.parse('Sun Jul 10 2022'))
console.log(Date.parse('2022-10-10 23:10:10'))
console.log(Date.parse('xxxxx'))

get方法获取具体的年月日，时分秒

var date2 = new Date();
console.log(date2.getFullYear()); // 获取年
console.log(date2.getMonth()+1); // 获取月，从0开始计算，需要+1
console.log(date2.getDate()); // 获取日期
console.log(date2.getDay()); // 周几,星期日为0。
console.log(date2.getHours()); // 获取小时
console.log(date2.getMinutes()); // 获取分钟
console.log(date2.getSeconds()); // 获取秒
console.log(date2.getTime()); // 距离零点的毫秒数(时间戳)。

var date2 = new Date("2022-10-10 23:10:10"); // 可以传入时间戳，日期字符串转为日期对象。

set方法可以设置日期，与get对应。

date2.setFullYear("2033");
date2.setDate(12)
console.log(date2);

定时器*

setInterval(表达式，毫秒值) 间隙性计时器
clearInterval() 清除计时器
setTimeout(表达式，毫秒值) 一次性计时器（定时器）
clearTimeout()清除计时器

js提供了定时执行js代码的功能，叫定时器。主要由两个内置的定时器方法实现。

一. setTimeout(function(){},delay);

该函数指定某个方法在，delay毫秒之后执行,只执行一次。返回值是该定时器在程序内部的索引值。
```
var index = setTimeout(function(){
   document.write("hello");
 }, 2000);
 console.log(index);
```
clearTimeout(index);//根据定时器的索引清除定时器，定时器不会运行。
```
clearTimeout(index);
```

实现每隔一段时间执行函数

// 3.1 输出5次hello就停止。
var count = 1; // 创建变量计算hello输出次数，当大于5以后，不再调用write方法。

function write(){
  setTimeout(function(){
    document.write(count+"-hello,");
    count++;
    if(count<6){
      write();
    }
  },2000);
}
write();

二、setInterval(function,delay),

1.每隔delay毫秒执行一次函数，会一直执行。返回值是该定时器的索引值

var index = setInterval(function(){
  document.write("hello");
}, 2000);

clearInterval(index),停止计时器。
```
clearInterval(index);
```

输出5次hello就停止。

var counta = 1;
var setIndex = setInterval(function(){
  document.write(counta + "-hello,");
  counta++;
  if(counta >5){
    clearInterval(setIndex);
  }
}, 2000);

三、如果计时器用变量代替函数，变量不要添加()

var handle = function(){
  document.write("time out");
};
setTimeout(handle,2000)

四、定时器调用函数传递参数,定时器函数的第三个参数开始就是给调用的函数传递参数。

var handle = function(name,age){
  document.write("time out "+name+age);
};
setTimeout(handle,2000,111,100);

案例一：显示当前时间

<body>
    <div></div>
    <script>
        let div = document.querySelector("div");
        setInterval(function () {
            let time = new Date();
            let hours = time.getHours();
            let minutes = time.getMinutes();
            let seconds = time.getSeconds();
            h1.innerHTML = `${hours}:${minutes}:${seconds}`;
        }, 1000)
    </script>
</body>

案例二：秒表

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo27</title>
</head>
 
<body>
    <button class="start">开始</button>
    <button class="pause">暂停</button>
    <button class="stop">重置</button>
    <h1></h1>
    <script>
        let start = document.querySelector(".start");
        let pause = document.querySelector(".pause");
        let stop = document.querySelector(".stop");
        let h1 = document.querySelector("h1");
        let seconds = 0;
        let ms = 0;
        h1.innerHTML = `${seconds}:${ms}`;
 
        let timer = null;
 
        start.onclick = function () {
            // 重复点击开始按钮时，先停止上一次的计时器
            clearInterval(timer);
            timer = setInterval(() => {
                if (ms === 9) {
                    ++seconds;
                    ms = 0;
                }
                ++ms;
                h1.innerHTML = `${seconds}:${ms}`;
            }, 100);
        }
 
        pause.onclick = function () {
            clearInterval(timer);
        }
 
        stop.onclick = function () {
            clearInterval(timer);
            seconds = 0;
            ms = 0;
            h1.innerHTML = `${seconds}:${ms}`;
        }
    </script>
</body>
 
</html>