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

上次说了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);
发布了27 篇原创文章 · 获赞 12 · 访问量 822
App 阅读领勋章
微信扫码 下载APP
阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览