第六天
一、定时器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><head><title>文档标题</title></head><body><a href="">我的连接</a><h1>我的标题</h1></body></html>上述HTML文档会被浏览器由上到下依次加载并解析每个标签会被加载成DOM树上的一个元素节点对象每个标签的属性会被加载成一个属性节点对象每个标签的内容体会被加载成一个文本节点对象整个DOM树，是一个文档节点对象，即DOM对象一个HTML文档加载到内存中就会形成一个DOM对象3、DOM树的特点必定会有一个跟节点每个节点都是节点对象常见的节点关系： 父子节点关系文本节点对象没有子节点（叶子节点）每个节点都有一个父节点，零到多个子节点只有根节点没有父节点（html）四、获取元素对象的四种属性在javaScript中，我们可以通过DOM对象的4种方式获取对应的元素对象。getElementByid(); 通过元素ID获取对应蒜素对象，如果找不到，返回nullgetElementsByName(); 通过元素的name属性获取符合要求的所有元素，如果找不到，返回空数组getElementByTagName(); 通过元素的元素名属性获取符合要求的所有元素，如果找不到，返回空数组getElementsByClassName(); 通过元素的class属性获取符合要求的所有元素，如果占不到，返回空数组注：获取魔偶个（些）元素节点对象，必须保证元素节点对象被加载到内存中五、与三俗对象常见属性value元素对象.value，获取元素对象的value属性值className元素对象.className，获取元素对象的class属性元素对象.className=属性值，设置元素对象class属性值checked元素对象.checked，获取元素的checked属性值元素对选哪个.checked=属性值，设置元素对象的checked属性值，修改单选/复选的选中与否注：HTML中checked="checked"，javascriot中返回trye innerHtml元素对象.innerHTML，获取元素对象的内容体元素对象.innerHTML=值，设置元素对象的内容体六、js事件1、js事件是什么？有什么作用？通常鼠标或热键的动作我们称之为事件（Event），例如点击，标案提交，值发生改变，鼠标移入，移出。。。通过js事件，我们可以全程页面的指定特效2、js事件驱动机制简述页面上的特效，我们乐意理解在js事件驱动机制下进行js事件驱动机制： 事件源：专门产生事件的组件事件：由事情源所产生的动作或者事件监听器：专门处理事件源所产生的事情注册/绑定监听器：让监听器时刻监听事件源是否制定事件产生，如果事件源产生制定事件，则用监听器处理3、常见的js事件（1）点击事件点击事件：有鼠标或热键点击元素组件时触发（2）焦点事件获取焦点事件（oncfocus）焦点：即整个页面做多仅有一个焦点例如：文本框中闪烁的小竖线通常焦点也能反映出用户目前的关注点，或者正在操作的组件获取焦点事件：当元素组件获取焦点时触发失去焦点事件（onblur） 失去焦点事件：元素组件失去焦点时触发（3）域内蓉改变事件（onchange）域内容改变事件，元素组件的值发生改变时触发（4）加载完毕事件（obload）加载完毕事件：元素组成加载完毕时触发获取元素对象时，要保证元素对象先加载，建议是吧元素对象的代码放在body最后，如果想放在前面，也可以写在onload中（5）表单提交事件（onsubmit）表单提交事件：表单的提交按钮被点击时触发注意：改时间需要返回boolean类型的值来执行提交/阻止表单数据的操作 事件得到true 提交表单数据 事件得到false 阻止表单数据提交（6）键位弹起事件，在组件中输入某些内容时，键盘键位弹起时触发该事件（7）常用鼠标事件鼠标移入事件（onmouseover）鼠标移入事件：鼠标移入某个元素组件时触发鼠标移出事件（onmouseout）鼠标移出事件：鼠标移出某个元素组件时触发4、js事件的两种绑定方式（1）元素事件句柄绑定将事件以元素的方式写到标签内部，进而绑定对应函数事件句柄绑定方式优点：1、开发快捷；2、传参方便；3、可以绑定多个函数缺点：js和HTML代码高度柔和在一起，不利于多部门的项目开发维护（2）DOM绑定方式使用DOM的属性方式绑定事件DOM绑定方式：优点：使用HTML代码和JS代码完全分离缺点：1、不能传递参数（解决：匿名函数是可以的）；2、一个事件只能绑定一个函数，（解决：匿名函数内部可以绑定对个函数的）
倒计时
<!DOCTYPE html>
<html>
<head>
<title>倒计时</title>
<script>
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;
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
