一、定时器
1、循环定时器的设置和取消
（1）启动循环定时器：setInterval()
循环定时器，调用一次就会创建并循环执行一个定时器
格式：setInterval(调用方法, 毫秒值);//毫秒值就是循环周期
（2）停止循环定时器clearInterval(定时器ID)
setInterval方法在创建一个定时器的同时，还会返回一个定时器的ID，该ID就代表这个定时器
此定时器ID在当前页面是不能重复的
我们可以通过clearInterval方法，指定某个循环定时器停止
格式：clearInterval(定时器ID);
2、一次性定时器的设置和取消
（1）启动一次性定时器：setTimeout()
一次性定时器，调用一次就会创建并执行一个定时器一次
格式：setTimeout(调用方法,毫秒值);
（2）停止一次性定时器clearTimeout(定时器ID)
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>
<head>
<title>文档标题</title>
</head>
<body>
< a href="">我的链接</ a>
<h1>我的标题</h1>
</body>
</html>
上述HTML文档会被浏览器由上到下依次加载并解析
每个标签会被加载成DOM树上的一个元素节点对象
每个标签的属性会被加载成一个属性节点对象
每个标签的内容体会被加载成一个文本节点对象
整个DOM树，是一个文档节点对象，即DOM对象
一个HTML文档加载到内存中就会形成一个DOM对象
3、DOM树的特点：
必定会有一个根节点
每个节点都是节点对象
常见的节点关系：父子节点关系
文本节点对象没有子节点（叶子节点）
每个节点都有一个父节点，零到多个子节点
只有根节点没有父节点
四、获取元素对象的四种方式
在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、一个事件只能绑定一个函数，解决：匿名函数内部是可以绑定多个函数的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>倒计时</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
span{
display: inline-block;
width: 60px;
height: 60px;
border-radius: 50%;
background: black;
color: white;
font-size: 30px;
text-align: center;
line-height: 60px;
}
i{
font-style: normal;
font-size: 20px;
}
</style>
</head>
<body>
<span id="hs">1</span>
<i>:</i>
<span id="ms">59</span>
<i>:</i>
<span id="ss">47</span>
</body>
</html>
<script type="text/javascript">
//倒计时
var count = 1;
var Counter;
function countDown(){ //调用
Counter = setInterval(f,1000);
}
countDown(); //自运行
//倒计时
function f(){
var hs = Number(document.getElementById("hs").innerHTML);
var ms = Number(document.getElementById("ms").innerHTML);
var ss = Number(document.getElementById("ss").innerHTML);
if(hs==0&&ms==0&&ss==0||ss>60||ms>60||hs>24){
var hs = document.getElementById("hs").innerHTML = "00";
var ms = document.getElementById("ms").innerHTML = "00";
var ss = document.getElementById("ss").innerHTML = "00";
clearInterval(Counter);
console.log(count);
return;
}
if(ss>0){
ss--;
document.getElementById("ss").innerHTML = ss;
count++;
}
if(ss==0){
if(ms>0){
ms--;
document.getElementById("ms").innerHTML = ms;
document.getElementById("ss").innerHTML = 59;
}
}
if(ms==0){
if(hs>0){
hs--;
document.getElementById("hs").innerHTML = hs;
document.getElementById("ms").innerHTML = 59;
}
}
}
</script>
