JavaScript Math对象和date对象的应用，定时器与延时器的应用，以及如何制作动态时钟

ゝ一世哀愁。 2023-07-18 06:44 6阅读 0赞

# Math 对象中常用的方法 #

### Math.random() 方法 ###

创建一个介于0~1之间的随机数，不包括1。  
常用于创建两个数之间的随机数。

##### 语法 #####

Math.random()*(b+1-a) + a

##### 实例 #####

// 输出1~10之间的随机整数
    console.log(parseInt(Math.random()*(10+1-1)+1));

### Math.round() 方法 ###

四舍五入保留小数。

##### 实例 #####

var float1 = 123.156;
    console.log( Math.round(float1) ); // 输出结果是 123
    
    var float2 = 123.556;
    console.log( Math.round(float2) ); // 输出结果是 124

### Math.ceil() 方法和 Math.floor() 方法 ###

这两种方法是今后常用的方法。

##### Math.ceil() 方法 #####

向上取整，整数部分进一。

##### Math.floor() 方法 #####

向下取整，只保留整数部分。

##### 实例 #####

var float1 = 123.156;
    
    console.log( Math.ceil(float1) );   // 输出结果是 124
    console.log( Math.floor(float1) );  // 输出结果是 123

### Math.pow() 方法 ###

幂运算 / 乘方运算。有两个参数,第一个是底数，第二个是指数。

##### 实例 #####

console.log(Math.pow(2,5));  // 计算 2的5次方

### Math.sqrt() 方法 ###

求平方根。

##### 实例 #####

console.log(Math.sqrt(9));  // 9的平方根,是3

### Math.abs() 方法 ###

求绝对值。

##### 实例 #####

console.log(Math.abs(-9));  // -9的绝对值,是9

# date 对象及其常用方法 #

date对象，是JavaScript中提供的，存储时间的对象。使用时，需要先创建一个时间对象。  
我们可以使用 JavaScript 提供的方法，关键词 **new + Date()** 方法创建一个时间对象。

### 实例 ###

// 存储的时间信息,是程序执行时的 当前时间
    var d = new Date();
    
    console.log(d);   // 向控制台输出内容
    console.dir(d);   // 查看对象的内容信息

通过 Date() 创建的对象中，包含很多的方法，都是JavaScript规定好的，可以直接使用。

### 1. getFullYear() 方法 ###

获取4位年份数值。

##### 实例 #####

var d = new Date();
    
    var year = d.getFullYear() ;
    console.log(year);

### 2. getMonth() 方法 ###

获取月份。

##### 实例 #####

var d = new Date();
    // JavaScript规定,获取的月份,数值是 0-11 , 0表示1月份,11表示12月份
    // 实际月份的数值,是获取结果 +1
    var month = d.getMonth() + 1;
    console.log(month);

### 3. getDate() 方法 ###

获取日期。

##### 实例 #####

var d = new Date();
    
    var date = d.getDate();
    console.log(date);

### 4. getDay() 方法 ###

获取星期。

##### 实例 #####

var d = new Date();
    // JavaScript规定,获取星期的结果是 0-6的数值 
    // 0表示 星期日 1表示 星期一 .... 6表示 星期六
    var week = d.getDay();
    console.log(week);

### 5. getHours() 方法 ###

获取小时。

##### 实例 #####

var d = new Date();
    
    var house = d.getHours();
    console.log(house);

### 6. getMinutes() 方法 ###

获取分钟。

##### 实例 #####

var d = new Date();
    
    var minute = d.getMinutes();
    console.log(minute);

### 7. getSeconds() 方法 ###

获取秒。

##### 实例 #####

var d = new Date();
    
    var second = d.getSeconds();
    console.log(second);

### 8. getTime() 方法 ###

获取当前时间戳，即从格林尼治时间 1970年1月1日,0点0分0秒 到现在的时间差（毫秒）。

##### 实例 #####

var d = new Date();
    
    var times = d.getTime();
    console.log(times);

在说定时器与延时器之前，我们需要知道什么是时间戳，以及如何使用时间戳:

# 时间戳 #

在JavaScript程序中，所谓的时间戳，指的是：  
**当前时间** 和 **格林尼治时间** 1970年1月1日 0点0分0秒，**相差的毫秒数**。  
简单理解,就是从 格林尼治时间 1970年1月1日 0点0分0秒，到现在，过了多少毫秒。  
实际项目中，时间戳 **往往用于计算时间，来衡量时间差**。

### 实例 ###

**例如：秒杀倒计时**

##### 原理 #####

假如 秒杀 是 4月1日 0点0分0秒开始。  
4月1日 0点0分0秒 这个时间有 时间戳 ，当前时间也会有 时间戳。  
两个时间戳相减，结果是两个时间之间的时间差，单位是毫秒。  
再将这个毫秒，转化为 天，小时，分钟，秒 就是我们要的结果。

// 获取2020年4月1日0点0分0秒的时间戳
    // 获取指定时间的时间对象, Date()参数是要获取的时间的字符串
    // '年-月-日 空格 小时:分钟:秒'
    // 有参数,获取指定时间的时间对象
    var end = new Date('2020-4-1 0:0:0');
    
    // 当前的时间对象,没有参数,获取当前时间对象
    var start = new Date();
    
    // 计算时间差,应该是 最终的事件的时间戳,减去当前时间的时间戳
    // 时间单位是 毫秒, 需要转化为秒 1秒 = 1000毫秒
    // 转化的秒数,是小数,我们只要整数部分,取整
    
    // end - start 直接使用时间对象相减 也可以获取 时间差
    // 但是一些低版本的浏览器,还有一些IE版本的浏览器,对这样时间对象直接相减,操作不支持
    var times = parseInt( ( end.getTime()  - start.getTime()  ) / 1000 ) ;
    
    console.log(times);
    
    // 需要将时间差的秒数 转化为 天,小时,分钟,秒等信息
    
    // 1,将秒,转化为天
    // 秒数 / 一天的秒数 对结果取整 只获取整数部分
    // parseInt() 或者 Math.floor()
    
    var day = parseInt( times / (24*60*60) ) ;
    console.log(day);
    
    // 2, 将 转化为 天数之后, 剩余的秒数, 转化为 小时
    // 而不是所有的秒数
    
    // 方法1: 总秒数 - 天数所代表的秒数 --- 是我们要转化为小时的秒数
    // var a = times - day*(24*60*60);
    // console.log(a);
    
    // 方法2: 总秒数 % 一天的秒数 求余数
    // 将所有的秒数,都转化为天,之后剩余的余数,就是我们要求的数值,也就是转化为小时的秒数
    // var b = times % (24*60*60);
    // console.log(b);
    
    // 转化为小时的秒数 / 一小时有多少秒 结果,获取整数部分
    
    var hour = parseInt( ( times % (24*60*60) ) / (60*60) );
    console.log(hour);
    
    // 3 , 将 剩余的秒数,转化为分钟
    // 方法1:总秒数 - 天数的秒数 - 小时的秒数 
    // 方法2: 总秒数 % 小时的秒数 
    
    // 剩余的秒数 / 分钟的秒数 获取整数部分
    
    var minute  = parseInt( ( times % (60*60) ) / 60 );
    console.log(minute);
    
    // 4 , 求剩余的秒数
    // 方法1 : 总秒数 - 天的秒数 - 小时的秒数 - 分钟的秒数
    // 方法2 : 总秒数 % 一分钟的秒数
    
    var second = times % 60 ;
    console.log(second);
    
    document.write( `距离结束时间,还有${ day}天,${ hour}小时,${ minute}分钟,${ second}秒,请您抓紧时间付款,或者找老公付款` );

若要达到动态刷新的效果，需要用到定时器，接下来我们一起来看一下应该 如何使用定时器：  
······································································································································

# 定时器和延时器 #

······································································································································

# 定时器 #

根据设定的时间间隔，来循环执行程序。  
只要定时器不停止，程序就会一直执行。

### 语法 ###

setInterval( 参数1 , 参数2 )
    
    参数1:要执行的程序,必须是一个函数的形式 function(){ 定义程序 }
    参数2:执行程序的间隔时间  单位是毫秒 
          时间间隔不能无限小,与计算机的刷新频率有关
          60Hz   60赫兹  代表,1秒刷新60次
          1次就是 1000 / 60 ---- 16.666... 毫秒
          你定义的程序的时间间隔,不能小于 16.6666... 毫秒
          我们一般都定义最少 0.1秒,也就是 100毫秒

### 实例 ###

// 将定时器,存储在一个变量中
    // 每间隔1000毫秒,也是一秒,重复执行 function(){}中的程序
    var interval1 = setInterval( function(){ 
        document.write('张老师帅极了' + '<br>');
    } , 1000);

### 终止定时器 ###

要终止定时器的执行,需要有两个条件
    1,使用一个变量,来存储定时器
    2,使用清除定时器方法,参数是这个定时器的变量
    
    如果程序中,有多个定时器,清除哪个,就停止哪个
    即时写多个参数,也只对第一个参数清除定时器

清除定时器方法使用 **clearInterval() 方法**。

##### 实例 #####

var interval1 = setInterval( function(){ 
        document.write('张老师帅极了' + '<br>');
    } , 1000);
    
    clearInterval(interval1);

### 注意： ###

变量中，存储的是当前 这个定时器 的 序号。
    这个序号，表示当前这个定时器，是整个程序中的第几个定时器。
    编号是从1开始编号的。
    所谓的清除定时器，实际上就是关闭整个程序中的第几个定时器。

### 如何间隔一段时间，再来停止定时器 ###

##### 实例 #####

// 定义一个变量,存储执行次数
    var int = 0;
    var interval3 = setInterval( function(){ 
        document.write('张老师不仅帅,还是非常帅' + '<br>');
        // 每次执行,变量自增
        int++;
    
        // 当满足某个我们设定的条件时
        if(int === 10){ 
            // 清除定时器,终止程序的执行
            clearInterval(interval3);
        }
    } , 1000);
    
    console.log(interval3);

### 定时器的缺陷 ###

**定时器最大的问题：**

程序的第一次执行，是在间隔规定的时间之后，才会执行。
    在走完第一个时间间隔之前，程序是不会执行的。

**解决办法：**

为了防止时间间隔执行完毕之前，页面没有执行结果，会将程序 先 提前执行一次

##### 实例 #####

// 为了防止5秒钟之内,页面内有输出内容
    document.write('张老师和鹏哥比,谁更帅?还用问吗,当然是张老师'+'<br>');            
    
    
    // 第一次向页面输出内容,是在间隔规定的5秒之后
    setInterval( function(){ 
        document.write('张老师和鹏哥比,谁更帅?还用问吗,当然是张老师'+'<br>');            
    } , 5000 )

# 延时器 #

按照设定的时间，延迟程序的执行。  
延时器中的程序，只能执行一次。  
可以简单的理解为 定时炸弹 到了指定的时间就会执行，并且只会执行一次。

### 语法 ###

setTimeout( 函数 , 延迟的时间 );
    
    第一个参数，也是函数形式，来定义要执行的程序内容。
    第二个参数，定义延迟时间，单位也是毫秒。

### 实例 ###

// 延时5秒钟之后,执行程序
    var timeout1 = setTimeout( function(){ 
        console.log('张老师还是很帅的');
    } , 5000 );
    console.log(timeout1);

### 清除延时器 ###

给一个变量存储延时器
    使用清除延时器方法，参数是这个变量。

清除延时器方法使用 **clearTimout()** 方法。

##### 实例 #####

var timeout1 = setTimeout( function(){ 
        console.log('张老师还是很帅的');
    } , 5000 );
    
    clearTimout(timeout1);

### 注意： ###

变量中，存储的也是当前 这个延时器 的 序号。
    这个序号，表示当前这个延时器，是整个程序中的第几个延时器。
    编号是从1开始编号的。
    所谓的清除延时器，实际上就是关闭整个程序中的第几个延时器。

# 特别说明 #

1.  JavaScript中，**定时器**和**延时器**的**计数**是**不做区分**的。
    
    也就是第几个定时器，和第几个延时器，是一起计算的，不做区分。  
    例如：

setInterval(function(){ } , 1000);   1
    setInterval(function(){ } , 1000);   2
    settimeout(function(){ } , 1000);    3
    setInterval(function(){ } , 1000);   4
    settimeout(function(){ } , 1000);    5

1.  **clearInterval** 和 **clearTimout** 是**不做区分**的。
    
    **clearInterval 可以清除定时器,也可以清除延时器 。  
    clearTimout 可以清楚延时器,也可以清除定时器。**  
    ······································································································································  
    利用以上知识，我们可以尝试写出一个动态的时钟：

# 动态时钟demo #

<h1 id="time"></h1>
     <script> //将我们的动态时钟封程序装到函数内部，以便随时调用 function setTime() { // 获取本地时间戳 let now = new Date(); // 获取当前年份 let year = now.getFullYear(); // 获取当前月份，但要注意 // JavaScript规定,获取的月份,数值是 0-11 , 0表示1月份,11表示12月份 // 所以我们给获取的月份 + 1，以便正常显示 let month = now.getMonth() + 1; // 获取当前日期 let day = now.getDate(); // 获取当前周数，这里又要注意了 // JavaScript规定,获取星期的结果是 0-6的数值 // 0表示 星期日 1表示 星期一 .... 6表示 星期六 // 所以我们可以将其获取的数字转换为数组的索引下标，从而用数组来显示大写的星期 let week = now.getDay(); // 获取小时 let hour = now.getHours(); // 获取分钟 let minute = now.getMinutes(); // 获取秒 let second = now.getSeconds(); // 这里我们就可以建立一个数组存储大写的星期 // 然后在返回值中调用达到正常显示的目的 let arr = ['日','一','二','三','四','五','六']; // 返回值，返回我们的动态时间并正常显示 return `${ year} 年 ${ month} 月 ${ day} 日 星期${ arr[week]} ${ hour} 时 ${ minute} 分 ${ second} 秒`; } // 解决定时器的缺陷，让程序在时间间隔执行完毕之前，页面也有输出结果 time.innerHTML = setTime(); // 定义定时器，达到我们的时钟动态刷新的效果 setInterval(function () { time.innerHTML = setTime(); },1000); </script>

这样我们的动态时钟就算完成了，我们可以在页面中随时调用这个时钟了。