JavaScript date对象的补充，异步执行规则，BOM操作之弹窗、获取浏览器滚动条

落日映苍穹つ 2023-05-28 11:20 28阅读 0赞

上次说了date对象的获取方法和应用，这次补充一下它的参数写法规则以及设定方法：

# date 对象参数的写法 #

### 方法1:常用方法 ###

##### 语法规则 #####

一个字符串，来表示指定的时间。
    年月日，时分秒，都设定完整。

'2000-10-12 8:30:00'
    '2000/10/12 8:30:00'
    '2000 10 12 8:30:00'
    '2000,10,12 8:30:00'

这四种设定方法都是正确的。

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

var d = new Date('2000-10-12 8:30:00');
    
    console.log(d);

### 方法2:不常用的方法 ###

##### 语法规则 #####

使用多个数值，来表示时间日期。
    最多定义六个数值表示年月日时分秒。
    定义的表示时间的数值，如果超过正常范围，例如月份是0-11的数值，会向前一个表示时间的数值进位。
    定义一个数值，无法正确定义事件，至少要有年，月两个
    定义两个数值，年，月，日期默认是1号，时间默认是 0:0:0
    定义三个数值，年，月，日 时间默认是 0:0:0
     	有时候出现bug，会显示 8:0:0 北京时间
     	是JavaScript的bug，我们不用去管
    定义四个数值，年，月，日，小时  分钟，秒默认是 0:0
    定义五个数值，年，月，日，小时，分钟，秒默认是 0
    定义五六数值，年，月，日，小时，分钟，秒

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

var d = new Date(2020,10,12,8,2,9);
    console.log(d);

### 方法3: 定义不完整的字符串 ###

##### 语法规则 #####

定义  年      月日,默认是1月1日,时间是8:0:0
    定义  年月    日,默认是1日,时间是8:0:0
    定义  年月日  时间是 8:0:0(月份和日期都是两位数) 或者 0:0:0 
                 是JavaScript的bug,我们不用去管
    定义  年月日,必须是小时分钟 , 秒是0

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

var d = new Date('2020-10-12 10:10');
    
    console.log(d)

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

# date 对象的设定方法 #

Date()对象，除了get… 获取时间内容，还可以 set… 设定时间内容。  
set，设定时间对象中存储的数据，定义 cookie 存储数据的时候会用。  
**可以设定，年，月，日，时，分，秒，时间戳。  
不能设定星期，因为星期是根据年月日，计算出来的。**

### 实例 ###

var d = new Date();
    
    console.dir(d);
    
    // 获取当前的年份,默认是当前时间,2020年
    var y1 = d.getFullYear();
    
    console.log(y1);
    
    // 设定时间对象d中,年份为 2000年
    // 此时,设定之后,时间对象d中,存储的就不是2020,而是2000年
    d.setFullYear(2000);
    
    // 此时再次获取 时间对象d中存储的年份,就是2000年
    var y2 = d.getFullYear();
    console.log(y2);
    console.log(d);

# JavaScript 异步执行 #

计算机程序执行分为**同步执行**和**异步执行**。  
所谓的同步执行,就是正常的计算机程序执行的3大顺序流程：

*  顺序控制语句 从上至下,从左至右
 *  分支控制语句 if,switch
 *  循环控制语句  
    for,while,do…while,for…in,forEach()

所谓的异步执行,是一种特殊的程序的执行方式，例如：

*  setInterval setTimeout
 *  事件的绑定 onclick…
 *  ajax请求

### 异步程序的执行原则： ###

1. 所有的异步程序的执行,都会在同步程序执行结束之后,再来执行
    2. 异步程序的执行顺序,如果时间相同,看代码的先后顺序
     		       		如果时间不同,时间短的,先执行

### 描述异步程序执行的过程 ###

1. 从一行代码开始执行程序
    2. 同步程序正常执行
    3. 如果发现是异步程序，暂时不执行
       存储在异步池中，等待执行
    4. 将程序中所有的同步程序执行完毕后
    5. 开启异步池，执行异步程序
     		当设定的时间到达,就会执行对应的异步升序
     		先到设定时间的异步程序,先执行
     		如果设定的时间相同,看异步程序的顺序,来执行
     		
    必须要牢记，异步程序的执行，一定是在所有同步程序执行结束之后，才会开始执行。

### 实例 ###

setInterval(function(){ 
        console.log('我是异步执行的程序1111');
    } , 2000);
    setInterval(function(){ 
        console.log('我是异步执行的程序2222');
    } , 1000);
    
    console.log('我是同步执行的程序')

# 浏览器三大弹窗操作 #

### 1. 提示框 / 警告框 ###

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

window.alert('提示内容');

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

window.alert('弹出内容\n警告内容');

### 2. 输入框 ###

##### 语法规则 #####

window.prompt('提示内容');
    
    弹出一个输入框，可以输入数据，()中定义的内容，作为输入数据的提示内容。
    输入框执行结果，可以使用变量来存储。
    存储的内容，是数据的数据内容。

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

var userName = window.prompt('请输入账号');
    var userPwd = window.prompt('请输入密码');
    
    console.log(userName,userPwd);

注意：  
**输入的数据，存储的方式是，字符串类型。  
如果是输入数值，需要计算，必须把数据类型转换为数值。**

那么如何将纯数字的字符串转换为数值呢？  
我们会在本文末尾补充。

### 3. 确认框 ###

##### 语法规则 #####

window.confirm('提示内容');
    
    点击确定按钮，window.confirm()执行结果，返回值是 true
    点击取消按钮，window.confirm()执行结果，返回值是 false
    可以根据 返回值 ，执行不同的操作

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

var res = window.confirm('请问您是否确定删除这个邮件');
    console.log(res);

# 获取浏览器滚动条 #

获取浏览器滚动条，分为宽度和高度两个属性：  
即获取浏览器滚动条的高度，宽度。

这里滚动条的高度指的就是浏览器页面纵向上卷的高度，也是控制台输出的高度。

滚动条的宽度指的就是浏览器页面横向移动的宽度，也是控制台输出的宽度。

### 获取滚动条操作的兼容性 ###

为了保证获取浏览器滚动条操作的兼容性，我们在不同情况下使用不同的获取方式。  
关键就看：

有没有 文档类型声明：	<!DOCTYPE html>
    		有   : 使用方法document.documentElement.scrollTop;
    		没有 : 使用方法document.body.scrollTop;
    如果获取方式错误，程序不会报错，只是获取的结果是0

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

var height1 = document.documentElement.scrollTop;
    var height2 = document.body.scrollTop;
    console.log(height1 , height2);

实际当中要确保，始终可以获取到正确的数值，不管有没有文档类型声明，都要做 兼容处理：

##### 语法规则 #####

var 变量 = 方式1 || 方式2 ;

当方式1有结果时,，数值会转化为 true ， 方式2就不会执行。
     	变量中存储的是 方式1获取的结果。
    当方式1结果是0时，数值会转化为 false ， 方式2会执行。
     	变量中，先存储方式1的结果0，再存储方式2的结果，最终为方位2的结果。
    
    最终的效果，就是确保变量中，始终有数值存储。

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

// 浏览器上卷的高度
    var height = document.documentElement.scrollTop || document.body.scrollTop
    
    // 浏览器移动的宽度
    var width = document.documentElement.scrollLeft || document.body.scrollLeft;
    
    console.log(height , width);

### 还可以利用属性来设定 ###

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

// 设定滚动条,移动的宽度和高度
    // 直接设定数值就可以,不要加PX
    document.documentElement.scrollTop = 500;
    document.documentElement.scrollLeft = 500;

# 将纯数字的字符串转化为数值类型方法 #

### 方法1 : parseInt() ###

获取整数部分。

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

var res1 = parseInt(window.prompt('请输入密码'));
    console.log(res1);

### 方法2 : 执行 非 加法的 不影响数值的 运算 ###

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

var res2 = window.prompt('请输入密码') - 0 ;
    var res2 = window.prompt('请输入密码') * 1 ;
    var res2 = window.prompt('请输入密码') / 1 ;
    console.log(res2);

### 方法3 : 在数值前添加 + 正号 / - 符号 ###

获取 正数 的部分。  
但是要注意,正数和负数的问题。

*  正号 : 正数获取的正数结果 负数获取的是负数结果

*  符号 : 正数获取的负数结果 负数获取的是正数结果  
    就像我们数学中的正负得负，负负得正一样。

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

var res2 = -window.prompt('请输入密码');
    console.log(res2);