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 元素的样式
