一.外部对象概述
- 外部对象本质上就是浏览器的API.
- 外部对象包括BOM和DOM,它们是包含关系.
二.动态时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>p {width: 200px;height: 30px;line-height: 30px;font-size: 20px;text-align: center;border: 1px solid red;} </style>
<script>var id;function start() {
if(id) {return;}id = setInterval(function(){
var date = new Date();var now = date.toLocaleTimeString();var p = document.getElementById("clock");p.innerHTML = now;},1000);}function stop() {
clearInterval(id);id = null;} </script>
</head>
<body><input type="button" value="开始"onclick="start();"/><input type="button" value="停止"onclick="stop();"/><p id="clock"></p>
</body>
</html>
三.发送消息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>p {width: 200px;height: 30px;line-height: 30px;text-align: center;border: 1px solid red;} </style>
<script>var id;function send() {
if(id) {return;}var p = document.getElementById("msg");p.innerHTML = "正在发送...";id = setTimeout(function(){
p.innerHTML = "已发送";id = null;},3000);}function cancel() {
if(id) {var p = document.getElementById("msg");p.innerHTML = "已撤消";clearTimeout(id);id = null;}} </script>
</head>
<body><input type="button" value="发送"onclick="send();"/><input type="button" value="撤消"onclick="cancel();"/><p id="msg"></p>
</body>
</html>
四.DOM概述
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>window.onload = function(){
var p1 = document.getElementById("p1");console.log(p1.nodeName);console.log(p1.nodeType);var p2 = document.getElementById("p2");console.log(p2.innerHTML);p2.innerHTML = "2.DOM提供了<u>查询</u>节点的方法";var p3 = document.getElementById("p3");console.log(p3.innerText);p3.innerText = "3.DOM提供了<u>增删</u>节点的方法";} </script>
</head>
<body><p id="p1">1.DOM提供了<b>读写</b>节点的方法</p><p id="p2">2.DOM提供了<b>查询</b>节点的方法</p><p id="p3">3.DOM提供了<b>增删</b>节点的方法</p>
</body>
</html>
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>function f1() {
var b = confirm("您确定要清空购物车吗?");if(b) {console.log("购物车已清空");}}function f2() {
var n = 5;var id = setInterval(function(){
console.log(n--);if(n==0) {clearInterval(id);console.log("DUANG!");}},1000);console.log("BOOM!");}var id;function f3() {
console.log("显示广告");id = setTimeout(function(){
console.log("自动关闭广告");},5000);}function f4() {
clearTimeout(id);} </script>
</head>
<body><input type="button" value="清空"onclick="f1();"/><input type="button" value="倒计时"onclick="f2();"/><input type="button" value="广告"onclick="f3();"/><input type="button" value="看广告"onclick="f4();"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>function f1() {
var b = confirm("您确定要离开本页吗?");if(b) {location.href = "http://www.tmooc.cn";}}function f2() {
location.reload();}function f3() {
history.forward();}console.log(screen.width);console.log(screen.height);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>