六，定时函数
超时调用：setTimeout()
window.setTimeout("调用的函数", 等待的毫秒数);
间歇调用：setInterval()
window.setInterval("调用的函数", 间隔的毫秒数);
示例
<!-- 加载完执行的事件 --> <body onload="init()"> </body> <script> function init(){ setTimeout("fun1()",3000); // 3秒(3000毫秒)后执行fun1()函数一次 setInterval("fun2()",2000) // 每隔2秒(2000毫秒)执行一次fun2()函数 } function fun1(){ console.log(1); } function fun2(){ console.log(2); } </script>
6.1，清除函数
clearTimeout()
clearTimeout(setTimeOut()返回的ID值)
clearInterval()
clearInterval(setInterval()返回的ID值)
示例
<!-- 加载完执行的事件 --> <body onload="init()"> <input type="button" value="停止" onclick="stopInterval()"> <input type="button" value="开始" onclick="startInterval()"> </body> <script> var intervalIndex; function init(){ setTimeout("fun1()",3000); // 3秒(3000毫秒)后执行fun1()函数一次 intervalIndex = setInterval("fun2()",2000) // 每隔2秒(2000毫秒)执行一次fun2()函数 } function fun1(){ console.log(1); } function fun2(){ console.log(2); } function stopInterval(){ clearInterval(intervalIndex) } function startInterval(){ intervalIndex = setInterval("fun2()",2000) // 每隔2秒(2000毫秒)执行一次fun2()函数 } </script>
七，写了一个小游戏 （模拟小球移动）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> #box{ border: 1px sandybrown solid; height: 100px; width: 100px; text-align: center; line-height: 100px; border-radius: 50px; position: absolute; left: 100px; } </style> <body> <div id="box">点击开始</div> </body> <script> // 绑定点击事件 /** * 1.画静态页面 * 2.绑定点击事件 * 3.点击一次移动导固定位置（点一次移动一次） * 4.点击一次在原有的基础上移动固定位置（点一次移动一次） * 5.点击一次持续移动 * 6.点击后，能判断出是要停止还是移动 * 7.在停止的对应的代码上，停止循环 * **/ var boxDom = document.getElementById("box"); // 创建一个绑定事件 boxDom.addEventListener("click",isMove); var intervalIndex; function isMove(){ var boxHtml = boxDom.innerHTML // Div文字内容 if(boxHtml=='点击停止'){ // 停止循环 clearInterval(intervalIndex); boxDom.innerHTML="点击开始" }else{ // 开始循环 intervalIndex = setInterval("Move()",10) } } // 方法调用一次移动1px function Move(){ console.log(1); var leftVal = window.getComputedStyle(boxDom).left; console.log(leftVal); leftVal = parseInt(leftVal); leftVal = leftVal+1; boxDom.style.left = leftVal+"px" boxDom.innerHTML="点击停止" } </script> </html>
最后
送大家一句话：变好的过程都不太舒服，试试在努力点
