之后的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) {// var 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 |
| write() | 写入HTML表达式或JS代码 |
| getElementById() | 返回指定id的第一个对象的引用 |
| getElementByName() | 返回指定名称的对象集合 |
| getElementByTagName() | 返回指定标签名对象集合 |
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>
