之后的20个作业，学自【20个JavaScript经典案例-哔哩哔哩】 https://b23.tv/kVj1P5f，加上自己学习的知识组合
支付倒计时
1. 支付10s倒计时
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>支付10s倒计时</title><style>div {width: 200px;height: 200px;background-color: #eee;padding: 20px;margin: 0 auto;}button {margin: 30px 25px;}</style>
</head><body><div><table><tr><td>商品:</td><td>Web前端课程</td></tr><tr><td>原价:</td><td>1980元</td></tr><tr><td>现价:</td><td>1.98元</td></tr><tr><td>内容:</td><td>HTML</td></tr><tr><td>地址:</td><td>北京朝阳区</td></tr><tr></tr><tr><td><button>取消</button></td><td><button>确定</button></td></tr><tr></tr></table></div><script>// 用getElementsByTagName()方法获取button,因为支付是第二个，所以后跟[1],数组从0开始计数，所以是1// 1. 声明范围：// let块作用域// if (true) {// let a1 = 'ss';// console.log(a1); // ss// }// console.log(a1); // ReferenceError// var函数作用域// if (true) {// var a1 = 'ss';// console.log(a1); // ss// }// console.log(a1); //ss// 2. let定义变量不能预解析，提前调用会报错 ReferenceError; var相反，可以预解析，结果为 undefined// console.log(a1); // ReferenceError// console.log(a2); // undefined// let a1 = 'ss';// var a2 = 'as';document.getElementsByTagName('button')[1].onclick = function() {let res = window.confirm('您确定吗？');if (res) {location.href = 'payment.html';}}</script>
</body></html>① 常用输入输出语句：
| alert() = window.alert() | 浏览器弹出警示框 |
| prompt() | 浏览器弹出输入框 |
| console.log() | 浏览器控制台输出信息 |
| document.write() | HTML中输入信息 |
② document 对象，对HTML中的元素进行访问
| body | 对 body 元素直接访问 |
| cookie | 设置或返回文档相关的所有cookie |
| domain | 返回文档域名 |
| title | 返回文档标题 |
| URL | 返回文档URL |
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>console.log(document.body.scrollWidth);console.log(document.cookie);console.log(document.domain);console.log(document.title);console.log(document.URL);</script>
</body></html>
| write() | 写入HTML表达式或JS代码 |
| getElementById() | 返回指定id的第一个对象的引用 |
| getElementByName() | 返回指定名称的对象集合 |
| getElementByTagName() | 返回指定标签名对象集合 |
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>document.write('I am');function reWrite() {document.write('rew');}</script><button onclick="reWrite()">onclick</button>
</body></html>
try1
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {margin: 0 auto;width: 500px;}#sec {color: red;font-size: 30px;}</style>
</head><body><div><h2>恭喜您，支付成功!</h2><p><span id="sec">10</span>s后自动返回首页</p><button>立即返回</button></div><script>window.onload = function() {let timer = 10;setInterval(() => {timer--;document.getElementById('sec').innerText = timer;if (timer == 0) {location.href = 'https://www.bilibili.com';}}, 1000);}document.getElementsByTagName('button')[0].onclick = function() {location.href = 'https://www.bilibili.com';}</script>
</body></html>③ window 对象表浏览器的一个实例，双重角色，即JS访问浏览器窗口的一个接口和ECMAScript的全局对象。
（1）window对象是BOM（Browser Object Model）的核心对象，BOM其他对象，如document、location、navigator、screen、history，就是window对象的子对象。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>var age = 18;console.log(age); //18console.log(window.age); //18function sayAge() {console.log(age);}sayAge(); //18window.sayAge(); //18// 全局定义了变量 age 和函数 sayAge()，// 则它们自动转为window对象的属性或方法，// window.age和window.sayAge()可以访问age和sayAge()</script>
</body></html> 
（2）window对象中两个函数
| 同 | 异 | |
| setTimeout(code/function,milliseconds); | 实现一个函数在指定的时间（毫秒）之后运行 | 几毫秒后运行 |
| setInterval(code/function,milliseconds); | 间隔几毫秒就重复运行 |
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>setTimeout(function() {console.log('hello');}, 1000);setInterval(function() {console.log('hello');}, 1000);var timer = setInterval(function() {console.log('hi');}, 2000);clearInterval(timer); //取消定时器</script>
</body></html>
