上一章讲到的构造函数,这章继续其他的知识点
1. Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象
(1)使用Date 如果没有参数 返回当前系统的当前时间
(2)参数常用的写法:数字型2022, 03, 26 或者是 字符串型 '2022-03-26 8:8:8'
2. Math数学对象 不是一个构造函数,不需要new 来调用 而是直接使用里面的属性和方法即可
(1).利用对象封装自己的数学对象 里面有 PI 最大值和最小值
(2).Math对象随机数方法 random() 返回一个随机的小数 0 =< x < 1
(3).这个方法里面不跟参数
(4).想要得到两个数之间的随机整数 并且 包含这2个整数
// Math.floor(Math.random() * (max - min + 1)) + min;
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 10));
3. 事件的三要素:事件源、 事件类型、事件处理程序
(1).事件源 事件被触发的对象 谁 按钮
(2).事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
(3).事件处理程序 通过一个函数赋值的方式完成
4. 执行事件步骤:获取事件源、绑定事件注册事件、添加事件处理程序
<script>
显示隐藏密码案例:
// 1. 获取事件源
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2. 注册事件 处理程序
var flag = 0;
eye.onclick = function() {
// 点击一次之后, flag 一定要变化
if (flag == 0) {
pwd.type = 'text';
eye.src = 'images/open.png';
flag = 1; // 赋值操作
} else {
pwd.type = 'password';
eye.src = 'images/close.png';
flag = 0;
}
}
</script>
5. dom 事件流 三个阶段
// 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
// 2. onclick 和 attachEvent(ie) 只能得到冒泡阶段。
// 3. 捕获阶段 如果addEventListener 第三个参数是 true
那么则处于捕获阶段 document -> html -> body -> father -> son
// var son = document.querySelector('.son');
// son.addEventListener('click', function() {
// alert('son');
// }, true);
// var father = document.querySelector('.father');
// father.addEventListener('click', function() {
// alert('father');
// }, true);
// 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略
那么则处于冒泡阶段 son -> father ->body -> html -> document
var son = document.querySelector('.son');
son.addEventListener('click', function() {
alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document')
大家可以复制上面的代码去体会一下!
6. 常见事件对象的属性和方法
(1).e.target 返回的是触发事件的对象(元素) 而this 返回的是绑定事件的对象(元素)
(2).e.target 点击了那个元素,就返回那个元素 而this 哪个元素绑定了这个点击事件,就返回谁
7. 定时器
(1). setTimeout
// 语法规范: window.setTimeout(调用函数, 延时时间);
(2). setInterval
// 语法规范: window.setInterval(调用函数, 延时时间);
注意:
setTimeout 延时时间到了,就去调用这个回调函数,只调用一次 就结束了这个定时器
setInterval 每隔这个延时时间,就去调用这个回调函数,会调用很多次,重复调用这个函数
更多精彩内容敬请关注
不愿迟到早退的叻叻白