md文档建议使用Typora打开。适用于才学完html+css+js后的巩固复习练习，其中包含一个完整的音乐播放的项目，界面十分美观，也用到了很多所学知识，同时也配有十分详细的代码说明，能很好地复习所学内容。
### JavaScript小练习与HTML+CSS+JavaScript完整项目分析
#### 一、支付倒计时功能实现
在这份文档中，我们首先看到的是一个简单的支付倒计时功能的实现。这个功能涉及到了HTML、CSS和JavaScript的基本应用，非常适合初学者进行实践。
**HTML结构**:
```html
<!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>
<body>
<div>
<p>商品: Web前端课程</p>
<p>原价: 1980元</p>
<p>现价：1.98元</p>
<p>内容：HTML, CSS, JS</p>
<p>
<button>取消</button>
<button>支付</button>
</p>
</div>
<script>
document.getElementsByTagName('button')[1].onclick = function () {
let res = window.confirm('您确定要支付吗');
if (res) {
location.href = './succ.html';
}
}
</script>
</body>
</html>
```
**解析**:
- HTML部分定义了一个商品的基本信息，包括名称、价格等。
- 通过JavaScript监听支付按钮点击事件，弹出确认框询问用户是否确认支付。
- 如果用户确认，则跳转到支付成功的页面(`./succ.html`)。
**支付成功页面**:
```html
<!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>
<body>
<div>
<h2>恭喜你, 支付成功</h2>
<span id="jumpTo">10</span>秒后自动返回首页
<p><button>立即返回</button></p>
</div>
<script>
// 触发定时器10s
window.onload = function() {
let timer = 10;
setInterval(() => {
timer--;
document.getElementById('jumpTo').innerText = timer;
if (timer == 0) {
location.href = 'https://jinwen01.ke.qq.com';
}
}, 1000);
}
document.getElementsByTagName('button')[0].onclick = function() {
location.href = 'https://jinwen01.ke.qq.com';
}
</script>
</body>
</html>
```
**解析**:
- 在支付成功页面，利用`setInterval`实现10秒倒计时功能。
- 倒计时结束后，自动跳转到指定的首页。
- 同时提供了一个“立即返回”的按钮，用户可以提前结束倒计时并跳转到首页。
#### 二、location.href属性的多种用法
文档中还提到了`location.href`的不同用法，这对于理解页面跳转非常重要。
**基本用法总结**:
1. **self.location.href="/url"**: 当前页面打开URL页面。
2. **location.href="/url"**: 当前页面打开URL页面。
3. **windows.location.href="/url"**: 当前页面打开URL页面。
4. **this.location.href="/url"**: 当前页面打开URL页面。
5. **parent.location.href="/url"**: 在父页面打开新页面。
6. **top.location.href="/url"**: 在顶层页面打开新页面。
**应用场景解析**:
- `self.location.href`、`location.href`和`windows.location.href`通常用于在同一页面内进行重定向。
- `this.location.href`在特定情况下（如函数内部）可能有用。
- `parent.location.href`和`top.location.href`常用于处理嵌套的窗口或框架环境中的页面跳转。
#### 三、综合项目分析
根据文档描述，这份资料中还包含了一个综合性的音乐播放项目，该项目结合了HTML、CSS和JavaScript，具有较高的实用性。
**项目特点**:
- **界面美观**: 设计了吸引人的用户界面，增强用户体验。
- **功能齐全**: 实现了音乐播放的基本功能，如播放、暂停、上一曲、下一曲等。
- **详细代码说明**: 提供了详尽的代码注释和文档，帮助学习者更好地理解和掌握技术要点。
这份文档提供的练习和项目不仅有助于巩固HTML、CSS和JavaScript的基础知识，还能通过实际操作加深对这些技术的理解。对于刚学完这些基础技术的学习者来说，这是一个很好的实践机会。
