一、定时器
1、循环定时器的设置和取消
(1)启动循环定时器:setlnterval()
循环定时器,调用一次就会创建并循环执行一个定时器
格式:setInterval(调用方法,毫秒值); //毫秒值就是循环周期
(2)停止循环定时器clearInterval()
setInterval方法在创建一个定时器的同时,还会安徽一个定时器的ID,该ID就代表这个定时器
此定时器ID在当前页面是不能重复的
我们可以通过clearInterval()方法,指定摸个循环定时器停止
格式 : clearInterval(定时器ID);
2、一次性定时器的设置和取消
(1)启动一次性定时器:setTimeout()
一次性定时器,调用一次就会创建并执行一个定时器一次
格式:setTimeout(调用方法,毫秒值);
(2)停止一次性定时器clearTimeout()
setTimeout方法在创建一个定时器的同时,还会返回一个定时器的ID,该ID就代表这个定时器
此定时器ID在当前页面是不能重复的
我们可以通过clearTimeout方法,指定某个一次性定时器停止
格式:clearTimeout(定时器ID);
二、location对象
location 对象包含浏览器地址栏信息
常用属性:href 设置或返回完整的URL
设置href属性,浏览器就会跳转到对应的路径
三、DOM对象
1、DOM对象是什么?有什么作用?
DOM(Document Object Model) 文档对象模型
文档:标记型文档(HTML等)
DOM是将标记型文档中所有内容(标签、文本、属性)都封装成对象,通过操作对象的属性或方法,来达到操作或者改变HTML展示效果的目的
2、DOM树介绍
我的标题
上述HTML文档会被浏览器由上到下依次加载并解析
每个标签会被加载成DOM树上的一个元素节点对象
每个标签的属性会被加载成一个属性节点对象
每个标签的内容体会被加载成一个文本节点对象
整个DOM树,是一个文档节点对象,即DOM对象
一个HTML文档加载到内存中就会形成一个DOM对象
3、DOM树的特点
必定会有一个跟节点
每个节点都是节点对象
常见的节点关系: 父子节点关系
文本节点对象没有子节点(叶子节点)
每个节点都有一个父节点,零到多个子节点
只有根节点没有父节点(html)
四、获取元素对象的四种方式
在JavaScript中,我们可以通过DOM对象的4种方式获取对应的元素对象:
getElementById(); 通过元素ID获取对应元素对象,如果找不到,返回null
getElementsByName(); 通过元素的name属性获取符合要求的所有元素,如果找不到,返回空数组
getElementsByTagName(); 通过元素的元素名属性获取符合要求的所有元素,如果找不到,返回空数组
getElementsByClassName(); 通过元素的class属性获取符合要求的所有元素,如果找不到,返回空数组
注:获取某个(些)元素节点对象,必须保证元素节点对象先被加载到内存中
五、元素对象常见属性
value
元素对象.value,获取元素对象的value属性值
元素对象.value=属性值,设置元素对象的value属性值
className
元素对象.className,获取元素对象的class属性值
元素对象.className=属性值,设置元素对象的class属性值
checked
元素对象.checked,获取元素对象的checked属性值
元素对象.checked=属性值,设置元素对象的checked属性值,修改单选/复选的选中与否
注:HTML中checked="checked",JavaScript中返回true
innerHTML
元素对象.innerHTML,获取元素对象的内容体
元素对象.innerHTML=值,设置元素对象的内容体
六、JS事件
1、JS事件是什么?有什么作用?
通常鼠标或热键的动作我们称之为事件(Event),例如点击、表单提交、值发生改变、鼠标移入、移出……
通过JS事件,我们可以完成页面的指定特效
2、JS事件驱动机制简述
页面上的特效,我们可以理解在JS事件驱动机制下进行
JS事件驱动机制:
事件源:专门产生事件的组件
事件:由事件源所产生的动作或者事情
监听器:专门处理事件源所产生的事件
注册/绑定监听器:让监听器时刻监听事件源是否有指定事件产生,如果事件源产生指定事件,则调用监听器处理
事件源:小偷(因为偷了东西被抓)
事件:偷东西(由小偷引起的)
监听器:警察(专门处理小偷偷东西的事情的)
注册/绑定监听器:让警察时刻盯着小偷(偷了就马上抓)
3、常见的JS事件
(1)点击事件(onclick)
点击事件:由鼠标或热键点击元素组件时触发
(2)焦点事件
获取焦点事件(onfocus)
焦点:即整个页面的注意力
默认一个正常页面最多仅有一个焦点
例如:文本框中闪烁的小竖线
通常焦点也能反映出用户目前的关注点,或者正在操作的组件
获取焦点事件:当元素组件获取焦点时触发
失去焦点事件(onblur)
失去焦点事件:元素组件失去焦点时触发
(3)域内容改变事件(onchange)
域内容改变事件:元素组件的值发生改变时触发
(4)加载完毕事件(onload)
加载完毕事件:元素组件加载完毕时触发
获取元素对象时,要保证元素对象先加载,建议是把获取元素对象的代码放在body最后,如果想放在前面,也可以写在onload中
(5)表单提交事件(onsubmit)
表单提交事件:表单的提交按钮被点击时触发
注意:该事件需要返回boolean类型的值来执行提交/阻止表单数据的操作
事件得到true,提交表单数据
事件得到false,阻止表单数据提交
(6)键位弹起事件(onkeyup)
键位弹起事件:在组件中输入某些内容时,键盘键位弹起时触发该事件
(7)常用鼠标事件
鼠标移入事件(onmouseover)
鼠标移入事件:鼠标移入某个元素组件时触发
鼠标移出事件(onmouseout)
鼠标移出事件:鼠标移出某个元素组件时触发
4、JS事件的两种绑定方式
(1)元素事件句柄绑定
将事件以元素属性的方式写到标签内部,进而绑定对应函数
事件句柄绑定方式
优点:1、开发快捷;2、传参方便;3、可以绑定多个函数
缺点:JS和HTML代码高度揉合在一起,不利于多部门的项目开发维护
(2)DOM绑定方式
使用DOM的属性方式绑定事件
DOM绑定方式
优点:使得HTML代码和JS代码完全分离
缺点:1、不能传递参数,解决:匿名函数是可以的;2、一个事件只能绑定一个函数,解决:匿名函数内部是可以绑定多个函数的
window.onload = function(){
var oDiv = document.getElementById('div1');
timeLeft();
setInterval(timeLeft,1000);
function timeLeft(){
var now = new Date();// 客户端时间
var future = new Date(2020,3,1,0,0,0);// 结束时间
// console.log(future-now); // 打印日志
var milli = parseInt((future-now)/1000); // 获取秒
if(milli<=0){
window.location.href = "http://www.baidu.com";
} // 如果时间到 跳转到百度
var day = parseInt(milli/86400);// 取整天数 60秒*60分*24小时=86400
var hour = parseInt((milli%86400)/3600);// 60秒*60分 =3600 取小时
var mintue = parseInt(((milli%86400)%3600)/60);// 取分钟
var second = milli % 60;//秒
oDiv.innerHTML ='距离2020年04月01日00时00分00秒还有' + day + '天'+toDouble(hour)+'时'+toDouble(mintue)+'分'+toDouble(second)+'秒';
}
}
function toDouble(num){
if(num<10){
return '0'+num;
}else{
return num;
}
}