标签：ini 并且 function cti contract top size navigator head
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> //1.确认框 function del() { var b = confirm("确定要删除此数据吗?"); console.log(b); } //2.周期性定时器 function f1() { //启动周期性定时器: //告诉浏览器每隔1000ms调用一次函数. //返回值是定时器的ID,用来停止定时器. var n = 5; var id = setInterval(function(){ console.log(n--); if(!n) { //停止定时器 clearInterval(id); console.log("DUANG"); } },1000); //当前方法f1相当于主线程, //启动定时器相当于启动支线程, //主线程不等待支线程,启动完成后, //立刻执行下一行,即输出了BOOM. //支线程在等待1S后才第一次运行. console.log("BOOM"); } //3.一次性定时器 var id; function f2() { //启动一次性定时器: //让浏览器在5000ms后调用函数, //并且调用一次后就自动停止定时器. id = setTimeout(function(){ console.log("叮叮叮叮叮叮"); },5000); } function f3() { clearTimeout(id); } </script> </head> <body> <input type="button" value="删除" onclick="del();"/> <input type="button" value="倒计时" onclick="f1();"/> <input type="button" value="订闹钟" onclick="f2();"/> <input type="button" value="取消" onclick="f3();"/> </body> </html>
电子时钟显示小案例：setInterval
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> #clock { border: 1px solid red; width: 200px; height: 40px; line-height: 40px; font-size: 20px; text-align: center; } </style> <script> //开始 var id; function start1() { if(id) { //id非空,表示定时器已启动,不必再次启动了 return; } //id为空,表示未启动,则启动定时器 id = setInterval(function(){ var d = new Date(); var p = document.getElementById("clock"); p.innerHTML = d.toLocaleTimeString(); },1000); } //停止 function stop1() { clearInterval(id); //停止时清空id,以便于下一次启动 id = null; } </script> </head> <body> <p> <input type="button" value="开始" onclick="start1();"/> <input type="button" value="停止" onclick="stop1();"/> </p> <p id="clock"></p> </body> </html>
发送消息小案例：setTimeout
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> #msg { border: 1px solid red; width: 150px; height: 40px; line-height: 40px; text-align: center; font-size: 20px; } </style> <script> //发送 var id; function send1() { if(id) { //id非空,表示已启动,不要启动第2次 return; } //id为空,表示未启动,则启动定时器 //显示正在发送 var p = document.getElementById("msg"); p.innerHTML = "正在发送..."; //延迟3秒,真正发送 id = setTimeout(function(){ p.innerHTML = "已发送"; id = null; },3000); } //撤销 function cancel1() { if(id) { //id非空,表示已启动,此时可以撤销 var p = document.getElementById("msg"); p.innerHTML = "已撤销"; clearTimeout(id); id = null; } //id为空,表示未启动,不必撤销 } </script> </head> <body> <p> <input type="button" value="发送" onclick="send1();"/> <input type="button" value="撤销" onclick="cancel1();"/> </p> <p id="msg"></p> </body> </html>
知识点：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> //1.location function f1() { var b = confirm("确定要离开吗?"); if(b) { location.href = "http://www.tmooc.cn"; } } function f2() { location.reload(); } //2.history function f3() { history.forward(); } //3.screen console.log(screen.width); console.log(screen.height); console.log(screen.availWidth); console.log(screen.availHeight); //4.navigator console.log(navigator.userAgent); </script> </head> <body> <input type="button" value="达内" onclick="f1();"/> <input type="button" value="刷新" onclick="f2();"/> <input type="button" value="前进" onclick="f3();"/> </body> </html>
Unit06： 外部对象概述 、 window 对象 、 document 对象
标签：ini 并且 function cti contract top size navigator head
原文地址：http://www.cnblogs.com/tangshengwei/p/6391688.html
