1,定时器
-
setTimeout
-
setInterval
-
clearInterval
-
clearTimeout
1.1setTimeout() 定时器
window.setTimeout(调用函数 [,延迟的毫秒数]);
// 该定时器在定时器到期后执行调用函数 注意： 1-window 可以省略 2-这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名（）’ 三种形式 3-延迟的毫秒数省略默认为 0，如果写必须是毫秒 4-因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
1.2 停止 setTimeout() 定时器
window.clearTimeout(timeoutID)
// 取消了先前通过调用 setTimeout() 建立的定时器 注意： 1-window 可以省略 2-里面的参数就是定时器的标识符
<script>
setTimeout(function() {
console.log('这是123');
}, 2000);
function callback() {
console.log('这是456');
}
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
// setTimeout('callback()', 3000);
</script>
1.3 setInterval() 定时器
window.setInterval(回调函数 [,间隔毫秒数]);
// 重复调用一个函数，每个这个时间，就去调用一次回调函数
注意：
1这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名（）’三种形式
2间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数
3因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
4第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次
1.4 停止 setInterval() 定时器
window.clearInterval(intervalID)
// 取消了先前调用 setInterval() 建立的定时器 注意: 1-window 可以省略 2-里面的参数就是定时器标识符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
手机号码： <input type="number"> <button>发送</button>
<script>
// 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
// 里面秒数是有变化的，因此需要用到定时器
var btn = document.querySelector('button');
var time = 3; // 定义剩下的秒数
btn.addEventListener('click', function() {
btn.disabled = true; // 按钮点击之后，会禁用 disabled 为true
var timer = setInterval(function() {
if (time == 0) {// 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
// 清除定时器和复原按钮
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
} else {
btn.innerHTML = '还剩下' + time + '秒';
time--;// 定义一个变量，在定时器里面，不断递减
}
}, 1000);
})
</script>
</body>
</html>
六、改变 HTML 元素【内容】 javascript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等操作。注意以下都是属性。
方法 描述
element.innerHTML = new html content 改变元素的 HTML 内容
element.innerTEXT = new text 改变元素的文本内容
element.attribute = new value 改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值 element.hasAttribute(attribute) 判断元素是否有该属性
element.removeAttribute(attribute) 删除元素属性
element.style.property = new style 改变 HTML 元素的样式
