JavaScript基础

简介

定义：是一种运行在客户端（浏览器）的编程语言。
组成：ECMAScript(基础语法)、webapi(DOM、BOM)
配套视频： https://www.bilibili.com/video/BV1Y84y1L7Nn

入门体验

DOM切换按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="zh-CN">

<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>01-体验js</title>
    <!-- css -->
    <style>
        .pink {
            background-color: pink;
        }
    </style>
</head>
  
<body>
	<!-- html -->
    <button class="pink">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <!-- js -->
    <script>
        let bts = document.querySelectorAll('button')
        for (let i = 0; i < bts.length; i++) {
            bts[i].addEventListener('click', function () {
                document.querySelector('.pink').className = ''
                this.className = 'pink'
            })
        }
    </script>
</body>

</html>

基础

JavaScript书写位置

js的书写位置：

  • 内部
  • 外部
  • 行内

内部
image.png

外部
image.png

行内（VUE框架用这种方式）
image.png

注意事项：

  • 书写的位置，尽量写到文档末尾</body>前面（html顺序加载，避免js未获取到元素）
  • 外部js标签中间不要写代码，否则会被忽略

变量与常量

变量的初始化

1
let age=18

变量名的命名规范
遵守小驼峰命名法

1
let userName='张三'

let和var的区别
image.png
常量声明

1
const PI=3.14

案例
输入数量和收货地址，生成订单信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h2 {
            text-align: center;
        }
        table {
            margin: 0 auto;
            width: 80%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <h2>订单确认</h2>
    <!--
    1.<table>: 代表一个HTML表格的开始和结束。所有的表格内容都放在<table>标签内。
    2.<tr>: 代表一个表格行（table row）。一个表格通常由多个行组成，每一行都是由<tr>标签包裹的。
    3.<th>: 代表一个表格的表头（table header）。表头通常由粗体居中的文本组成。
    4.<td>: 代表一个表格单元格（table data）。表格单元格通常用于显示数据，并且可以包含文本、图片、链接等。
    -->
    <script>
        let num= +prompt("请输入购买数量:")
        let address= prompt("请输入收货地址:")
        document.write(`
            <table>
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>总价</th>
                    <th>收货地址</th>
                </tr>
                <tr>
                    <td>javascript课程</td>
                    <td>10.00</td>
                    <td>${num}</td>
                    <td>${num*10.00}</td>
                    <td>${address}</td>
                </tr>
            </table>
        `)
    </script>



</body>
</html>

image.png

数据类型

简单数据类型，存的 值，在栈
复杂数据类型，存的 地址，在堆

语句

分支语句

if语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script>

        // 单分支语句
        // if (3 > 5) {
        //     console.log('执行语句')
        // }

        // if (2 === '2') {
        //     console.log('执行语句')
        // }

        // 除了0  所有的数字都为真
        // if (0) {
        //     console.log('执行语句')
        // }

        // 除了''  所有的字符串都为真 true
        // if ('pink') {
        //     console.log('执行语句')
        // }

        // if ('') {
        //     console.log('执行语句')
        // }
        
        // 1. 用户输入
        let score = +prompt('请输入成绩：')
        // 2. 判断输出
        if (score >= 90) {
            alert('成绩优秀，宝贝，你是我的骄傲')
        } else if (score >= 70) {
            alert('成绩良好，宝贝，你要加油哦~~')
        }
        else if (score >= 60) {
            alert('成绩及格，宝贝，你要危险~')
        } else {
            alert('成绩不及格，宝贝，我不想和你说话，我只想用鞭子和你说话~')
        }
        console.log('------------------')
    </script>

image.png

记忆：’’、0、undefined、null、false、NaN 转换为布尔值都是false，其余则为true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script>
    console.log(Boolean('pink')) // true
    console.log(Boolean('')) // false
    console.log(Boolean(0)) // false
    console.log(Boolean(90)) // true
    console.log(Boolean(-1)) // true
    console.log(Boolean(undefined)) // false
    console.log(Boolean(null)) // false
    console.log(Boolean(NaN)) // false

    // 记忆：''、0、undefined、null、false、NaN 转换为布尔值都是false，其余则为true

    console.log('------------------------------')

    let age
    if (age) {
        console.log(11)
    }

    // && 一假则假
    console.log(false && 20) // false
    console.log(5 < 3 && 20) // false
    console.log(undefined && 20) // undefined
    console.log(null && 20) // null
    console.log(0 && 20) // 0
    console.log(10 && 20) // 20

    console.log('------------------------------')

    // || 一真则真
    console.log(false || 20) // 20
    console.log(5 < 3 || 20) // 20
    console.log(undefined || 20) // 20
    console.log(null || 20) // 20
    console.log(0 || 20) // 20
    console.log(10 || 20) // 10

    // 隐式转换：
    // 1. 有字符串的加法 ""+1，则结果是 "1"
    // 2. 减法 - （像大多数数学运算一样）只能用于数字，它会使空字符串 "" 转换为 0  // '2'-2=0  // ''-2=-2
    // 3. null 经过数字转换之后会变为 0  // null+3=3
    // 4. undefined 经过数字转换之后会变为 NaN

    // null == undefined // true
    // null === undefined // false

    console.log('------------------------------')

    // undefined - 2 // NaN
    console.log('' - 1) // -1
    console.log('pink老师' - 1) // NaN
    console.log(null + 1) // 1
    console.log(undefined + 1) // NaN
    console.log(NaN + 1) // NaN
</script>

三元运算

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    // 三元运算符
    // 条件 ? 代码1 ： 代码2
    // console.log(3 > 5 ? 3 : 5)
    // if (3 < 5) {
    //     alert('真的')
    // } else {
    //     alert('假的')
    // }
    // 3 < 5 ? alert('真的') : alert('假的')
    let sum = 3 < 5 ? 3 : 5
    console.log(sum)
</script>

switch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    switch (4) {
        case 1:
            console.log('您选择的是1')
            break // 退出switch
        case 2:
            console.log('您选择的是2')
            break // 退出switch
        case 3:
            console.log('您选择的是3')
            break // 退出switch
        default:
            console.log('没有符合条件的')
    }
</script>
  1. switch case语句一般用于等值判断，不适合于区间判断；
  2. switch case一般需要配合break关键字使用，没有break会造成case穿透

循环语句

while 循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
    // 打印5句话
    // let i = 1
    // while (i <= 5) {
    //     if (i === 3) {
    //         break // 退出整个循环
    //     }
    //     console.log(`我要吃第${i}个包子`)
    //     i++
    // }

    let i = 1
    while (i <= 5) {
        if (i === 3) {
            i++
            continue // 结束本次循环，继续下一轮循环
        }
        console.log(`我要吃第${i}个包子`)
        i++
    }
</script>

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="zh-CN">

<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>20-综合案例-简易ATM取款机</title>
</head>

<body>
    <script>
        // 3. 准备一个总的金额
        let money = 100
        // 1. 开始循环
        while (true) {
            let re = +prompt(`
            请您选择操作：
            1.存钱
            2.取钱
            3.查看余额
            4.退出`)
            // 2. 如果用户输入的 4 ，则退出循环，break
            if (re === 4) {
                break
            }
            // 4. 根据输入做操作
            switch (re) {
                case 1:
                    // 存钱
                    let cun = +prompt('请输入存款金额：')
                    // money = money + cun
                    money += cun
                    break
                case 2:
                    // 存钱
                    let qu = +prompt('请输入取款金额：')
                    // money = money - qu
                    money -= qu
                    break
                case 3:
                    // 查看金额
                    alert(`您的银行卡余额是${money}`)
                    break
            }
        }
    </script>
</body>

</html>

for循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>  
<html lang="zh-CN">  
  
<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>07-99乘法表</title>  
    <style>        span {  
            display: inline-block;  
            width: 100px;  
            padding: 5px 10px;  
            border: 1px solid pink;  
            margin: 2px;  
            border-radius: 5px;  
            box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);  
            background-color: rgba(255, 192, 203, .1);  
            text-align: center;  
        }  
    </style>  
</head>  
  
<body>  
<script>  
    // 1. 外层循环控制行数  
    for (let i = 1; i <= 9; i++) {  
        // 2. 里层循环控制列数  
        for (let j = 1; j <= i; j++) {  
            document.write(`<span>${j} * ${i} = ${i * j}</span>`)  
        }  
        // 换行  
        document.write('<br />')  
    }  
</script>  
</body>  
  
</html>

数组

在Java、C++、C# 等编程语言中数组中要求相同类型的元素，而在javascript中却可以存储不同类型的元素，但会带来一定的性能开销。
基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="zh-CN">

<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>数组操作</title>
</head>

<body>
    <script>
        let arr = ['pink', 'hotpink']
        // 新增  push  推  末尾
        // console.log(arr.push('deeppink')) // 3
        // arr.push('deeppink', 'linghpink')
        // console.log(arr)

        // 开头追加
        arr.unshift('red')
        console.log(arr)
    </script>
    <script>
        let arr = ['red', 'green', 'blue']
        // console.log(arr.pop()) // blue
        // 1. pop() 删除最后一个元素
        // arr.pop()
        // console.log(arr)

        // 2. shift() 删除第一个元素
        // arr.shift()
        // console.log(arr)

        // 数组.splice() 方法  删除指定元素
        // 语法：
        // arr.splice(start, deleteCount)
        // arr.splice(起始位置, 删除几个元素)
        // 解释：
        // start 起始位置
        //     指定修改的开始位置（从0计数）
        // deleteCount：
        //     表示要移除的数组元素的个数
        //     可选的。如果省略则默认从指定的起始位置删除到最后

        // 3. splice 删除指定元素 splice(起始位置-索引号, 删除几个)
        arr.splice(1, 1)  // 是从索引号1的位置开始删，只删除1个  // 删除green 一个元素
        //arr.splice(1) // 从green删除到最后
        console.log(arr)
    </script>  
    <script>
        // let arr = [5, 4, 3, 2, 1]

        let arr = [2, 4, 3, 5, 1]
        // for (let i = 0; i < arr.length - 1; i++) {
        //     for (let j = 0; j < arr.length - i - 1; j++) {
        //         // 开始交换，但是前提 第一个数大于第二个数才交换
        //         if (arr[j] > arr[j + 1]) {
        //             // 交换2个变量
        //             let temp = arr[j]
        //             arr[j] = arr[j + 1]
        //             arr[j + 1] = temp
        //         }
        //     }
        // }

        // arr.sort() // 排序，由小到大（升序）
        // sort 升序排列
        // arr.sort(function (a, b) {
        //     return a - b
        // })

        // sort 降序
        arr.sort(function (a, b) {
            return b - a
        })
        console.log(arr)

        // let num1 = 10
        // let num2 = 20
        // let temp = num1
        // num1 = num2
        // num2 = temp

        // 1. 一共需要的趟数，我们用外层for循环
        //     5个数据我们一共需要走4趟
        //     长度就是 数组长度 减去1 arr.length-1
        // 2. 每一趟交换次数，我们用里层for循环
        //     第一趟 交换 4 次
        //     第二趟 交换 3 次
        //     第三趟 交换 2 次
        //     第四趟 交换 1 次
        //     长度就是 数组长度 减去 次数
        //     但是我们次数是从 0 次开始的，所以，最终 arr.length-i-1
        // 3. 交换2个变量就好了
    </script>      
</body>

</html>

函数

为什么需要函数

可以实现代码复用，提高开发效率。

函数是什么

function执行特定任务的代码块

函数的使用

1.声明
2.调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="zh-CN">

<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>10-求最大值函数</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 1. 求最大值函数
        // function getMax(x, y) {
        //     return x > y ? x : y
        // }
        // let max = getMax(11, 234)
        // console.log(max)


        // 2. 求任意数组的最大值，并且返回
        // function getArrValue(arr = []) {
        //     // (1) 先准备一个max变量存放数组的第一个值
        //     let max = arr[0]
        //     // (2) 遍历比较
        //     for (let i = 1; i < arr.length; i++) {
        //         if (max < arr[i]) {
        //             max = arr[i]
        //         }
        //     }
        //     // (3) 返回值
        //     return max
        // }
        // // let max = getArrValue([1, 3, 5, 7, 9])
        // // let num = prompt('请输入：')
        // let max = getArrValue([11, 3, 55, 7, 29])
        // // console.log(max)

        // const div = document.querySelector('div')
        // div.innerHTML = max


        // 3. 求任意数组的最大值和最小值，并且返回
        function getArrValue(arr = []) {
            // (1) 先准备一个max变量存放数组的第一个值
            let max = arr[0]
            let min = arr[0] // 最小值
            // (2) 遍历比较
            for (let i = 1; i < arr.length; i++) {
                // 最大值
                if (max < arr[i]) {
                    max = arr[i]
                }
                // 最小值
                if (min > arr[i]) {
                    min = arr[i]
                }
            }
            // (3) 返回值    返回的是数组
            return [max, min]
        }
        let newArr = getArrValue([11, 3, 55, 7, 29])
        // console.log(newArr)
        console.log(`数组的最大值是：${newArr[0]}`)
        console.log(`数组的最小值是：${newArr[1]}`)
    </script>
</body>

</html>

两个相同的函数，后面的会覆盖前面的函数。

匿名函数

函数表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
    // 1. 匿名函数表达式
    // fn(1, 2) // 报错
    let fn = function (x, y) {
        // console.log('我是函数表达式')
        console.log(x + y)
    }
    // console.log(fn)
    fn(1, 2)


    // 匿名函数表达式 和 具名函数 的不同 function fn() {}
    // 1. 具名函数的调用可以写到任何位置
    // 2. 函数表达式，必须先声明函数表达式，后调用
    // fun()
    // function fun() {
    //     console.log(1)
    // }
</script>

<button>点击我</button>
<script>
    let btn = document.querySelector('button')
    // btn.onclick = function () {
    //     alert('我是匿名函数')
    // }
    btn.addEventListener('click', function () {
        alert('弹出')
    },)
</script>

立即执行函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
    // let num = 10
    // let num = 20

    // (function () {
    //     console.log(11)
    // })();

    // (function () {
    //     let num = 10
    // })();
    // (function () {
    //     let num = 20
    // })();

    // 1. 第一种写法
    (function (x, y) {
        console.log(x + y)
        let num = 10
        let arr = []
    })(1, 2);

    // (function () { })();

    // 2. 第二种写法
    // (function () { }());
    (function (x, y) {
        console.log(x + y)
        let num = 10
        let arr = []
    }(1, 3));

    // 注意：多个立即执行函数要用 ; 隔开，要不然会报错
    // 作用：防止变量污染
</script>

对象

对象包含属性和方法

增删改查操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
</head>  
<body>  
    <script>        
	    let obj={  
            uname:'张三',  
            age:18,  
            sex:'男',  
            callme:function (phonenumber) {  
                console.log('详情请拨打'+phonenumber+'联系我');  
            }  
        }  
        //增  
        obj.hobby='打篮球';  
        console.log(obj);  
        //删  
        delete obj.hobby;  
        console.log(obj);  
        //改  
        obj.username='李四';  
        console.log(obj);  
        //查  
        console.log(obj.uname);  
        console.log(obj['age']);  
        //调用函数  
        obj.callme('10086');  
        //遍历对象  
		for (let key in obj){  
		    console.log(key+':'+obj[key]); 
		    //console.log(key+':'+obj.key); //不能正常获取到值，undefined  
		}
    </script>  
  
</body>  
</html>

内置对象

Math

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script>
    // 属性
    console.log(Math.PI) // 3.141592653589793
    // 方法
    // ceil 天花板 向上取整
    console.log(Math.ceil(1.1)) // 2
    console.log(Math.ceil(1.5)) // 2
    console.log(Math.ceil(1.9)) // 2
    console.log('---------------------')
    // floor 地板 向下取整
    console.log(Math.floor(1.1)) // 1
    console.log(Math.floor(1.5)) // 1
    console.log(Math.floor(1.9)) // 1
    console.log(Math.floor('12px')) // NaN
    console.log('---------------------')
    // 四舍五入 round
    console.log(Math.round(1.1)) // 1
    console.log(Math.round(1.49)) // 1
    console.log(Math.round(1.5)) // 2
    console.log(Math.round(1.9)) // 2
    console.log(Math.round(-1.1)) // -1
    console.log(Math.round(-1.5)) // -1 // [-0.1, -0.5] 取 -1
    console.log(Math.round(-1.51)) // -2 // (-0.5, -0.9] 取 -2

    // 取整函数 parseInt(1.2)  // 1
    // 取整函数 parseInt('12px') // 12

    console.log('---------------------')
    console.log(Math.max(1, 2, 3, 4, 5)) // 5
    console.log(Math.min(1, 2, 3, 4, 5)) // 1
    console.log(Math.abs(-1)) // 1
    console.log(Math.pow(4, 2)) // 求 4 的 2次方 // 16
    console.log(Math.sqrt(16)) // 求 16 的平方根 // 4
    // null 类似 let obj = {}
    let obj = null


    // Math对象包含的方法：
    // random：生成0-1之间的随机数（包含0不包含1）
    // ceil：向上取整
    // floor：向下取整
    // max：找最大数
    // min：找最小值
    // pow：幂运算
    // abs：绝对值
    // Math对象在线文档：  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math
</script>

随机数函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
    // 左闭右开 能取到 0，但是取不到 1，中间的一个随机小数
    // console.log(Math.random())

    // 0-10之间的整数
    // Math.floor(Math.random() * (10 + 1))

    // let arr = ['red', 'green', 'blue']
    // let random = Math.floor(Math.random() * arr.length)
    // // console.log(random)
    // console.log(arr[random])

    // 5-10之间的整数
    // Math.floor(Math.random() * (5 + 1)) + 5
    // 生成 N-M 之间的随机数
    // Math.floor(Math.random() * (M - N + 1)) + N

    // 取到 N ~ M 的随机整数
    function getRandom(N, M) {
        return Math.floor(Math.random() * (M - N + 1)) + N
    }

    console.log(getRandom(4, 8))
</script>

案例-随机颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>  
<html lang="zh-CN">  
  
<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>13-随机颜色案例</title>  
    <style>        div {  
            width: 300px;  
            height: 300px;  
        }  
    </style>  
</head>  
  
<body>  
<div></div>  
  
<script>  
    // 1. 自定义一个随机颜色函数  
    function getRandomColor(flag = true) {  
        if (flag) {  
            // 3. 如果是 true，则返回 16进制的随机颜色 #ffffff            let str = '#'  
            let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']  
            // 利用for循环随机6次，累加到 str 里面  
            for (let i = 1; i <= 6; i++) {  
                // 每次要随机从数组里面抽取一个  
                // random 是数组的索引号 是随机的  
                let random = Math.floor(Math.random() * arr.length)  
                // str = str + arr[random]  
                str += arr[random]  
            }  
            return str  
        } else {  
            // 4. 否则是 false，则返回 rgb格式的随机颜色rgb(255,255,255)  
            let r = Math.floor(Math.random() * 256)  
            let g = Math.floor(Math.random() * 256)  
            let b = Math.floor(Math.random() * 256)  
            return `rgb(${r},${g},${b})`  
        }  
  
    }  
    // 2. 调用函数 getRandomColor(布尔值)  
    console.log(getRandomColor(false))  
    console.log(getRandomColor(true))  
    console.log(getRandomColor())  
  
    // let str = '#'  
    // str = str + 'f'  
    const div = document.querySelector('div')  
    div.style.backgroundColor = getRandomColor()  
</script>  
</body>  
  
</html>

Web-API

分类

webapi分为dom和bom
image.png

const优先

const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化，但是对于引用数据类型，const声明的变量，里面存的不是 值，不是值，不是值，是 地址。 建议数组和对象使用const来声明

DOM

DOM树

DOM树作用：直接的体现标签和标签之间的关系
image.png

DOM对象

定义：浏览器根据标签生成的JS对象。
作用：使用DOM对象提供的属性和方法，来访问和操作网页内容，实现网页特效和用户的交互效果。

DOM操作

获取DOM元素

1.根据CSS选择器来获取DOM元素（重点）：

  • 1.1选择匹配的第一个元素
    语法：document.querySelector(‘css选择器’)
    参数： 包含一个或多个有效的CSS选择器 字符串
    返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象。 若无匹配，则返回null。
    文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

  • 1.2.选择匹配的多个元素
    语法： document.querySelectorAll(‘CSS选择器’)
    参数： 包含一个或多个有效的CSS选择器 字符串
    返回值： CSS选择器匹配的NodeList 对象集合
    例如：
    document.querySelectorAll(‘ul li’)
    返回一个伪数组，有长度有索引号的数组 ，但是没有pop()、push()等数组方法 ，想要得到里面的每一个对象，则需要遍历（for）的方式获得。
    注意事项： 哪怕只有一个元素，通过querySelectoAll()获取过来的也是一个伪数组，里面只有一个元素而已 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    <!DOCTYPE html>  
    <html lang="zh-CN">  
      
    <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>04-获取DOM元素</title>  
        <style>        .box {  
                width: 200px;  
                height: 200px;  
            }  
        </style>  
    </head>  
      
    <body>  
    <div class="box">123</div>  
    <div class="box">abc</div>  
    <p id="nav">导航栏</p>  
    <ul class="nav">  
        <li>测试1</li>  
        <li>测试2</li>  
        <li>测试3</li>  
    </ul>  
      
    <!-- 请控制台依次输出3个li的DOM对象 -->  
    <!-- <ul class='nav'>  
        <li>我的首页</li>  
        <li>产品介绍</li>  
        <li>联系方式</li>  
    </ul> -->  
      
      
    <script>  
      
        // 1.1. 获取匹配的第一个元素  
        // 操作标签  
        const div = document.querySelector('div')  
        console.log(div)  
        //操作类名  
        const box = document.querySelector('.box')  
        console.log(box)  
        //操作id  
        const nav = document.querySelector('#nav')  
        console.log(nav)  
        //nav.style.color = 'red'  
      
        // 1.2. 我要获取第一个小 ulli    const li = document.querySelector('ul li:first-child')  
        console.log(li)  
      
        // 2.1 选择所有的小li  
        //const lis = document.querySelectorAll('ul li')    //console.log(lis) // NodeList(3)[li, li, li]  // 数组  
      
        // 2.2. 获取元素  
        const lis = document.querySelectorAll('.nav li')  
        // console.log(lis)  
        for (let i = 0; i < lis.length; i++) {  
            console.log(lis[i]) // 每一个小li对象  
        }  
      
        const p = document.querySelectorAll('#nav')  
        console.log(p)  
        // p[0].style.color = 'red'  
              
    // 注意：  
        // 1.获取一个DOM元素我们使用谁？能直接操作修改吗？  
        //     querySelector()  
        //     可以  
        // 2.获取多个DOM元素我们使用谁？能直接修改吗？如果不能可以怎么做到修改？  
        //     querySelectorAll()  
        //     不可以，只能通过遍历的方式一次给里面的元素做修改  
      
        // 总结：  
        // 1.获取页面中的标签我们最终常用哪两种方式？  
        //     querySelectorAll()  
        //     querySelector()    // 2.它们两者的区别是什么？  
        //     querySelector() 只能选择一个元素，可以直接操作  
        //     querySelectorAll() 可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素  
        // 3.它们两者小括号里面的参数有神马注意事项？  
        //     里面写CSS选择器  
        //     必须是字符串，也就是必须加引号  
    </script>  
      
      
    </body>  
      
    </html>

2.其它获取DOM元素方法（了解）：

  • 根据 id 获取第一个元素
    document.getElementById(‘nav’)
  • 根据 标签 获取一类元素 获取页面所有div
    document.getElementsByTagName(‘div’)
  • 根据 类名 获取元素 获取页面所有类名为w的
    document.getElementsByClassName(‘w’)
修改DOM对象的内容

元素.innerText 属性，只识别文本，不能解析标签。
元素.innerHTML 属性，识别文本，能够解析标签。
如果还在纠结到底用谁，你可以选择 innerHTML。

案例-随机抽奖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>  
<html lang="zh-CN">  
  
<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>随机抽奖案例</title>  
    <style>        
	    .wrapper {  
            width: 840px;  
            height: 420px;  
            background: url(https://alist.jdi.cloudns.org/d/onedrive/gordon365_01/obsidian/image-240816162143829.png?sign=vNXD_5OGNe0o_Po0M_34Mw5VvA3lxE43xfAI7GcWkbU=:0) no-repeat center / cover;  
            padding: 100px 250px;  
            box-sizing: border-box;  
        }  
    </style>  
</head>  
  
<body>  
<div class="wrapper">  
    <strong>年会抽奖</strong>  
    <h1>一等奖：<span id="one">???</span></h1>  
    <h2>二等奖：<span id="two">???</span></h2>  
    <h3>三等奖：<span id="three">???</span></h3>  
</div>  
  
<script>  
    // 1. 声明数组  
    const personArr = ['周杰伦', '刘德华', '周星驰', 'pink老师', '张学友']  
    // 2 先做一等奖  
    // 2.1 随机数 数组的下标  
    const random = Math.floor(Math.random() * personArr.length)  
    // console.log(personArr[random])  
    // 2.2 获取 one 元素  
    const one = document.querySelector('#one')  
    // 2.3 把名字给 one    one.innerHTML = personArr[random]  
    // 2.4 删除数组这个名字  
    personArr.splice(random, 1)  
    // console.log(personArr)  
  
    // 3 二等奖  
    // 3.1 随机数 数组的下标  
    const random2 = Math.floor(Math.random() * personArr.length)  
    // 3.2 获取 two 元素  
    const two = document.querySelector('#two')  
    // 3.3 把名字给 two    two.innerHTML = personArr[random2]  
    // 3.4 删除数组这个名字  
    personArr.splice(random2, 1)  
  
    // 4 三等奖  
    // 4.1 随机数 数组的下标  
    const random3 = Math.floor(Math.random() * personArr.length)  
    // 4.2 获取 three 元素  
    const three = document.querySelector('#three')  
    // 4.3 把名字给 three    three.innerHTML = personArr[random3]  
    // 4.4 删除数组这个名字  
    personArr.splice(random3, 1)  
</script>  
</body>  
  
</html>

背景图片
image.png

最终效果：
image.png

修改DOM元素对象属性

1、通过对象.属性 = 值的方式修改元素的属性值

1
2
3
4
5
6
7
<script>
    // 1. 获取图片元素
    const img = document.querySelector('img')
    // 2. 修改图片对象的属性   对象.属性 = 值
    img.src = './images/2.webp'
    img.title = 'pink老师的艺术照'
</script>

2、操作元素样式属性

  • 通过style修改样式属性
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <script>
        // 1. 获取元素
        const box = document.querySelector('.box')
        // 2. 修改样式属性 对象.style.样式属性 = '值'  别忘了跟单位
        box.style.width = '300px'
        // 多组单词的采取  小驼峰命名法
        box.style.backgroundColor = 'hotpink'
        box.style.border = '2px solid blue'
        box.style.borderTop = '2px solid red'
        // 总结
        // 1.设置/修改元素样式属性通过 style 属性引出来
        // 2.如果需要修改一个div盒子的样式，比如padding-left，如何写？
        //     element.style.paddingLeft='300px'
        //     小驼峰命名法
        // 3.因为我们是样式属性，一定别忘记，大部分数字后面都需要加单位
        //     const box = document.querySelector('.box')
        //     // 修改元素样式
        //     box.style.width = '200px'
        //     box.style.marginTop = '15px'
        //     box.style.backgroundColor = 'pink'
    </script>
  • 通过className修改样式属性
    方便操作同一class多样式，但会覆盖以前的类名
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <!DOCTYPE html>
    <html lang="zh-CN">

    <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>通过类名修改样式</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: pink;
            }

            .nav {
                color: red;
            }

            .box {
                /* w300+h300+bgc 快捷输入(emmet) */
                width: 300px;
                height: 300px;
                background-color: skyblue;
                margin: 100px auto;
                padding: 10px;
                border: 1px solid #000;
            }
        </style>
    </head>

    <body>
        <div class="nav">123</div>

        <script>
            // 1. 获取元素
            const div = document.querySelector('div')
            // 2. 添加类名  class是个关键字，我们用className
            div.className = 'nav box'
            // className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

            // 总结：
            // 1.使用className有什么好处？
            //     可以同时修改多个样式
            // 2.使用className有什么注意事项？
            //     直接使用className赋值会覆盖以前的类名
        </script>
    </body>

    </html>
  • 通过classList修改样式属性
    采用类名的方式，添加一个类，为避免覆盖之前的类，就要找到对应的类，然后再添加新的类，很麻烦，故最终推荐classList的方式来修改样式属性。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <script>
        // 通过classList添加
        // 1. 获取元素
        const box = document.querySelector('.box')
        // 2. 修改样式
        // 2.1 追加类 add() 类名不加点，并且是字符串
        // box.classList.add('active')
        // 2.2 删除类 remove() 类名不加点，并且是字符串
        // box.classList.remove('box')
        // 2.3 切换类 toggle() 有还是没有啊？有就删掉，没有就加上
        box.classList.toggle('active')


        // 总结：
        // 1.使用className和classList的区别？
        //     修改大量样式的更方便
        //     修改不多样式的时候方便
        //     classList是追加和删除，不影响以前类名
    </script>
    3、操作表单元素属性
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    <!DOCTYPE html>  
    <html lang="zh-CN">  
      
    <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>14-修改表单属性</title>  
        <!-- .value、.type、.checked、.disabled、.selected -->  
    </head>  
      
    <body>  
    <!-- <input type="text" value="电脑" /> -->  
    <!-- <input type="checkbox" name="" id="" checked /> -->  
    <input type="checkbox" name="" id="" />  
    <!-- <button disabled="disabled">点击</button> -->  
    <!-- <button disabled>点击</button> -->  
    <button>点击</button>  
      
    <script>  
        // 1. 获取元素  
        // const uname = document.querySelector('input')  
        // 2. 获取值  获取表单里面的值 用的  表单.value  
        // console.log(uname.value) // 电脑  
        // console.log(uname.innerHTML) // innerHTML 得不到表单的内容  
        // 3. 设置表单的值  
        // uname.value = '我要买电脑'  
        // console.log(uname.type)    // uname.type = 'password'  
      
        // 1. 获取  
        const ipt = document.querySelector('input')  
        // console.log(ipt.checked) // false // 只接受布尔值  
        ipt.checked = true  
        // ipt.checked = 'true' // 会选中，不提倡，有隐式转换  
      
      
        // 1. 获取  
        const button = document.querySelector('button')  
        // console.log(button.disabled) // 默认false 不禁用  
        button.disabled = true // 禁用按钮  
    </script>  
    </body>  
      
    </html>

自定义属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>  
<html lang="zh-CN">  
  
<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>15-自定义属性</title>  
</head>  
  
<body>  
<div data-id="1" data-spm="不知道">1</div>  
<div data-id="2">2</div>  
<div data-id="3">3</div>  
<div data-id="4">4</div>  
<div data-id="5">5</div>  
  
<script>  
    const one = document.querySelector('div')  
    // console.log(one.dataset) // DOMStringMap {id: '1', spm: '不知道'}  
    console.log(one.dataset.id) // 1  
    console.log(one.dataset.spm) // 不知道  
  
  
    // 自定义属性  
    //     在HTML5推出来了专门的data-自定义属性  
    //     在标签上一律以data-开头  
    //     在DOM对象上一律以dataset对象方式获取  
</script>  
</body>  
  
</html>

案例–用户注册倒计时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>  
<html lang="zh-CN">  
  
<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>17-用户注册倒计时</title>  
</head>  
  
<body>  
<textarea name="" id="" cols="30" rows="10">  
    用户注册协议  
        欢迎注册成为xx用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。  
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看    </textarea>  
<br />  
<button class="btn" disabled>我已经阅读用户协议(60)</button>  
  
<script>  
    // 1. 获取元素  
    const btn = document.querySelector('.btn')  
    console.log(btn.innerHTML) // 我已经阅读用户协议(60) // button用innerHTML，比较特殊（不是button.value）  
    // 2. 倒计时  
    let i = 5  
    // 2.1 开启定时器  
    let n = setInterval(function () {  
        i--  
        btn.innerHTML = `我已经阅读用户协议(${i})`  
        if (i === 0) {  
            clearInterval(n) // 关闭定时器  
            // 定时器停了，我就可以开按钮  
            btn.disabled = false  
            btn.innerHTML = '同意'  
        }  
    }, 1000)  
</script>  
</body>  
  
</html>

监听事件

事件监听三要素：
  • 事件源（谁被触发）
  • 事件类型（点击还是鼠标经过等）
  • 事件处理程序（要做什么事情）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    <!DOCTYPE html>  
    <html lang="zh-CN">  
      
    <head>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0">  
        <title>04-随机点名案例</title>  
        <style>        * {  
                margin: 0;  
                padding: 0;  
            }  
      
            h2 {  
                text-align: center;  
            }  
      
            .box {  
                width: 600px;  
                margin: 50px auto;  
                display: flex;  
                font-size: 25px;  
                line-height: 40px;  
            }  
      
            .qs {  
      
                width: 450px;  
                height: 40px;  
                color: red;  
      
            }  
      
            .btns {  
                text-align: center;  
            }  
      
            .btns button {  
                width: 120px;  
                height: 35px;  
                margin: 0 50px;  
            }  
        </style>  
    </head>  
      
    <body>  
    <h2>随机点名</h2>  
    <div class="box">  
        <span>名字是：</span>  
        <div class="qs">这里显示姓名</div>  
    </div>  
    <div class="btns">  
        <button class="start">开始</button>  
        <button class="end">结束</button>  
    </div>  
      
    <script>  
        // 数据数组  
        const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']  
        // 定时器的全局变量  
        let timerId = 0  
        // 随机号要全局变量  
        let random = 0  
        // 业务1.开始按钮模块  
        const qs = document.querySelector('.qs')  
        // 1.1 获取开始按钮对象  
        const start = document.querySelector('.start')  
        // 1.2 添加点击事件  
        start.addEventListener('click', function () {  
            timerId = setInterval(function () {  
                // 随机数  
                random = parseInt(Math.random() * arr.length)  
                // console.log(arr[random])  
                qs.innerHTML = arr[random]  
            }, 35)  
      
            // 如果数组里面只有一个值了，还需要抽取吗？、不需要，让两个按钮禁用就可以了  
            if (arr.length === 1) {  
                // start.disabled = true  
                // end.disabled = true            
                start.disabled = end.disabled = true  
            }  
        })  
      
        // 2. 关闭按钮  
        const end = document.querySelector('.end')  
        end.addEventListener('click', function () {  
            clearInterval(timerId)  
            // 结束了，可以删除掉当前抽取的那个数组元素  
            arr.splice(random, 1)  
            console.log(arr)  
        })  
    </script>  
    </body>  
      
    </html>
事件监听版本
  • DOM L0 事件源.on事件 = function(){}
  • DOM L2 事件源.addEventListener(事件, 事件处理函数)
    区别:
    on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用
事件类型
  • 鼠标事件 ：click、mouseenter、mouseleave
  • 焦点事件 ：focus、blur
  • 键盘事件 ：Keydown、Keyup
  • 文本事件 ：input

案例-轮播图完整版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="zh-CN">

<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>08-轮播图完整版</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const data = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]

    // 获取元素
    const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')
    const footer = document.querySelector('.slider-footer')
    // 1. 右按钮业务
    // 1.1 获取右侧按钮
    const next = document.querySelector('.next')
    let i = 0 // 信号量，控制播放图片张数
    // 1.2 注册点击事件
    // next.onclick = function(){}
    next.addEventListener('click', function () {
      // console.log(11)
      i++
      // 1.6 判断条件 如果大于8，就复原为0
      // if (i >= 8) {
      //   i = 0
      // }
      i = i >= data.length ? 0 : i
      // 1.3 得到对应的对象
      // console.log(data[i])
      toggle()
    })

    // 2. 左侧按钮业务
    // 2.1 获取左侧按钮
    const prev = document.querySelector('.prev')
    // 2.2 注册点击事件
    prev.addEventListener('click', function () {
      i--
      // 2.6 判断条件 如果小于0，则爬到最后一张图片索引号是7
      // if (i < 0) {
      //   i = data.length - 1
      // }
      i = i < 0 ? data.length - 1 : i
      toggle()
    })

    // 声明一个渲染的函数作为复用
    function toggle() {
      // 1.4 渲染对应的数据
      img.src = data[i].url
      p.innerHTML = data[i].title
      footer.style.backgroundColor = data[i].color
      // 1.5 更换小圆点 先移除原来的类名，当前li再添加这个类名
      document.querySelector('.slider-indicator .active').classList.remove('active')
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    }


    // 3. 自动播放模块
    let timerId = setInterval(function () {
      // 利用js自动调用点击事件 click() 一定加小括号调用函数
      next.click()
    }, 1000)

    // 4. 鼠标经过大盒子
    const slider = document.querySelector('.slider')
    // 注册事件
    slider.addEventListener('mouseenter', function () {
      // 停止定时器
      clearInterval(timerId)
    })

    // 5. 鼠标离开大盒子，开启定时器
    // 注册事件
    slider.addEventListener('mouseleave', function () {
      // 开启定时器
      timerId = setInterval(function () {
        // 利用js自动调用点击事件 click() 一定加小括号调用函数
        next.click()
      }, 1000)
    })
  </script>
</body>

</html>

案例-回车评论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="zh-CN">

<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>15-按下回车评论发布</title>
  <style>
    .wrapper {
      min-width: 400px;
      max-width: 800px;
      display: flex;
      justify-content: flex-end;
    }

    .avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      background: url(./images/avatar.jpg) no-repeat center / cover;
      margin-right: 20px;
    }

    .wrapper textarea {
      outline: none;
      border-color: transparent;
      resize: none;
      background: #f5f5f5;
      border-radius: 4px;
      flex: 1;
      padding: 10px;
      transition: all 0.5s;
      height: 30px;
    }

    .wrapper textarea:focus {
      border-color: #e4e4e4;
      background: #fff;
      height: 50px;
    }

    .wrapper button {
      background: #00aeec;
      color: #fff;
      border: none;
      border-radius: 4px;
      margin-left: 10px;
      width: 70px;
      cursor: pointer;
    }

    .wrapper .total {
      margin-right: 80px;
      color: #999;
      margin-top: 5px;
      opacity: 0;
      transition: all 0.5s;
    }

    .list {
      min-width: 400px;
      max-width: 800px;
      display: flex;
    }

    .list .item {
      width: 100%;
      display: flex;
    }

    .list .item .info {
      flex: 1;
      border-bottom: 1px dashed #e4e4e4;
      padding-bottom: 10px;
    }

    .list .item p {
      margin: 0;
    }

    .list .item .name {
      color: #FB7299;
      font-size: 14px;
      font-weight: bold;
    }

    .list .item .text {
      color: #333;
      padding: 10px 0;
    }

    .list .item .time {
      color: #999;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <i class="avatar"></i>
    <textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
    <button>发布</button>
  </div>
  <div class="wrapper">
    <span class="total">0/200字</span>
  </div>
  <div class="list">
    <div class="item" style="display: none;">
      <i class="avatar"></i>
      <div class="info">
        <p class="name">清风徐来</p>
        <p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
        <p class="time">2022-10-10 20:29:21</p>
      </div>
    </div>
  </div>

  <script>

    const tx = document.querySelector('#tx')
    const total = document.querySelector('.total')
    const item = document.querySelector('.item')
    const text = document.querySelector('.text')
    // 1. 当我们文本域 获得了焦点，就让total 显示出来
    tx.addEventListener('focus', function () {
      total.style.opacity = 1
    })
    // 2. 当我们文本域 失去了焦点，就让total 隐藏出来
    tx.addEventListener('blur', function () {
      total.style.opacity = 0
    })
    // 3. 检测用户输入
    tx.addEventListener('input', function () {
      // console.log(tx.value.length) 得到输入的长度
      total.innerHTML = `${tx.value.length}/200字`
    })

    // 4. 按下回车发布评论
    tx.addEventListener('keyup', function (e) {
      // 只有按下的是回车键，才会触发
      // console.log(e.key)
      if (e.key === 'Enter') {
        // console.log(tx.value.trim())
        // 如果用户输入的不为空，就显示和打印
        if (tx.value.trim()) {
          // console.log(11)
          item.style.display = 'block'
          // console.log(tx.value) // 用户输入的内容
          text.innerHTML = tx.value
        }
        // 等我们按下回车，结束，清空文本域
        tx.value = ''
        // 按下回车之后，就要把 字符统计 复原
        total.innerHTML = '0/200字'
      }
    })
  </script>
</body>

</html>

案例-表单反选

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="zh-CN">

<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>01-全选按钮案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
            height: 24px;
        }

        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        .allCheck {
            width: 80px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th class="allCheck">
                <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
            </th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米净水器</td>
            <td>小米</td>
            <td>￥4999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米电视</td>
            <td>小米</td>
            <td>￥5999</td>
        </tr>
    </table>

    <script>
        // 1. 获取大复选框
        const checkAll = document.querySelector('#checkAll')
        // 2. 获取所有的小复选框
        const cks = document.querySelectorAll('.ck')
        // 3. 点击大复选框 注册事件
        checkAll.addEventListener('click', function () {
            // 得到当前大复选框的选中状态
            // console.log(checkAll.checked) // 得到是true或者是false
            // 4. 遍历所有的小复选框 让小复选框的checked = 大复选框的checked
            for (let i = 0; i < cks.length; i++) {
                cks[i].checked = this.checked
            }
        })

        // 5. 小复选框控制大复选框
        for (let i = 0; i < cks.length; i++) {
            // 5.1 给所有的小复选框添加点击事件
            cks[i].addEventListener('click', function () {
                // 判断选中的小复选框个数 是不是等于 总的小复选框个数
                // 一定要写到点击里面，因为每次要获得最新的个数
                // console.log(document.querySelectorAll('.ck:checked').length)
                // console.log(document.querySelectorAll('.ck:checked').length === cks.length)
                checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
            })
        }
    </script>
</body>

</html>
事件流

事件流的两个阶段：事件捕获(父->子)和事件冒泡(子->父)

image.png
image.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>  
<html lang="zh-CN">  
  
<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>10-阻止默认行为</title>  
</head>  
  
<body>  
<form action="http://www.itcast.cn">  
  <input type="submit" value="免费注册" />  
</form>  
<a href="http://www.baidu.com">百度一下</a>  
  
<script>  
  const form = document.querySelector('form')  
  form.addEventListener('submit', function (e) {  
    // 阻止默认行为  提交  
    e.preventDefault()  
  })  
  
  const a = document.querySelector('a')  
  a.addEventListener('click', function (e) {  
    e.preventDefault()  
  })  
  
  // 总结：  
  // 1.阻止冒泡如何做？  
  //     事件对象.stopPropagation()  
  // 2.阻止元素默认行为如何做？  
  //     e.preventDefault()  
</script>  
</body>  
  
</html>
事件委托

原理：利用事件冒泡特点，给父元素注册事件，当触发子元素的时候，冒泡到父元素上处理。
优点：减少注册次数，可以提高程序性能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="zh-CN">

<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>事件委托</title>
</head>

<body>
    <ul>
        <li>第1个孩子</li>
        <li>第2个孩子</li>
        <li>第3个孩子</li>
        <li>第4个孩子</li>
        <li>第5个孩子</li>
        <p>我不需要变色</p>
    </ul>

    <script>
        // 点击每个小li 当前li 文字变为红色
        // 按照事件委托的方式  委托给父级，事件写到父级身上
        // 1. 获取父元素
        const ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            // console.dir(e.target) // 就是我们点击的那个对象
            // e.target.style.color = 'red'
            // 我的需求，我们只要点击li才会有效果
            if (e.target.tagName === 'LI') {
                e.target.style.color = 'red'
            }
        })


        // 总结：
        // 1.事件委托的好处是什么？
        //     减少注册次数，提高了程序性能
        // 2.事件委托是委托给了谁？父元素还是子元素
        //     父元素
        // 3.如何找到真正触发的元素？
        //     事件对象.target.tagName
    </script>
</body>

</html>

案例-tab切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>  
<html lang="zh-CN">  
  
<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>08-tab栏切换</title>  
  <style>    * {  
      margin: 0;  
      padding: 0;  
    }  
  
    .tab {  
      width: 1000px;  
      height: 640px;  
      margin: 20px;  
      border: 1px solid #e4e4e4;  
    }  
  
    .tab-nav {  
      width: 100%;  
      height: 60px;  
      line-height: 60px;  
      display: flex;  
      justify-content: space-between;  
    }  
  
    .tab-nav h3 {  
      font-size: 24px;  
      font-weight: normal;  
      margin-left: 20px;  
    }  
  
    .tab-nav ul {  
      list-style: none;  
      display: flex;  
      justify-content: flex-end;  
    }  
  
    .tab-nav ul li {  
      margin: 0 20px;  
      font-size: 14px;  
    }  
  
    .tab-nav ul li a {  
      text-decoration: none;  
      border-bottom: 2px solid transparent;  
      color: #333;  
    }  
  
    .tab-nav ul li a.active {  
      border-color: #e1251b;  
      color: #e1251b;  
    }  
  
    .tab-content {  
      padding: 0 16px;  
    }  
  
    .tab-content .item {  
      display: none;  
    }  
  
    .tab-content .item.active {  
      display: block;  
    }  
  </style>  
</head>  
  
<body>  
  <div class="tab">  
    <div class="tab-nav">  
      <h3>每日特价</h3>  
      <ul>        <li><a class="active" href="javascript:;" data-id="0">精选</a></li>  
        <li><a href="javascript:;" data-id="1">美食</a></li>  
        <li><a href="javascript:;" data-id="2">百货</a></li>  
        <li><a href="javascript:;" data-id="3">个护</a></li>  
        <li><a href="javascript:;" data-id="4">预告</a></li>  
      </ul>    </div>    <div class="tab-content">  
      <div class="item active"><img src="https://alist.jdi.cloudns.org/d/onedrive/gordon365_01/obsidian/202408162316972-240816231652005.png?sign=0nono8Z34i4CiNDr2HQEEOeEHQ-Vlk9NqI7dmf222fw=:0" alt="" /></div>  
      <div class="item"><img src="https://alist.jdi.cloudns.org/d/onedrive/gordon365_01/obsidian/202408162317501-240816231741555.png?sign=S9TzArSm3fyb4MSGNr5vUbQ-_H3fLcxaHfxfFMExSb0=:0" alt="" /></div>  
      <div class="item"><img src="https://alist.jdi.cloudns.org/d/onedrive/gordon365_01/obsidian/202408162320082-240816232053100.png?sign=Nzxe7gxHqRhJjj_G43drpBII9c6NDnlj8GouwdjhGQA=:0" alt="" /></div>  
      <div class="item"><img src="https://alist.jdi.cloudns.org/d/onedrive/gordon365_01/obsidian/202408162321438-240816232155469.png?sign=lv0DbT2tn6UF7Y9EK4wbRLKr5DbCj7pFXlNHVAL2NJQ=:0" alt="" /></div>  
      <div class="item"><img src="https://alist.jdi.cloudns.org/d/onedrive/gordon365_01/obsidian/202408162324880-240816232422896.png?sign=6x7ZgLHvFHJf2Fb2NR4jEhCqlc-88SoPWuDQmfxez5Y=:0" alt="" /></div>  
    </div>  </div>  
  <script>    // 采取事件委托的形式 tab栏切换  
    // 1. 获取ul父元素，因为ul只有一个  
    const ul = document.querySelector('.tab-nav ul')  
    // 获取5个item  
    const items = document.querySelectorAll('.tab-content .item')  
    // 2. 添加事件  
    ul.addEventListener('click', function (e) {  
      // console.log(e.target) // e.target是我们点击的对象  
      // 我们只有点击了a才会进行添加类和删除类操作  
      // console.log(e.target.tagName) // e.target.tagName 点击那个对象的标签名  
      if (e.target.tagName === 'A') {  
        // console.log('我选的是a')  
        // 排他思想，先移除原来的active，  
        document.querySelector('.tab-nav .active').classList.remove('active')  
        // 当前元素添加active 是e.target  
        // this 指向ul 不能用this  
        e.target.classList.add('active')  
  
        // 下面大盒子模块  
        // console.log(e.target.dataset.id)  
        const i = +e.target.dataset.id  
        // 排他思想，先移除原来的active  
        document.querySelector('.tab-content .active').classList.remove('active')  
        // 对应的大盒子 添加active  
        // document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')        items[i].classList.add('active')  
      }  
    })  
  </script>  
</body>  
  
</html>
页面加载和页面滚动

load事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>  
<html lang="zh-CN">  
  
<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>11-页面加载事件</title>  
  <script>    // 注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件。  
    // 等待页面所有资源加载完毕，就回去执行回调函数  
    // window.addEventListener('load', function () {  
    //     const btn = document.querySelector('button')    //     btn.addEventListener('click', function () {    //         alert(11)    //     })    // })  
    // img.addEventListener('load', function () {    //     // 等待图片加载完毕，再去执行里面的代码  
    // })  
  
    // 当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载。  
    document.addEventListener('DOMContentLoaded', function () {  
      const btn = document.querySelector('button')  
      btn.addEventListener('click', function () {  
        alert(11)  
      })  
    })  
  
    // 1.页面加载事件有哪两个？如何添加？  
    //     load事件  
    //         监听整个页面资源给window加  
    //     DOMContentLoaded  
    //         给document加  
    //         无需等待样式表、图像等完全加载  
  </script>  
</head>  
  
<body>  
<button>点击</button>  
  
</body>  
  
</html>

scroll事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>  
<html lang="zh-CN">  
  
<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>12-页面滚动事件</title>  
  <style>    body {  
      padding-top: 100px;  
      height: 3000px;  
    }  
  
    div {  
      display: none;  
      margin: 100px;  
      overflow: scroll;  
      width: 200px;  
      height: 200px;  
      border: 1px solid #000;  
    }  
  </style>  
</head>  
  
<body>  
<div>  
  我里面有很多很多的文字  
  我里面有很多很多的文字  我里面有很多很多的文字  我里面有很多很多的文字  我里面有很多很多的文字  我里面有很多很多的文字  我里面有很多很多的文字  我里面有很多很多的文字  我里面有很多很多的文字  我里面有很多很多的文字  我里面有很多很多的文字  我里面有很多很多的文字  我里面有很多很多的文字  我里面有很多很多的文字</div>  
  
<script>  
  const div = document.querySelector('div')  
  // 页面滚动事件  
  window.addEventListener('scroll', function () {  
    // console.log('我滚了')  
    // 我想知道页面到底滚动了多少像素，被卷去了多少 scrollTop    // 获取html元素写法  
    // document.documentElement  
    // console.log(document.documentElement.scrollTop)    const n = document.documentElement.scrollTop  
    if (n >= 100) {  
      div.style.display = 'block'  
    } else {  
      div.style.display = 'none'  
    }  
  })  
  
  // const div = document.querySelector('div')  
  // div.addEventListener('scroll', function () {  //     // console.log(111)  //     // scrollTop 被卷去的头部  
  //     console.log(div.scrollTop)  
  // })  
  // 页面滚动事件-获取位置  
  // scrollLeft和scrollTop（属性）  
  //     获取被卷去的大小  
  //     获取元素内容往左、往上滚出去看不到的距离  
  //     这两个值是可读写的  
  // 尽量在scroll事件里面获取被卷去的距离  
  
  // document.body  
  // document.documentElement</script>  
</body>  
  
</html>
页面尺寸
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script>

const div = document.querySelector('div')

const p = document.querySelector('p')

// console.log(div.offsetLeft)

// 检测盒子的位置 最近一级带有定位的祖先元素

console.log(p.offsetLeft)

  
  

// 元素尺寸位置

// 获取宽高：

// 获取元素的自身宽高、包含元素自身设置的宽高、padding、border

// offsetWidth和offsetHeight

// 获取出来的是数值，方便计算

// 注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0

// 获取位置：

// 获取元素距离自己定位父级元素的左、上距离

// offsetLeft和offsetTop 注意是只读属性

  

// 总结：

// 1. offsetWidth和offsetHeight是得到元素什么的宽高？

// 内容+padding+border

// 2. offsetTop和offsetLeft得到位置以谁为准？

// 带有定位的父级

// 如果都没有则以 文档左上角 为准

</script>

案例-bilibili导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
<!DOCTYPE html>
<html lang="zh-CN">

<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>bilibili-干杯~~~</title>
  <!-- 引入favicon图标 -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <!-- 引入css文件 -->
  <link rel="stylesheet" href="./css/index.css">
  <!-- 引入字体图标文件 -->
  <link rel="stylesheet" href="./fonts/iconfont.css">
</head>

<body>
  <!-- 头部模块 -->
  <header class="suspension">
    <div class="m-navbar">
      <!-- logo -->
      <a href="#" class="logo">
        <i class="iconfont Navbar_logo"></i>
      </a>
      <!-- 右侧 -->
      <div class="right">
        <a href="#" class="search">
          <i class="iconfont ic_search_tab"></i>
        </a>
        <a href="#" class="face">
          <img src="./images/login.png" alt="">
        </a>
        <div class="app-btn">
          <img src="./images/download.png" alt="">
        </div>
      </div>
    </div>
    <div class="channel-menu">
      <div class="tabs">
        <!-- 很宽的盒子 -->
        <div class="tabs-list">
          <a href="#">首页</a>
          <a href="#">动画</a>
          <a href="#">番剧</a>
          <a href="#">果蔬</a>
          <a href="#">音乐</a>
          <a href="#">舞蹈</a>
          <a href="#">鬼畜</a>
          <a href="#">吹鬼</a>
          <!-- 红色线 -->
          <div class="line"></div>
        </div>
      </div>
      <div class="after">
        <i class="iconfont general_pulldown_s"></i>
      </div>
    </div>
  </header>

  <!-- 主体部分 -->
  <div class="m-home">
    <div class="video-list">
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下电视？
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              播放量
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              评论数
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
        </p>
      </a>
    </div>
  </div>

  <!-- 底部模块 -->
  <footer class="app">
    <div class="btn-app">
      <i class="iconfont Navbar_logo"></i>
      打开App，看你感兴趣的视频
    </div>
  </footer>

  <script>
    // 1. 获取父元素，添加事件委托
    const list = document.querySelector('.tabs-list')
    const line = document.querySelector('.line')
    // 2. 给a注册事件
    list.addEventListener('click', function (e) {
      // 判断点击的是a
      if (e.target.tagName === 'A') {
        // console.log(11)
        // 得到当前的链接 offsetLeft
        // console.log(e.target.offsetLeft)
        // line.style.transform = 'translateX(100px)'
        // 让line盒子来进行移动
        line.style.transform = `translateX(${e.target.offsetLeft}px)`
      }
    })

  </script>
</body>

</html>

案例-电梯导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 项部导航 -->
  <div class="xtx_topnav">
    <div class="wrapper">
      <!-- 顶部导航 -->
      <ul class="xtx_navs">
        <li>
          <a href="javascript:;">请先登录</a>
        </li>
        <li>
          <a href="javascript:;">免费注册</a>
        </li>
        <li>
          <a href="javascript:;">我的订单</a>
        </li>
        <li>
          <a href="javascript:;">会员中心</a>
        </li>
        <li>
          <a href="javascript:;">帮助中心</a>
        </li>
        <li>
          <a href="javascript:;">在线客服</a>
        </li>
        <li>
          <a href="javascript:;">
            <i class="mobile sprites"></i>
            手机版
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 头部 -->
  <div class="xtx_header">
    <div class="wrapper">
      <!-- 网站Logo -->
      <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
      <!-- 主导航 -->
      <div class="xtx_navs">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">首页</a>
          </li>
          <li>
            <a href="javascript:;">生鲜</a>
          </li>
          <li>
            <a href="javascript:;">美食</a>
          </li>
          <li>
            <a href="javascript:;">餐厨</a>
          </li>
          <li>
            <a href="javascript:;">电器</a>
          </li>
          <li>
            <a href="javascript:;">居家</a>
          </li>
          <li>
            <a href="javascript:;">洗护</a>
          </li>
          <li>
            <a href="javascript:;">孕婴</a>
          </li>
          <li>
            <a href="javascript:;">服装</a>
          </li>
        </ul>
      </div>
      <!-- 站内搜索 -->
      <div class="xtx_search clearfix">
        <!-- 购物车 -->
        <a href="javascript:;" class="xtx_search_cart sprites">
          <i>2</i>
        </a>
        <!-- 搜索框 -->
        <div class="xtx_search_wrapper">
          <input type="text" placeholder="搜一搜">
        </div>
      </div>
    </div>
  </div>
  <!-- 分类及焦点图 -->
  <div class="xtx_entry">
    <div class="wrapper">
      <!-- 分类 -->
      <div class="xtx_category">
        <!-- 顶级分类 -->
        <ul class="xtx_category_super">
          <li>
            <a href="javascript:;">
              生鲜
              <small>水果</small>
              <small>蔬菜</small>
            </a>
            <i class="sprites"></i>
          </li>
          <li class="active">
            <a href="javascript:;">
              美食
              <small>面点</small>
              <small>干果</small>
            </a>
            <i class="sprites"></i>
          </li>
          <li>
            <a href="javascript:;">
              电器
              <small>数码产品</small>
            </a>
            <i class="sprites"></i>
          </li>
          <li>
            <a href="javascript:;">
              居家
              <small>床品</small>
              <small>四件套</small>
              <small>被枕</small>
            </a>
            <i class="sprites"></i>
          </li>
          <li>
            <a href="javascript:;">
              洗护
              <small>洗发洗护</small>
              <small>美妆</small>
            </a>
            <i class="sprites"></i>
          </li>
          <li>
            <a href="javascript:;">
              孕婴
              <small>奶粉</small>
              <small>玩具</small>
              <small>辅食</small>
            </a>
            <i class="sprites"></i>
          </li>
          <li>
            <a href="javascript:;">
              餐橱
              <small>数码产品</small>
            </a>
            <i class="sprites"></i>
          </li>
          <li>
            <a href="javascript:;">
              服饰
              <small>女装</small>
              <small>男装</small>
            </a>
            <i class="sprites"></i>
          </li>
          <li>
            <a href="javascript:;">
              杂货
              <small>户外</small>
              <small>图书</small>
            </a>
            <i class="sprites"></i>
          </li>
          <li>
            <a href="javascript:;">
              品牌
              <small>品牌制造</small>
            </a>
            <i class="sprites"></i>
          </li>
        </ul>
        <!-- 子分类 -->
        <div class="xtx_category_subset">

        </div>
      </div>
      <!-- 焦点图 -->
      <div class="xtx_banner">

        <ul>
          <li>
            <a href="javascript:;">
              <img src="./uploads/banner_1.png" alt="">
            </a>
          </li>
        </ul>
        <!-- 切换按钮  -->
        <a href="javascript:;" class="prev sprites"></a>
        <a href="javascript:;" class="next sprites"></a>
        <!-- 指示器 -->
        <div class="indicator">
          <span></span>
          <span></span>
          <span class="active"></span>
          <span></span>
          <span></span>
        </div>

      </div>
    </div>
  </div>
  <!-- 新鲜好物 -->
  <div class="xtx_goods_new xtx_panel">
    <div class="wrapper">
      <!-- 面板头部 -->
      <div class="xtx_panel_header">
        <h3>新鲜好物<small>新鲜出炉 品质靠谱</small></h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites"></i>
        </a>
      </div>
      <!-- 商品列表 -->
      <div class="xtx_panel_goods_1">
        <a href="javascript:;">
          <img src="./uploads/new_goods_1.jpg" alt="">
          <span class="name">睿米无线吸尘器F8</span>
          <span class="price"><small>￥</small>899</span>
        </a>
        <a href="javascript:;">
          <img src="./uploads/new_goods_2.jpg" alt="">
          <span class="name">智能环绕3D空调</span>
          <span class="price"><small>￥</small>1299</span>
        </a>
        <a href="javascript:;">
          <img src="./uploads/new_goods_3.jpg" alt="">
          <span class="name">广东软软糯米煲仔饭</span>
          <span class="price"><small>￥</small>129</span>
        </a>
        <a href="javascript:;">
          <img src="./uploads/new_goods_4.jpg" alt="">
          <span class="name">罗西机械智能手表</span>
          <span class="price"><small>￥</small>3399</span>
        </a>
      </div>
    </div>
  </div>

  <!-- 人气推荐 -->
  <div class="xtx_goods_popular xtx_panel">
    <div class="wrapper">
      <!-- 面板头部 -->
      <div class="xtx_panel_header">
        <h3>人气推荐<small>人气爆款 不容错过</small></h3>
      </div>
      <!-- 商品列表 -->
      <div class="xtx_panel_goods_1">
        <a href="javascript:;">
          <img src="./uploads/popular_1.jpg">
          <span class="title">特惠推荐</span>
          <span class="alt">我猜得到 你的需要</span>
        </a>
        <a href="./index-hot.html">
          <img src="./uploads/popular_2.jpg">
          <span class="title">爆款推荐</span>
          <span class="alt">人气好物推荐</span>
        </a>
        <a href="./index-one.html">
          <img src="./uploads/popular_3.jpg">
          <span class="title">场景使用一站买全</span>
          <span class="alt">编辑精心整理推荐</span>
        </a>
        <a href="javascript:;">
          <img src="./uploads/popular_4.jpg">
          <span class="title">领券中心</span>
          <span class="alt">发现更多超值优惠券</span>
        </a>
      </div>
    </div>
  </div>

  <!-- 热门品牌 -->
  <div class="xtx_goods_brand xtx_panel">
    <div class="wrapper">
      <div class="xtx_panel_header">
        <h3>热门品牌<small>国际经典 品质保证</small></h3>
        <div class="page-bar">
          <a href="javascript:;" class="prev sprites"></a>
          <a href="javascript:;" class="next sprites active"></a>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="xtx_goods">
        <ul>
          <li>
            <a href="./index-brand.html">
              <img src="./uploads/brand_goods_1.jpg" alt="">
            </a>
            <a href="./brand-list.html">
              <img src="./uploads/brand_goods_2.jpg" alt="">
            </a>
            <a href="javascript:;">
              <img src="./uploads/brand_goods_3.jpg" alt="">
            </a>
            <a href="javascript:;">
              <img src="./uploads/brand_goods_4.jpg" alt="">
            </a>
            <a href="javascript:;">
              <img src="./uploads/brand_goods_5.jpg" alt="">
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 分类商品 -->
  <div class="xtx_goods_category xtx_panel">
    <div class="wrapper">
      <!-- 生鲜 -->
      <div class="xtx_panel_header">
        <h3>生鲜</h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites"></i>
        </a>
        <div class="tabs-bar">
          <a href="javascript:;" class="active">水果</a>
          <a href="javascript:;">蔬菜</a>
          <a href="javascript:;">肉禽蛋</a>
          <a href="javascript:;">裤装</a>
          <a href="javascript:;">衬衫</a>
          <a href="javascript:;">内衣</a>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="xtx_panel_goods_2">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/fresh_goods_cover.jpg" alt="">
            </a>
            <div class="label">
              <span>生鲜馆</span>
              <span>全场3件8折</span>
            </div>
          </li>
          <li>
            <!-- 商品图片 -->
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_1.jpg" alt="">
              </div>
            </a>
            <!-- 商品信息 -->
            <div class="meta">
              <p class="name">美威 智利原味三文鱼排 240g/袋 4片装</p>
              <p class="flag">海鲜年货</p>
              <p class="price"><small>￥</small>59</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_2.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只</p>
              <p class="flag">火锅食材</p>
              <p class="price"><small>￥</small>71.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_3.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装</p>
              <p class="flag">海鲜水产</p>
              <p class="price"><small>￥</small>49.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_4.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">渔公码头 大连鲜食入味 即食海参 辽参刺参 调味海</p>
              <p class="flag">海鲜年货</p>
              <p class="price"><small>￥</small>899</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_5.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">越南进口白心火龙果4个 装 标准果 单果400-550g </p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>29</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_6.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">广西沃柑 柑橘1.5kg</p>
              <p class="flag">新鲜水果</p>
              <p class="price"><small>￥</small>59</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_7.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">进口 牛油果 6个装 单果重约130-180g</p>
              <p class="flag">新鲜水果</p>
              <p class="price"><small>￥</small>39.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_8.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">泰国进口山竹5A级 500g </p>
              <p class="flag">新鲜水果</p>
              <p class="price"><small>￥</small>29.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
        </ul>
      </div>

      <!-- 服饰 -->
      <div class="xtx_panel_header">
        <h3>服饰</h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites"></i>
        </a>
        <div class="tabs-bar">
          <a href="javascript:;" class="active">行李箱</a>
          <a href="javascript:;">男士包袋</a>
          <a href="javascript:;">女士包袋</a>
          <a href="javascript:;">钱包及小提袋</a>
          <a href="javascript:;">男鞋</a>
          <a href="javascript:;">女鞋</a>
          <a href="javascript:;">拖鞋</a>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="xtx_panel_goods_2">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/clothes_goods_cover.jpg" alt="">
            </a>
            <div class="label">
              <span>服饰馆</span>
              <span>3折狂欢</span>
            </div>
          </li>
          <li>
            <!-- 商品图片 -->
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_1.jpg" alt="">
              </div>
            </a>
            <!-- 商品信息 -->
            <div class="meta">
              <p class="name">人本秋季厚底帆布鞋 韩版低帮增高学生</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>55</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_2.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">迪士尼真皮针扣表带宽度 14-16mm规格双色压纹 女表带</p>
              <p class="flag">海鲜年货</p>
              <p class="price"><small>￥</small>20.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_3.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装</p>
              <p class="flag">海鲜水产</p>
              <p class="price"><small>￥</small>209</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_4.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>274.5</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_5.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">拉夫劳伦t恤男正品 </p>
              <p class="flag">圆领短袖</p>
              <p class="price"><small>￥</small>99</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_6.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">李宁跑步鞋男鞋空气 弧2018春季款</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>79</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_7.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">Dickies男鞋2020春季 英伦休闲工装鞋低帮</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>179</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_8.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">北极绒春夏季纯棉背心 男士修身纯色打底</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>69</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
        </ul>
      </div>

      <!-- 餐厨 -->
      <div class="xtx_panel_header">
        <h3>餐厨</h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites"></i>
        </a>
        <div class="tabs-bar">
          <a href="javascript:;" class="active">水果</a>
          <a href="javascript:;">蔬菜</a>
          <a href="javascript:;">肉禽蛋</a>
          <a href="javascript:;">裤装</a>
          <a href="javascript:;">衬衫</a>
          <a href="javascript:;">内衣</a>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="xtx_panel_goods_2">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/kitchen_goods_cover.jpg" alt="">
            </a>
            <div class="label">
              <span>餐厨馆</span>
              <span>大额优惠<br>等你来拿</span>
            </div>
          </li>
          <li>
            <!-- 商品图片 -->
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_1.jpg" alt="">
              </div>
            </a>
            <!-- 商品信息 -->
            <div class="meta">
              <p class="name">创意可爱不锈钢便携餐具 套装筷子便携三件套</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>5.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_2.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">三金西瓜霜竹炭牙刷软毛 成人家用家庭装</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>20.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_3.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">朴（TOPOTO）大卫免手 洗平板拖把拓扑懒人木地 板刮刮乐桶拖布</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>129</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_4.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>274.5</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_5.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">金纺不伤手柔顺剂 妈妈的选择</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>29</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_6.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">洁成绵柔抹布洗碗巾超 值5片装 洗锅刷碗</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>10.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_7.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">大卫双驱动旋转拖把桶 免手洗拓扑拖布地拖墩布 </p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>159</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_8.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">斧头牌（AXE）去污地板 清洁剂2L 柠檬清香 </p>
              <p class="flag">海鲜年货</p>
              <p class="price"><small>￥</small>22.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
        </ul>
      </div>

      <!-- 居家 -->
      <div class="xtx_panel_header">
        <h3>居家</h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites"></i>
        </a>
        <div class="tabs-bar">
          <a href="javascript:;" class="active">咖啡具</a>
          <a href="javascript:;">水具酒具</a>
          <a href="javascript:;">锅具</a>
          <a href="javascript:;">餐具</a>
          <a href="javascript:;">功能厨具</a>
          <a href="javascript:;">茶具</a>
          <a href="javascript:;">清洁保鲜</a>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="xtx_panel_goods_2">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/home_goods_cover.jpg" alt="">
            </a>
            <div class="label">
              <span>居家馆</span>
              <span>全场满减</span>
            </div>
          </li>
          <li>
            <!-- 商品图片 -->
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_1.jpg" alt="">
              </div>
            </a>
            <!-- 商品信息 -->
            <div class="meta">
              <p class="name">菜鸟异常专用链接 非请 勿拍</p>
              <p class="flag">海鲜年货</p>
              <p class="price"><small>￥</small>8999</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_2.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">【中盐软水盐】汉斯希 尔家用软水机适配</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>65</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_3.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">云米净水壶家用直饮台式 净水机渗透过滤自来水</p>
              <p class="flag">海鲜年货</p>
              <p class="price"><small>￥</small>129</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_4.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">ztk恒温调奶器配件玻璃壶 炖盅</p>
              <p class="flag">海鲜年货</p>
              <p class="price"><small>￥</small>129</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_5.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">荞麦枕头单人枕芯双人 护颈椎枕头芯</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>29</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_6.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">Bear/小熊 LLJ-B04G1 家用多功能切碎机 电动</p>
              <p class="flag">料理机</p>
              <p class="price"><small>￥</small>10.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_7.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">荣事达薄饼机春饼春卷皮 家用博饼机电饼铛 </p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>159</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_8.jpg" alt="">
              </div>
            </a>
            <div class="meta">
              <p class="name">美式双人实木床 红实木 显档次</p>
              <p class="flag"></p>
              <p class="price"><small>￥</small>22.9</p>
            </div>
            <!-- 其它 -->
            <div class="extra">
              <a href="javascript:;">
                <span>找相似</span>
                <span>发现现多宝贝&gt;</span>
              </a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 最新主题 -->
  <div class="xtx_goods_topic xtx_panel">
    <div class="wrapper">
      <div class="xtx_panel_header">
        <h3>最新专题</h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites"></i>
        </a>
      </div>
      <div class="xtx_topic">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/topic_goods_1.jpg" alt="">
              <div class="meta">
                <p class="title">
                  吃这些美食才不算辜负自己
                  <small>餐厨起居洗护好物</small>
                </p>
                <span class="price"><small>￥</small>29.9起</span>
              </div>
            </a>
            <div class="social">
              <span class="like">
                <i class="sprites"></i>1220
              </span>
              <span class="view">
                <i class="sprites"></i>1800
              </span>

              <span class="reply">
                <i class="sprites"></i>1220
              </span>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <img src="./uploads/topic_goods_2.jpg" alt="">
              <div class="meta">
                <p class="title">
                  吃这些美食才不算辜负自己
                  <small>餐厨起居洗护好物</small>
                </p>
                <span class="price"><small>￥</small>29.9起</span>
              </div>
            </a>
            <div class="social">
              <span class="liked">
                <i class="sprites"></i>1220
              </span>
              <span class="view">
                <i class="sprites"></i>1800
              </span>

              <span class="reply">
                <i class="sprites"></i>1220
              </span>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <img src="./uploads/topic_goods_3.jpg" alt="">
              <div class="meta">
                <p class="title">
                  吃这些美食才不算辜负自己
                  <small>餐厨起居洗护好物</small>
                </p>
                <span class="price"><small>￥</small>29.9起</span>
              </div>
            </a>
            <div class="social">
              <span class="like">
                <i class="sprites"></i>1220
              </span>
              <span class="view">
                <i class="sprites"></i>1800
              </span>

              <span class="reply">
                <i class="sprites"></i>1220
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 公共底部 -->
  <div class="xtx_footer clearfix">
    <div class="wrapper">
      <!-- 联系我们 -->
      <div class="contact clearfix">
        <dl>
          <dt>客户服务</dt>
          <dd class="chat">在线客服</dd>
          <dd class="feedback">问题反馈</dd>
        </dl>
        <dl>
          <dt>关注我们</dt>
          <dd class="weixin">公众号</dd>
          <dd class="weibo">微博</dd>
        </dl>
        <dl>
          <dt>下载APP</dt>
          <dd class="qrcode">
            <img src="./uploads/qrcode.jpg">
          </dd>
          <dd class="download">
            <span>扫描二维码</span>
            <span>立马下载APP</span>
            <a href="javascript:;">下载页面</a>
          </dd>
        </dl>
        <dl>
          <dt>服务热线</dt>
          <dd class="hotline">
            400-0000-000
            <small>周一至周日 8:00-18:00</small>
          </dd>
        </dl>
      </div>
    </div>
    <!-- 其它 -->
    <div class="extra">
      <div class="wrapper">
        <!-- 口号 -->
        <div class="slogan">
          <a href="javascript:;" class="price">价格亲民</a>
          <a href="javascript:;" class="express">物流快捷</a>
          <a href="javascript:;" class="quality">品质新鲜</a>
        </div>
        <!-- 版权信息 -->
        <div class="copyright">
          <p>
            <a href="javascript:;">关于我们</a>
            <a href="javascript:;">帮助中心</a>
            <a href="javascript:;">售后服务</a>
            <a href="javascript:;">配送与验收</a>
            <a href="javascript:;">商务合作</a>
            <a href="javascript:;">搜索推荐</a>
            <a href="javascript:;">友情链接</a>
          </p>
          <p>CopyRight &copy; 小兔鲜儿</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 电梯 -->
  <div class="xtx-elevator">
    <ul class="xtx-elevator-list">
      <li><a href="javascript:;" data-name="new">新鲜好物</a></li>
      <li><a href="javascript:;" data-name="popular">人气推荐</a></li>
      <li><a href="javascript:;" data-name="brand">热门品牌</a></li>
      <li><a href="javascript:;" data-name="topic">最新专题</a></li>
      <li><a href="javascript:;" id="backTop"><i class="sprites"></i>顶部</a></li>
    </ul>
  </div>

  <script>
    // 获取元素
    const entry = document.querySelector('.xtx_entry')
    const elevator = document.querySelector('.xtx-elevator')
    // 1. 当页面滚动大于300像素，就显示 电梯导航
    // 2. 给页面添加滚动事件
    window.addEventListener('scroll', function () {
      // 被卷去的头部大于 300
      const n = document.documentElement.scrollTop
      // if (n >= 300) {
      //   elevator.style.opacity = 1
      // } else {
      //   elevator.style.opacity = 0
      // }
      // 简写
      // elevator.style.opacity = n >= 300 ? 1 : 0
      elevator.style.opacity = n >= entry.offsetTop ? 1 : 0
    })

    // 
    const backTop = document.querySelector('#backTop')
    backTop.addEventListener('click', function () {
      // 可读写
      // document.documentElement.scrollTop = 0
      // window.scrollTo(x, y)
      window.scrollTo(0, 0)
    })
  </script>
</body>

</html>
DOM节点的操作

1.查找父节点用哪个属性？
parentNode
2.查找所有子节点用哪个属性?
children
3.查找兄弟节点用哪个属性？
nextElementSibling
previousElementSibling

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
   <script>
       // // 1. 创建节点
       // const div = document.createElement('div')
       // // console.log(div)
       // 2. 追加节点  作为最后一个子元素
       // document.body.appendChild(div)

       const ul = document.querySelector('ul')
       const li = document.createElement('li')
       li.innerHTML = '我是li'
       // ul.appendChild(li)
       // ul.children[0]
       // 3. 追加节点
       // insertBefore(插入的元素, 放到哪个元素的前面)
       ul.insertBefore(li, ul.children[0])

       // 追加节点
       //     要想在界面看到，还得插入到某个父元素中
       //     插入到父元素的最后一个子元素：
       //         // 插入到这个父元素的最后
       //         父元素.appendChild(要插入的元素)
       //     插入到父元素中某个子元素的前面
       //         // 插入到某个子元素的前面
       //         父元素.insertBefore(要插入的元素, 在哪个元素前面)
       
	// 1. 克隆节点 元素.cloneNode(true)
       // const li1 = ul.children[0].cloneNode(true)
       // console.log(li1)
       // 2. 追加
       ul.appendChild(ul.children[0].cloneNode(true))

       // 克隆一个已有的元素节点
       // 元素.cloneNode(布尔值)
       // cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
       //     若为true，则代表克隆时会包含后代节点一起克隆
       //     若为false，则代表克隆时不包含后代节点
       //     默认为false
        // 删除节点 父元素.removeChild(子元素)
       ul.removeChild(ul.children[0])

       // 删除节点
       // 目标：能够局部根据需求删除节点的能力
       // 若一个节点在页面中已不需要时，可以删除它
       // 在JavaScript原生DOM操作中，要删除元素必须通过父元素删除
       // 语法：
       // 父元素.removeChild(要删除的元素)
       // 注：
       //     如不存在父子关系，则删除不成功
       //     删除节点和隐藏节点（display:none;）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点
</script>
M端事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    const div = document.querySelector('div')
    // 1. 触摸
    div.addEventListener('touchstart', function () {
        console.log('开始触摸了')
    })
    // 2. 离开
    div.addEventListener('touchend', function () {
        console.log('离开了')
    })
    // 3. 移动
    div.addEventListener('touchmove', function () {
        console.log('一直摸，移动')
    })
</script>
swiper插件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="zh-CN">

<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>15-移动端轮播图</title>
    <link rel="stylesheet" href="./css/swiper.min.css" />
    <style>
        .box {
            position: relative;
            width: 800px;
            height: 300px;
            background-color: pink;
            margin: 100px auto;
        }

        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper {
            overflow: hidden;
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- Swiper -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>


    <script src="./js/swiper.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            // 小圆点
            pagination: {
                el: ".swiper-pagination",
            },
            // 自动播放
            autoplay: {
                delay: 1000, // 1秒切换一次
                disableOnInteraction: false, // 鼠标点击，触摸之后，继续自动播放
            },
            // 可以键盘控制
            keyboard: {
                enabled: true,
                onlyInViewport: true,
            }
        });
    </script>
</body>

</html>

BOM

定义：BOM(BrowserObjectModel)是浏览器对象模型

window对象是一个全局对象，也可以说是JavaScript中的顶级对象。像document、alert()、console.log()这些都是window的属性，基本BoM的属性和方法都是window的。
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    // document.querySelector()
    // window.document.querySelector()
    console.log(document === window.document)

    function fn() {
        console.log(11)
    }
    window.fn()

    var num = 10
    console.log(window.num)
</script>

定时器-延迟函数

JavaScript内置的一个用来让代码延迟的函数，叫setTimeout.
语法：
setTimeout(回调函数, 等待的毫秒数)
setTimeout仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window
清除延时函数：
let timer = setTimeout(回调函数, 等待的毫秒数)
clearTimeout(timer)

两种定时器对比：执行的次数
延时函数：执行一次
间歇函数：每隔一段时间就执行一次，除非手动清除.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="zh-CN">

<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>5秒自动关闭的广告</title>
    <style>
        img {
            position: fixed;
            left: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <img src="https://alist.jdi.cloudns.org/d/onedrive/gordon365_01/obsidian/202408162316972-240816231652005.png?sign=0nono8Z34i4CiNDr2HQEEOeEHQ-Vlk9NqI7dmf222fw=:0" alt="" />

    <script>
        // 1. 获取元素
        const img = document.querySelector('img')
        setTimeout(function () {
            img.style.display = 'none'
        }, 5000)
    </script>
</body>

</html>

JS执行机制

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。
这是因为Javascript这门脚本语言诞生的使命所致一一JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果IS执行的时间过长，这样就会造成页面的染不连贯，导致页面染加载阻塞的感觉，

为了解决这个问题，利用多核cPU的计算能力，HTML5提出WebWorker标准，充许JavaScript脚本创建多个线程。于是，JS中出现了同步和异步。
image.png

location对象

  • location.href属性获取完整的URL地址，对其赋值时用于地址跳转
  • search属性获取地址中携带的参数，符号 ? 后面部分
  • hash属性获取地址中的哈希值，符号 # 后面部分
  • reload方法用来刷新当前页面，传入参数true时表示强制刷新
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="zh-CN">

<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>5秒之后自动跳转页面</title>
    <style>
        span {
            color: red;
        }
    </style>
</head>

<body>
    <a href="http://www.baidu.com">支付成功<span>5</span>秒钟之后跳转到首页</a>

    <script>
        // 1. 获取元素
        const a = document.querySelector('a')
        // 2. 开启定时器
        // 3. 声明倒计时变量
        let num = 5

        let timerId = setInterval(function () {
            console.log(num)
            num--
            a.innerHTML = `支付成功<span>${num}</span>秒钟之后跳转到首页`
            // 如果num===0，我们停止定时器，并自动跳转功能
            if (num === 0) {
                clearInterval(timerId)
                // 4. 跳转 location.href
                location.href = 'http://www.baidu.com'
            }
        }, 1000)


        // location的数据类型是对象，它拆分并保存了URL地址的各个组成部分
        // 常用属性和方法：
        //     search属性获取地址中携带的参数，符号 ? 后面的部分
        //         console.log(location.search)
        //     hash属性获取地址中的哈希值，符合#后面部分
        //         console.log(location.hash)
        //         后期vue路由的铺垫，经常用于不刷新页面，显示不同页面，比如：网易云音乐
        //     reload方法用来刷新当前页面，传入参数true时表示强制刷新
        /*
            <button>点击刷新</button>
            <scrip>
                let btn = document.querySelector('button')
                btn.addEventListener('click', function () {
                    location.reload(true)
                    // 强制刷新 类似 Ctrl+F5
                })
            </scrip>
        */
    </script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
    // 检测userAgent（浏览器信息）
    !(function () {
        const userAgent = navigator.userAgent
        // 验证是否为Android或iPhone
        const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
        const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
        // 如果是Android或iPhone，则跳转至移动站点
        if (android || iphone) {
            location.href = 'http://m.baidu.com'
        }
    })();
    (function () { })();
    !function () { }();
    ~function () { }();
    +function () { }();

    // navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
    // 通过userAgent检测浏览器的版本及平台
    // PC端
    // console.log(navigator.userAgent)
    // 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.1661.41'
    // iPhone端
    // 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1 Edg/111.0.0.0'
    // Android端
    // 'Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Mobile Safari/537.36 Edg/111.0.0.0'

 </script>

history对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
    // 检测userAgent（浏览器信息）
    !(function () {
        const userAgent = navigator.userAgent
        // 验证是否为Android或iPhone
        const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
        const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
        // 如果是Android或iPhone，则跳转至移动站点
        if (android || iphone) {
            location.href = 'http://m.baidu.com'
        }
    })();
    (function () { })();
    !function () { }();
    ~function () { }();
    +function () { }();

    // navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
    // 通过userAgent检测浏览器的版本及平台
    // PC端
    // console.log(navigator.userAgent)
    // 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.1661.41'
    // iPhone端
    // 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1 Edg/111.0.0.0'
    // Android端
    // 'Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Mobile Safari/537.36 Edg/111.0.0.0'
</script>

本地存储

介绍

localStorage作用是什么？
可以将数据永久存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在

分类
  • localStorage：数据永久存储在本地
  • sessionStorage：生命周期为关闭浏览器窗口，同一窗口下数据可以共享
  • cookies
基本操作

localStorage存储，获取，删除的语法是什么？
增/改：localStorage.setItem(key, value)
获取：localStorage.getItem(key)
删除：localStorage.removeItem(key)

存储复杂数据类型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
    const obj = {
        uname: '陈平安',
        age: 18,
        gender: '女'
    }
    // 存储 复杂数据类型  无法直接使用
    // localStorage.setItem('obj', obj) // [object, object]
    // // 取
    // console.log(localStorage.getItem('obj'))

    // 复杂数据类型存储必须转换为JSON字符串存储
    localStorage.setItem('obj', JSON.stringify(obj))
    // JSON对象 属性和值有引号，而是引号统一是双引号
    // {"uname":"陈平安","age":18,"gender":"男"}
    // 取
    // console.log(typeof localStorage.getItem('obj'))
    // 2. 把JSON字符串转换为 对象
    const str = localStorage.getItem('obj') // {"uname":"陈平安","age":18,"gender":"男"}
    console.log(JSON.parse(str))
</script>

案例-信息录入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="zh-CN">

<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>学生就业统计表案例</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <h1>学生就业统计表</h1>

    <form class="info" autocomplete="off">
        <input type="text" class="uname" name="uname" placeholder="姓名" />
        <input type="text" class="age" name="age" placeholder="年龄" />
        <input type="text" class="salary" name="salary" placeholder="薪资" />
        <select class="gender" name="gender">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <select class="city" name="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="曹县">曹县</option>
        </select>
        <button class="add">添加</button>
    </form>

    <div class="title">
        <div>共有数据 <span>0</span> 条</div>
    </div>

    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>薪资</th>
                <th>就业城市</th>
                <th>录入时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>1</td>
                <td>迪丽热巴</td>
                <td>23</td>
                <td>女</td>
                <td>12000</td>
                <td>北京</td>
                <td>2099/9/9 08:08:08</td>
                <td>
                    <a href="javascript:">
                        <i class="iconfont icon-shanchu"></i>
                        删除
                    </a>
                </td>
            </tr> -->
        </tbody>
    </table>
    <script>
        // 参考数据
        const initData = [
            {
                stuId: 1,
                uname: '迪丽热巴',
                age: 22,
                gender: '女',
                salary: '12000',
                city: '北京',
                time: '2099/9/9 08:08:08'
            }
        ]

        // localStorage.setItem('data', JSON.stringify(initData))
        // 1. 渲染业务
        // 1.1 先读取本地储存的数据
        // （1）.本地存储有数据，则记得转换为对象后存储到变量里面，后期用于渲染页面
        // （2）.如果没有数据，则用 空数组代替
        const arr = JSON.parse(localStorage.getItem('data')) || []
        console.log(arr)

        // 1.2 利用map和join方法来渲染页面
        const tbody = document.querySelector('tbody')
        function render() {
            // (1). 利用map遍历数组，返回对应tr的数组
            const trArr = arr.map(function (ele, index) {
                return `
                <tr>
                    <td>${ele.stuId}</td>
                    <td>${ele.uname}</td>
                    <td>${ele.age}</td>
                    <td>${ele.gender}</td>
                    <td>${ele.salary}</td>
                    <td>${ele.city}</td>
                    <td>${ele.time}</td>
                    <td>
                        <a href="javascript:" data-id="${index}">
                            <i class="iconfont icon-shanchu"></i>
                            删除
                        </a>
                    </td>
                </tr>
                `
            })
            console.log(trArr)

            // (2). 把数组转换为字符串 join
            // (3). 把生成的字符串追加给tbody
            tbody.innerHTML = trArr.join('')
            // 显示共计有几条数据
            document.querySelector('.title span').innerHTML = arr.length
        }
        render()

        // 2. 新增业务
        const info = document.querySelector('.info')
        const uname = document.querySelector('.uname')
        const age = document.querySelector('.age')
        const salary = document.querySelector('.salary')
        const gender = document.querySelector('.gender')
        const city = document.querySelector('.city')

        // 2.1 form表单注册提交事件，阻止默认行为
        info.addEventListener('submit', function (e) {
            e.preventDefault()
            // 2.2 非空判断
            if (!uname.value || !age.value || !salary.value) {
                return alert('输入内容不能为空')
            }
            // 2.3 给arr数组追加对象，里面存储表单获取过来的数据
            arr.push({
                // 处理stuId：数组最后一条数据的stuId+1
                stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
                uname: uname.value,
                age: age.value,
                gender: gender.value,
                salary: salary.value,
                city: city.value,
                time: new Date().toLocaleString()
            })
            // 2.4 渲染页面和重置表单（reset（）方法）
            render()
            this.reset() // 重置表单

            // 2.5 把数组重新存入本地存储里面，记得转换为JSON字符串存储
            localStorage.setItem('data', JSON.stringify(arr))
        })

        // 3. 删除业务
        // 3.1 采用事件委托形式，给tbody注册点击事件
        tbody.addEventListener('click', function (e) {
            // 判断是否点击 A 链接
            if (e.target.tagName === 'A') {
                // alert(11)
                // 3.2 得到当前点击链接的索引号。渲染数据的时候，动态给a链接添加自定义属性 例如data-id="0"
                console.log(e.target.dataset.id)

                // 确认框 确认是否真的删除
                if (confirm('您确认要删除这条数吗？')) {
                    // 3.3 根据索引号，利用splice删除数组这条数据
                    arr.splice(e.target.dataset.id, 1)
                    // 3.4 重新渲染页面
                    render()
                    // 3.5 把最新的arr数组存入本地存储
                    localStorage.setItem('data', JSON.stringify(arr))
                }
            }
        })
    </script>
</body>

</html>

正则表达式

正则表达式（RegularExpression）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象.

语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
    const str = '我们在学习前端，希望学习前端能高薪就业'
    // 正则表达式使用：
    // 1. 定义规则
    const reg = /前端/
    // 2. 是否匹配
    // console.log(reg.test(str)) // true
    // 3. exec()
    console.log(reg.exec(str)) // 返回数组

    // 总结：
    // 1.正则表达式是什么？
    //     用于匹配字符串中字符组合的模式
    // 2.正则表达式有什么作用？
    //     表单验证（匹配）
    //     过滤敏感词（替换）
    //     字符串中提取我们想要的部分（提取）

    // 总结：
    // 1.正则表达式检测查找test方法和exec方法有什么区别？
    //     test方法：用于判断是否符合规则的字符串，返回的是布尔值，找到返回true，否则false
    //     exec方法：用于检索（查找）符合规则的字符串，找到返回数组，否则为null
</script>

元字符

比如，规定用户只能输入英文26个英文字母，普通字符的话abcdefghijklm….
但是换成元字符写法：[a-z]
正则测试工具： http://tool.oschina.net/regex

  • 边界符： [a-z]
  • 量词
  • 字符类 \d表示0~9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<script>
    // 元字符
    console.log(/哈/.test('哈')) // true
    console.log(/哈/.test('哈哈')) // true
    console.log(/哈/.test('二哈')) // true
    console.log('-----------------------')
    // 1. 边界符
    console.log(/^哈/.test('哈')) // true
    console.log(/^哈/.test('哈哈')) // true
    console.log(/^哈/.test('二哈')) // false
    console.log(/^哈$/.test('哈')) // true // 只有这种情况为true，否则全是false
    console.log(/^哈$/.test('哈哈')) // false
    console.log(/^哈$/.test('二哈')) // false
    console.log('-----------------------')

    // 量词 * 类似 >=0 次
    console.log(/^哈$/.test('哈')) // true
    console.log(/^哈*$/.test('')) // true
    console.log(/^哈*$/.test('哈')) // true
    console.log(/^哈*$/.test('哈哈')) // true
    console.log(/^哈*$/.test('二哈很傻')) // false
    console.log(/^哈*$/.test('哈很傻')) // false
    console.log(/^哈*$/.test('哈很哈')) // false
    console.log('-----------------------')

    // 量词 + 类似 >=1 次
    console.log(/^哈$/.test('哈')) // true
    console.log(/^哈+$/.test('')) // false
    console.log(/^哈+$/.test('哈')) // true
    console.log(/^哈+$/.test('哈哈')) // true
    console.log(/^哈+$/.test('二哈很傻')) // false
    console.log(/^哈+$/.test('哈很傻')) // false
    console.log(/^哈+$/.test('哈很哈')) // false
    console.log('-----------------------')

    // 量词 ? 类似 0||1 次
    console.log(/^哈?$/.test('')) // true
    console.log(/^哈?$/.test('哈')) // true
    console.log(/^哈?$/.test('哈哈')) // false
    console.log(/^哈?$/.test('二哈很傻')) // false
    console.log(/^哈?$/.test('哈很傻')) // false
    console.log(/^哈?$/.test('哈很哈')) // false
    console.log('-----------------------')

    // 量词 {n} 写几，就必须出现几次
    console.log(/^哈{4}$/.test('哈')) // false
    console.log(/^哈{4}$/.test('哈哈')) // false
    console.log(/^哈{4}$/.test('哈哈哈')) // false
    console.log(/^哈{4}$/.test('哈哈哈哈')) // true
    console.log(/^哈{4}$/.test('哈哈哈哈哈')) // false
    console.log(/^哈{4}$/.test('哈哈哈哈哈哈')) // false
    console.log('-----------------------')

    // 量词 {n,} >=n 次
    console.log(/^哈{4,}$/.test('哈')) // false
    console.log(/^哈{4,}$/.test('哈哈')) // false
    console.log(/^哈{4,}$/.test('哈哈哈')) // false
    console.log(/^哈{4,}$/.test('哈哈哈哈')) // true
    console.log(/^哈{4,}$/.test('哈哈哈哈哈')) // true
    console.log(/^哈{4,}$/.test('哈哈哈哈哈哈')) // true
    console.log('-----------------------')

    // 量词 {n,m} 逗号左右两侧千万不能有空格 >=n && <=m
    console.log(/^哈{4,6}$/.test('哈')) // false
    console.log(/^哈{4,6}$/.test('哈哈')) // false
    console.log(/^哈{4,6}$/.test('哈哈哈')) // false
    console.log(/^哈{4,6}$/.test('哈哈哈哈')) // true
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈')) // true
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈')) // true
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈哈')) // false
    console.log('-----------------------')

    // 字符类  [abc]  只选1个
    console.log(/^[abc]$/.test('a')) // true
    console.log(/^[abc]$/.test('b')) // true
    console.log(/^[abc]$/.test('c')) // true
    console.log(/^[abc]$/.test('ab')) // false
    console.log(/^[abc]{2}$/.test('ab')) // true
    console.log('-----------------------')

    // 字符类  [a-z]  只选1个
    console.log(/^[a-z]$/.test('p')) // true
    console.log(/^[A-Z]$/.test('p')) // false
    console.log(/^[A-Z]$/.test('P')) // true
    console.log(/^[0-9]$/.test(2)) // true
    console.log(/^[a-zA-Z0-9]$/.test(2)) // true
    console.log(/^[a-zA-Z0-9]$/.test('p')) // true
    console.log(/^[a-zA-Z0-9]$/.test('P')) // true
    console.log('-----------------------')

    // 总结：
    // 1.什么是元字符以及它的好处是什么？
    //     是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能
    //     比如英文26个英文字母，我们使用元字符 [a-z] 简写和灵活
    
    // 元字符：边界符、量词、字符类
    
    // 总结：
    // 量词：
    // + 表示重复至少1次
    // ? 表示重复0次或1次
    // * 表示重复0次或多次
    // {n,m} 表示重复 n到m 次

    // 总结：
    // 1.字符类 .（点）代表什么意思？
    //     匹配除换行符之外的任何单个字符
    // 2.字符类 [] 有若干代表什么意思？
    //     [abc] 匹配abc其中的任何单个字符
    //     [a-z] 匹配26个小写英文字母其中的任何单个字符
    //     [^a-z] 匹配除了26个小写英文字母之外的其他任何单个字符
</script>

替换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    // i 是单词 ignore 的缩写，正则匹配时不区分大小写
    console.log(/^java$/.test('java')) // true
    console.log(/^java$/.test('JAVA')) // false
    console.log(/^java$/i.test('JAVA')) // true
    console.log(/^java$/i.test('Java')) // true

    // replace 替换
    // g 是单纯 global 的缩写，匹配所有满足正则表达式的结果
    const str = 'java是一门编程语言，学完JAVA工资很高。'
    const re = str.replace(/java/ig, '前端')
    // | 或
    // const re = str.replace(/java|JAVA/g, '前端')
    console.log(re)
</script>

案例-注册验证页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
<!DOCTYPE html>  
<html lang="zh-CN">  
  
<head>  
  <meta charset="UTF-8">  
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  <meta name="renderer" content="webkit">  
  <link rel="shortcut icon" href="./favicon.ico">  
  <link rel="stylesheet" href="./css/common.css">  
  <link rel="stylesheet" href="./css/register.css">  
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">  
</head>  
  
<body>  
  <!-- 项部导航 -->  
  <div class="xtx_topnav">  
    <div class="wrapper">  
      <!-- 顶部导航 -->  
      <ul class="xtx_navs">  
        <li>  
          <a href="./login.html">请先登录</a>  
        </li>  
        <li>  
          <a href="./register.html">免费注册</a>  
        </li>  
        <li>  
          <a href="./center-order.html">我的订单</a>  
        </li>  
        <li>  
          <a href="./center.html">会员中心</a>  
        </li>  
        <li>  
          <a href="javascript:;">帮助中心</a>  
        </li>  
        <li>  
          <a href="javascript:;">在线客服</a>  
        </li>  
        <li>  
          <a href="javascript:;">  
            <i class="mobile sprites"></i>  
            手机版  
          </a>  
        </li>  
      </ul>  
    </div>  
  </div>  
  <!-- 头部 -->  
  <div class="xtx_header">  
    <div class="wrapper">  
      <!-- 网站Logo -->  
      <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>  
      <!-- 主导航 -->  
      <div class="xtx_navs">  
        <ul class="clearfix">  
          <li>  
            <a href="./index.html">首页</a>  
          </li>  
          <li>  
            <a href="./category01.html">生鲜</a>  
          </li>  
          <li>  
            <a href="./category01.html">美食</a>  
          </li>  
          <li>  
            <a href="./category01.html">餐厨</a>  
          </li>  
          <li>  
            <a href="./category01.html">电器</a>  
          </li>  
          <li>  
            <a href="./category01.html">居家</a>  
          </li>  
          <li>  
            <a href="./category01.html">洗护</a>  
          </li>  
          <li>  
            <a href="./category01.html">孕婴</a>  
          </li>  
          <li>  
            <a href="./category01.html">服装</a>  
          </li>  
        </ul>  
      </div>  
      <!-- 站内搜索 -->  
      <div class="xtx_search clearfix">  
        <!-- 购物车 -->  
        <a href="./cart-none.html" class="xtx_search_cart sprites">  
          <i>2</i>  
        </a>  
        <!-- 搜索框 -->  
        <div class="xtx_search_wrapper">  
          <input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">  
        </div>  
      </div>  
    </div>  
  </div>  
  <div class="xtx-wrapper">  
    <div class="container">  
      <!-- 卡片 -->  
      <div class="xtx-card">  
        <h3>新用户注册</h3>  
        <form class="xtx-form">  
          <div data-prop="username" class="xtx-form-item">  
            <span class="iconfont icon-zhanghao"></span>  
            <input name="username" type="text" placeholder="设置用户名称">  
            <span class="msg"></span>  
          </div>  
          <div data-prop="phone" class="xtx-form-item">  
            <span class="iconfont icon-shouji"></span>  
            <input name="phone" type="text" placeholder="输入手机号码  ">  
            <span class="msg"></span>  
          </div>  
          <div data-prop="code" class="xtx-form-item">  
            <span class="iconfont icon-zhibiaozhushibiaozhu"></span>  
            <input name="code" type="text" placeholder="短信验证码">  
            <span class="msg"></span>  
            <a class="code" href="javascript:;">发送验证码</a>  
          </div>  
          <div data-prop="password" class="xtx-form-item">  
            <span class="iconfont icon-suo"></span>  
            <input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">  
            <span class="msg"></span>  
          </div>  
          <div data-prop="confirm" class="xtx-form-item">  
            <span class="iconfont icon-suo"></span>  
            <input name="confirm" type="password" placeholder="请再次输入上面密码">  
            <span class="msg"></span>  
          </div>  
          <div class="xtx-form-item pl50">  
            <i class="iconfont icon-queren"></i>  
            已阅读并同意<i>《用户服务协议》</i>  
          </div>  
          <div class="xtx-form-item">  
            <button class="submit">下一步</button>  
            <!-- <a class="submit" href="javascript:;">下一步</a> -->  
          </div>  
        </form>  
      </div>  
    </div>  
  </div>  
  <!-- 公共底部 -->  
  <div class="xtx_footer clearfix">  
    <div class="wrapper">  
      <!-- 联系我们 -->  
      <div class="contact clearfix">  
        <dl>  
          <dt>客户服务</dt>  
          <dd class="chat">在线客服</dd>  
          <dd class="feedback">问题反馈</dd>  
        </dl>  
        <dl>  
          <dt>关注我们</dt>  
          <dd class="weixin">公众号</dd>  
          <dd class="weibo">微博</dd>  
        </dl>  
        <dl>  
          <dt>下载APP</dt>  
          <dd class="qrcode">  
            <img src="./uploads/qrcode.jpg">  
          </dd>  
          <dd class="download">  
            <span>扫描二维码</span>  
            <span>立马下载APP</span>  
            <a href="javascript:;">下载页面</a>  
          </dd>  
        </dl>  
        <dl>  
          <dt>服务热线</dt>  
          <dd class="hotline">  
            400-0000-000  
            <small>周一至周日 8:00-18:00</small>  
          </dd>  
        </dl>  
      </div>  
    </div>  
    <!-- 其它 -->  
    <div class="extra">  
      <div class="wrapper">  
        <!-- 口号 -->  
        <div class="slogan">  
          <a href="javascript:;" class="price">价格亲民</a>  
          <a href="javascript:;" class="express">物流快捷</a>  
          <a href="javascript:;" class="quality">品质新鲜</a>  
        </div>  
        <!-- 版权信息 -->  
        <div class="copyright">  
          <p>  
            <a href="javascript:;">关于我们</a>  
            <a href="javascript:;">帮助中心</a>  
            <a href="javascript:;">售后服务</a>  
            <a href="javascript:;">配送与验收</a>  
            <a href="javascript:;">商务合作</a>  
            <a href="javascript:;">搜索推荐</a>  
            <a href="javascript:;">友情链接</a>  
          </p>  
          <p>CopyRight &copy; 小兔鲜儿</p>  
        </div>  
      </div>  
    </div>  
  </div>  
  
  <script>  
    (function () {  
      // 1. 发送短信验证码模块  
      const code = document.querySelector('.code')  
      let flag = true // 通过一个变量来控制 节流阀  
      // 1.1 点击事件  
      code.addEventListener('click', function () {  
        if (flag) {  
          // 取反了，不能马上第二次点击  
          flag = false  
          let i = 5  
          // 点击完毕之后立马触发  
          code.innerHTML = `0${i}秒后重新获取`  
          // 开启定时器  
          let timerId = setInterval(function () {  
            i--  
            code.innerHTML = `0${i}秒后重新获取`  
            if (i === 0) {  
              // 清除定时器  
              clearInterval(timerId)  
              // 重新获取  
              code.innerHTML = `重新获取`  
              // 到时间了，可以开启flag了  
              flag = true  
            }  
          }, 1000)  
        }  
      })  
    })();  
  
    // 2. 验证的是用户名  
    // 2.1 获取用户名表单  
    const username = document.querySelector('[name=username]')  
    // 2.2 使用change事件 值发生变化的时候  
    username.addEventListener('change', verifyName)  
    // 2.3 封装verifyName函数  
    function verifyName() {  
      // console.log(11)  
      const span = username.nextElementSibling  
      // 2.4 定规则 用户名  
      const reg = /^[a-zA-Z0-9-_]{6,10}$/  
      if (!reg.test(username.value)) {  
        // console.log(11)  
        span.innerText = '输入不合法，请输入6-10位'  
        return false  
      }  
      // 2.5 合法的 清空span  
      span.innerText = ''  
      return true  
    }  
  
    // 3. 验证的是手机号  
    // 3.1 获取手机号表单  
    const phone = document.querySelector('[name=phone]')  
    // 3.2 使用change事件 值发生变化的时候  
    phone.addEventListener('change', verifyPhone)  
    // 3.3 封装verifyPhone函数  
    function verifyPhone() {  
      const span = phone.nextElementSibling  
      // 3.4 定规则 手机号  
      const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/  
      if (!reg.test(phone.value)) {  
        span.innerText = '输入不合法，请输入正确的11位手机号码'  
        return false  
      }  
      // 3.5 合法的 清空span  
      span.innerText = ''  
      return true  
    }  
  
    // 4. 验证的是验证码  
    // 4.1 获取验证码表单  
    const codeInput = document.querySelector('[name=code]')  
    // 4.2 使用change事件 值发生变化的时候  
    codeInput.addEventListener('change', verifyCode)  
    // 4.3 封装verifyCode函数  
    function verifyCode() {  
      const span = codeInput.nextElementSibling  
      // 4.4 定规则 验证码  
      const reg = /^\d{6}$/  
      if (!reg.test(codeInput.value)) {  
        span.innerText = '输入不合法，请输入6位数字'  
        return false  
      }  
      // 4.5 合法的 清空span  
      span.innerText = ''  
      return true  
    }  
  
    // 5. 验证的是密码  
    // 5.1 获取密码表单  
    const password = document.querySelector('[name=password]')  
    // 5.2 使用change事件 值发生变化的时候  
    password.addEventListener('change', verifyPwd)  
    // 5.3 封装verifyPwd函数  
    function verifyPwd() {  
      const span = password.nextElementSibling  
      // 5.4 定规则 密码  
      const reg = /^[a-zA-Z0-9-_]{6,20}$/  
      if (!reg.test(password.value)) {  
        span.innerText = '输入不合法，请输入6~20位数字、字母、符号组成'  
        return false  
      }  
      // 5.5 合法的 清空span  
      span.innerText = ''  
      return true  
    }  
  
    // 6. 密码的再次验证  
    // 6.1 获取再次验证表单  
    const confirm = document.querySelector('[name=confirm]')  
    // 6.2 使用change事件 值发生变化的时候  
    confirm.addEventListener('change', verifyConfirm)  
    // 6.3 封装verifyConfirm函数  
    function verifyConfirm() {  
      const span = confirm.nextElementSibling  
      // 当前表单的值不等于 密码框的值就是错误的  
      if (confirm.value !== password.value) {  
        span.innerText = '两次密码输入不一致'  
        return false  
      }  
      // 6.5 合法的 清空span  
      span.innerText = ''  
      return true  
    }  
  
    // 7. 我同意  
    const queren = document.querySelector('.icon-queren')  
    queren.addEventListener('click', function () {  
      // 切换类  原来有就删掉，原来没有就添加  
      this.classList.toggle('icon-queren2')  
    })  
  
    // 8. 提交模块  
    const form = document.querySelector('form')  
    form.addEventListener('submit', function (e) {  
      // 判断是否勾选我同意模块，如果有 icon-queren2 说明就勾选了，否则没勾选  
      if (!queren.classList.contains('icon-queren2')) {  
        alert('请勾选同意协议')  
        // 阻止提交  
        e.preventDefault()  
      }  
      // 依次判断上面的每个框框，是否通过，只要有一个没有通过的就阻止  
      // console.log(verifyName())  
      if (!verifyName()) e.preventDefault()  
      if (!verifyPhone()) e.preventDefault()  
      if (!verifyCode()) e.preventDefault()  
      if (!verifyPwd()) e.preventDefault()  
      if (!verifyConfirm()) e.preventDefault()  
    })  
  </script>  
</body>  
  
</html>

案例-登录页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>  
<html lang="zh-CN">  
  
<head>  
  <meta charset="UTF-8">  
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  <meta name="renderer" content="webkit">  
  <link rel="shortcut icon" href="../favicon.ico">  
  <link rel="stylesheet" href="./css/common.css">  
  <link rel="stylesheet" href="./css/login.css">  
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">  
</head>  
  
<body>  
  <!-- 登录头部 -->  
  <div class="xtx-login-header">  
    <h1 class="logo"></h1>  
    <a class="home" href="./index.html">进入网站首页</a>  
  </div>  
  <!-- 登录内容 -->  
  <div class="xtx-login-main">  
    <div class="wrapper">  
      <form action="" autocomplete="off">  
        <div class="box">  
          <div class="tab-nav">  
            <a href="javascript:;" class="active" data-id="0">账户登录</a>  
            <a href="javascript:;" data-id="1">二维码登录</a>  
          </div>  
          <div class="tab-pane">  
            <div class="link">  
              <a href="javascript:;">手机验证码登录</a>  
            </div>  
            <div class="input">  
              <span class="iconfont icon-zhanghao"></span>  
              <input required type="text" placeholder="请输入用户名称/手机号码" name="username">  
            </div>  
            <div class="input">  
              <span class="iconfont icon-suo"></span>  
              <input required type="password" placeholder="请输入密码" name="password">  
            </div>  
            <div class="agree">  
              <label for="my-checkbox">  
                <input type="checkbox" value="1" id="my-checkbox" class="remember" name="agree">  
                <span class="iconfont icon-xuanze"></span>  
              </label>  
              我已同意 <a href="javascript:;">《服务条款》</a href="javascript:;"> 和 <a>《服务条款》</a>  
            </div>  
            <div class="button clearfix">  
              <button type="submit" class="dl">登 录</button>  
              <!-- <a class="dl" href="./center.html">登 录</a> -->  
              <a class="fl" href="./forget.html">忘记密码？</a>  
              <a class="fr" href="./register.html">免费注册</a>  
            </div>  
          </div>  
          <div class="tab-pane" style="display: none;">  
            <img class="code" src="./images/code.png" alt="">  
          </div>  
        </div>  
      </form>  
    </div>  
  </div>  
  <!-- 登录底部 -->  
  <div class="xtx-login-footer">  
    <!-- 版权信息 -->  
    <div class="copyright">  
      <p>  
        <a href="javascript:;">关于我们</a>  
        <a href="javascript:;">帮助中心</a>  
        <a href="javascript:;">售后服务</a>  
        <a href="javascript:;">配送与验收</a>  
        <a href="javascript:;">商务合作</a>  
        <a href="javascript:;">搜索推荐</a>  
        <a href="javascript:;">友情链接</a>  
      </p>  
      <p>CopyRight &copy; 小兔鲜儿</p>  
    </div>  
  </div>  
  
  <script>  
    // 1. tab栏切换  事件委托  
    const tab_nav = document.querySelector('.tab-nav')  
    const pane = document.querySelectorAll('.tab-pane')  
    // 1.1 事件监听  
    tab_nav.addEventListener('click', function (e) {  
      if (e.target.tagName === 'A') {  
        // 取消上一个active  
        tab_nav.querySelector('.active').classList.remove('active')  
        // 当前元素添加active  
        e.target.classList.add('active')  
  
        // 先干掉所有人 for循环  
        for (let i = 0; i < pane.length; i++) {  
          pane[i].style.display = 'none'  
        }  
        // 让对应序号的大pane显示  
        pane[e.target.dataset.id].style.display = 'block'  
      }  
    })  
  
    // 点击提交模块  
    const form = document.querySelector('form')  
    const agree = document.querySelector('[name=agree]')  
    const username = document.querySelector('[name=username]')  
    form.addEventListener('submit', function (e) {  
      e.preventDefault()  
      // 判断是否勾选同意协议  
      if (!agree.checked) {  
        return alert('请勾选同意协议')  
      }  
  
      // 记录用户名到本地存储  
      localStorage.setItem('xtx-uname', username.value)  
      // 跳转到首页  
      location.href = './index.html'  
    })  
  </script>  
</body>  
  
</html>

案例-首页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
<!DOCTYPE html>  
<html lang="zh-CN">  
  
<head>  
  <meta charset="UTF-8">  
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  <meta name="renderer" content="webkit">  
  <link rel="shortcut icon" href="./favicon.ico">  
  <link rel="stylesheet" href="./css/common.css">  
  <link rel="stylesheet" href="./css/index.css">  
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">  
  <script>  
    // 检测 userAgent（浏览器信息）  
    !(function () {  
      const userAgent = navigator.userAgent  
      // 验证是否为Android或iPhone  
      const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)  
      const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)  
  
      // 如果是Android或iPhone，则跳转至移动站点  
      if (android || iphone) {  
        location.href = 'http://m.itcast.cn'  
      }  
  
    })()  
  </script>  
</head>  
  
<body>  
  <!-- 项部导航 -->  
  <div class="xtx_topnav">  
    <div class="wrapper">  
      <!-- 顶部导航 -->  
      <ul class="xtx_navs">  
        <li>  
          <a href="./login.html">请先登录</a>  
        </li>  
        <li>  
          <a href="./register.html">免费注册</a>  
        </li>  
        <li>  
          <a href="./center-order.html">我的订单</a>  
        </li>  
        <li>  
          <a href="./center.html">会员中心</a>  
        </li>  
        <li>  
          <a href="javascript:;">帮助中心</a>  
        </li>  
        <li>  
          <a href="javascript:;">在线客服</a>  
        </li>  
        <li>  
          <a href="javascript:;">  
            <i class="mobile sprites"></i>  
            手机版  
          </a>  
        </li>  
      </ul>  
    </div>  
  </div>  
  <!-- 头部 -->  
  <div class="xtx_header">  
    <div class="wrapper">  
      <!-- 网站Logo -->  
      <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>  
      <!-- 主导航 -->  
      <div class="xtx_navs">  
        <ul class="clearfix">  
          <li>  
            <a href="./index.html">首页</a>  
          </li>  
          <li>  
            <a href="./category01.html">生鲜</a>  
          </li>  
          <li>  
            <a href="./category01.html">美食</a>  
          </li>  
          <li>  
            <a href="./category01.html">餐厨</a>  
          </li>  
          <li>  
            <a href="./category01.html">电器</a>  
          </li>  
          <li>  
            <a href="./category01.html">居家</a>  
          </li>  
          <li>  
            <a href="./category01.html">洗护</a>  
          </li>  
          <li>  
            <a href="./category01.html">孕婴</a>  
          </li>  
          <li>  
            <a href="./category01.html">服装</a>  
          </li>  
        </ul>  
      </div>  
      <!-- 站内搜索 -->  
      <div class="xtx_search clearfix">  
        <!-- 购物车 -->  
        <a href="./cart-none.html" class="xtx_search_cart sprites">  
          <i>2</i>  
        </a>  
        <!-- 搜索框 -->  
        <div class="xtx_search_wrapper">  
          <input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">  
        </div>  
      </div>  
    </div>  
  </div>  
  <!-- 分类及焦点图 -->  
  <div class="xtx_entry">  
    <div class="wrapper">  
      <!-- 分类 -->  
      <div class="xtx_category">  
        <!-- 顶级分类 -->  
        <ul class="xtx_category_super">  
          <li>  
            <a href="javascript:;">  
              生鲜  
              <small>水果</small>  
              <small>蔬菜</small>  
            </a>  
            <i class="sprites"></i>  
          </li>  
          <li class="active">  
            <a href="javascript:;">  
              美食  
              <small>面点</small>  
              <small>干果</small>  
            </a>  
            <i class="sprites"></i>  
          </li>  
          <li>  
            <a href="javascript:;">  
              电器  
              <small>数码产品</small>  
            </a>  
            <i class="sprites"></i>  
          </li>  
          <li>  
            <a href="javascript:;">  
              居家  
              <small>床品</small>  
              <small>四件套</small>  
              <small>被枕</small>  
            </a>  
            <i class="sprites"></i>  
          </li>  
          <li>  
            <a href="javascript:;">  
              洗护  
              <small>洗发洗护</small>  
              <small>美妆</small>  
            </a>  
            <i class="sprites"></i>  
          </li>  
          <li>  
            <a href="javascript:;">  
              孕婴  
              <small>奶粉</small>  
              <small>玩具</small>  
              <small>辅食</small>  
            </a>  
            <i class="sprites"></i>  
          </li>  
          <li>  
            <a href="javascript:;">  
              餐橱  
              <small>数码产品</small>  
            </a>  
            <i class="sprites"></i>  
          </li>  
          <li>  
            <a href="javascript:;">  
              服饰  
              <small>女装</small>  
              <small>男装</small>  
            </a>  
            <i class="sprites"></i>  
          </li>  
          <li>  
            <a href="javascript:;">  
              杂货  
              <small>户外</small>  
              <small>图书</small>  
            </a>  
            <i class="sprites"></i>  
          </li>  
          <li>  
            <a href="javascript:;">  
              品牌  
              <small>品牌制造</small>  
            </a>  
            <i class="sprites"></i>  
          </li>  
        </ul>  
        <!-- 子分类 -->  
        <div class="xtx_category_subset">  
  
        </div>  
      </div>  
      <!-- 焦点图 -->  
      <div class="xtx_banner">  
  
        <ul>  
          <li>  
            <a href="javascript:;">  
              <img src="./uploads/banner_1.png" alt="">  
            </a>  
          </li>  
        </ul>  
        <!-- 切换按钮  -->  
        <a href="javascript:;" class="prev sprites"></a>  
        <a href="javascript:;" class="next sprites"></a>  
        <!-- 指示器 -->  
        <div class="indicator">  
          <span></span>  
          <span></span>  
          <span class="active"></span>  
          <span></span>  
          <span></span>  
        </div>  
  
      </div>  
    </div>  
  </div>  
  <!-- 新鲜好物 -->  
  <div class="xtx_goods_new xtx_panel">  
    <div class="wrapper">  
      <!-- 面板头部 -->  
      <div class="xtx_panel_header">  
        <h3>新鲜好物<small>新鲜出炉 品质靠谱</small></h3>  
        <a href="./index-new.html" class="more">  
          查看全部<i class="sprites"></i>  
        </a>  
      </div>  
      <!-- 商品列表 -->  
      <div class="xtx_panel_goods_1">  
        <a href="javascript:;">  
          <img src="./uploads/new_goods_1.jpg" alt="">  
          <span class="name">睿米无线吸尘器F8</span>  
          <span class="price"><small>￥</small>899</span>  
        </a>  
        <a href="javascript:;">  
          <img src="./uploads/new_goods_2.jpg" alt="">  
          <span class="name">智能环绕3D空调</span>  
          <span class="price"><small>￥</small>1299</span>  
        </a>  
        <a href="javascript:;">  
          <img src="./uploads/new_goods_3.jpg" alt="">  
          <span class="name">广东软软糯米煲仔饭</span>  
          <span class="price"><small>￥</small>129</span>  
        </a>  
        <a href="javascript:;">  
          <img src="./uploads/new_goods_4.jpg" alt="">  
          <span class="name">罗西机械智能手表</span>  
          <span class="price"><small>￥</small>3399</span>  
        </a>  
      </div>  
    </div>  
  </div>  
  <!-- 人气推荐 -->  
  <div class="xtx_goods_popular xtx_panel">  
    <div class="wrapper">  
      <!-- 面板头部 -->  
      <div class="xtx_panel_header">  
        <h3>人气推荐<small>人气爆款 不容错过</small></h3>  
      </div>  
      <!-- 商品列表 -->  
      <div class="xtx_panel_goods_1">  
        <a href="javascript:;">  
          <img src="./uploads/popular_1.jpg">  
          <span class="title">特惠推荐</span>  
          <span class="alt">我猜得到 你的需要</span>  
        </a>  
        <a href="./index-hot.html">  
          <img src="./uploads/popular_2.jpg">  
          <span class="title">爆款推荐</span>  
          <span class="alt">人气好物推荐</span>  
        </a>  
        <a href="./index-one.html">  
          <img src="./uploads/popular_3.jpg">  
          <span class="title">场景使用一站买全</span>  
          <span class="alt">编辑精心整理推荐</span>  
        </a>  
        <a href="javascript:;">  
          <img src="./uploads/popular_4.jpg">  
          <span class="title">领券中心</span>  
          <span class="alt">发现更多超值优惠券</span>  
        </a>  
      </div>  
    </div>  
  </div>  
  <!-- 热门品牌 -->  
  <div class="xtx_goods_brand xtx_panel">  
    <div class="wrapper">  
      <div class="xtx_panel_header">  
        <h3>热门品牌<small>国际经典 品质保证</small></h3>  
        <div class="page-bar">  
          <a href="javascript:;" class="prev sprites"></a>  
          <a href="javascript:;" class="next sprites active"></a>  
        </div>  
      </div>  
      <!-- 商品列表 -->  
      <div class="xtx_goods">  
        <ul>  
          <li>  
            <a href="./index-brand.html">  
              <img src="./uploads/brand_goods_1.jpg" alt="">  
            </a>  
            <a href="./brand-list.html">  
              <img src="./uploads/brand_goods_2.jpg" alt="">  
            </a>  
            <a href="javascript:;">  
              <img src="./uploads/brand_goods_3.jpg" alt="">  
            </a>  
            <a href="javascript:;">  
              <img src="./uploads/brand_goods_4.jpg" alt="">  
            </a>  
            <a href="javascript:;">  
              <img src="./uploads/brand_goods_5.jpg" alt="">  
            </a>  
          </li>  
        </ul>  
      </div>  
    </div>  
  </div>  
  <!-- 分类商品 -->  
  <div class="xtx_goods_category xtx_panel">  
    <div class="wrapper">  
      <!-- 生鲜 -->  
      <div class="xtx_panel_header">  
        <h3>生鲜</h3>  
        <a href="javascript:;" class="more">  
          查看全部<i class="sprites"></i>  
        </a>  
        <div class="tabs-bar">  
          <a href="javascript:;" class="active">水果</a>  
          <a href="javascript:;">蔬菜</a>  
          <a href="javascript:;">肉禽蛋</a>  
          <a href="javascript:;">裤装</a>  
          <a href="javascript:;">衬衫</a>  
          <a href="javascript:;">内衣</a>  
        </div>  
      </div>  
      <!-- 商品列表 -->  
      <div class="xtx_panel_goods_2">  
        <ul class="clearfix">  
          <li>  
            <a href="javascript:;">  
              <img src="./uploads/fresh_goods_cover.jpg" alt="">  
            </a>  
            <div class="label">  
              <span>生鲜馆</span>  
              <span>全场3件8折</span>  
            </div>  
          </li>  
          <li>  
            <!-- 商品图片 -->  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/fresh_goods_1.jpg" alt="">  
              </div>  
            </a>  
            <!-- 商品信息 -->  
            <div class="meta">  
              <p class="name">美威 智利原味三文鱼排 240g/袋 4片装</p>  
              <p class="flag">海鲜年货</p>  
              <p class="price"><small>￥</small>59</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/fresh_goods_2.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只</p>  
              <p class="flag">火锅食材</p>  
              <p class="price"><small>￥</small>71.9</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/fresh_goods_3.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装</p>  
              <p class="flag">海鲜水产</p>  
              <p class="price"><small>￥</small>49.9</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/fresh_goods_4.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">渔公码头 大连鲜食入味 即食海参 辽参刺参 调味海</p>  
              <p class="flag">海鲜年货</p>  
              <p class="price"><small>￥</small>899</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/fresh_goods_5.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">越南进口白心火龙果4个 装 标准果 单果400-550g </p>  
              <p class="flag"></p>  
              <p class="price"><small>￥</small>29</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/fresh_goods_6.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">广西沃柑 柑橘1.5kg</p>  
              <p class="flag">新鲜水果</p>  
              <p class="price"><small>￥</small>59</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/fresh_goods_7.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">进口 牛油果 6个装 单果重约130-180g</p>  
              <p class="flag">新鲜水果</p>  
              <p class="price"><small>￥</small>39.9</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/fresh_goods_8.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">泰国进口山竹5A级 500g </p>  
              <p class="flag">新鲜水果</p>  
              <p class="price"><small>￥</small>29.9</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
        </ul>  
      </div>  
  
      <!-- 服饰 -->  
      <div class="xtx_panel_header">  
        <h3>服饰</h3>  
        <a href="javascript:;" class="more">  
          查看全部<i class="sprites"></i>  
        </a>  
        <div class="tabs-bar">  
          <a href="javascript:;" class="active">行李箱</a>  
          <a href="javascript:;">男士包袋</a>  
          <a href="javascript:;">女士包袋</a>  
          <a href="javascript:;">钱包及小提袋</a>  
          <a href="javascript:;">男鞋</a>  
          <a href="javascript:;">女鞋</a>  
          <a href="javascript:;">拖鞋</a>  
        </div>  
      </div>  
      <!-- 商品列表 -->  
      <div class="xtx_panel_goods_2">  
        <ul class="clearfix">  
          <li>  
            <a href="javascript:;">  
              <img src="./uploads/clothes_goods_cover.jpg" alt="">  
            </a>  
            <div class="label">  
              <span>服饰馆</span>  
              <span>3折狂欢</span>  
            </div>  
          </li>  
          <li>  
            <!-- 商品图片 -->  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/clothes_goods_1.jpg" alt="">  
              </div>  
            </a>  
            <!-- 商品信息 -->  
            <div class="meta">  
              <p class="name">人本秋季厚底帆布鞋 韩版低帮增高学生</p>  
              <p class="flag"></p>  
              <p class="price"><small>￥</small>55</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/clothes_goods_2.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">迪士尼真皮针扣表带宽度 14-16mm规格双色压纹 女表带</p>  
              <p class="flag">海鲜年货</p>  
              <p class="price"><small>￥</small>20.9</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/clothes_goods_3.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装</p>  
              <p class="flag">海鲜水产</p>  
              <p class="price"><small>￥</small>209</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/clothes_goods_4.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤</p>  
              <p class="flag"></p>  
              <p class="price"><small>￥</small>274.5</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/clothes_goods_5.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">拉夫劳伦t恤男正品 </p>  
              <p class="flag">圆领短袖</p>  
              <p class="price"><small>￥</small>99</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/clothes_goods_6.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">李宁跑步鞋男鞋空气 弧2018春季款</p>  
              <p class="flag"></p>  
              <p class="price"><small>￥</small>79</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/clothes_goods_7.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">Dickies男鞋2020春季 英伦休闲工装鞋低帮</p>  
              <p class="flag"></p>  
              <p class="price"><small>￥</small>179</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/clothes_goods_8.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">北极绒春夏季纯棉背心 男士修身纯色打底</p>  
              <p class="flag"></p>  
              <p class="price"><small>￥</small>69</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
        </ul>  
      </div>  
  
      <!-- 餐厨 -->  
      <div class="xtx_panel_header">  
        <h3>餐厨</h3>  
        <a href="javascript:;" class="more">  
          查看全部<i class="sprites"></i>  
        </a>  
        <div class="tabs-bar">  
          <a href="javascript:;" class="active">水果</a>  
          <a href="javascript:;">蔬菜</a>  
          <a href="javascript:;">肉禽蛋</a>  
          <a href="javascript:;">裤装</a>  
          <a href="javascript:;">衬衫</a>  
          <a href="javascript:;">内衣</a>  
        </div>  
      </div>  
      <!-- 商品列表 -->  
      <div class="xtx_panel_goods_2">  
        <ul class="clearfix">  
          <li>  
            <a href="javascript:;">  
              <img src="./uploads/kitchen_goods_cover.jpg" alt="">  
            </a>  
            <div class="label">  
              <span>餐厨馆</span>  
              <span>大额优惠<br>等你来拿</span>  
            </div>  
          </li>  
          <li>  
            <!-- 商品图片 -->  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/kitchen_goods_1.jpg" alt="">  
              </div>  
            </a>  
            <!-- 商品信息 -->  
            <div class="meta">  
              <p class="name">创意可爱不锈钢便携餐具 套装筷子便携三件套</p>  
              <p class="flag"></p>  
              <p class="price"><small>￥</small>5.9</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/kitchen_goods_2.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">三金西瓜霜竹炭牙刷软毛 成人家用家庭装</p>  
              <p class="flag"></p>  
              <p class="price"><small>￥</small>20.9</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/kitchen_goods_3.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">朴（TOPOTO）大卫免手 洗平板拖把拓扑懒人木地 板刮刮乐桶拖布</p>  
              <p class="flag"></p>  
              <p class="price"><small>￥</small>129</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/kitchen_goods_4.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤</p>  
              <p class="flag"></p>  
              <p class="price"><small>￥</small>274.5</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/kitchen_goods_5.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">金纺不伤手柔顺剂 妈妈的选择</p>  
              <p class="flag"></p>  
              <p class="price"><small>￥</small>29</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/kitchen_goods_6.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">洁成绵柔抹布洗碗巾超 值5片装 洗锅刷碗</p>  
              <p class="flag"></p>  
              <p class="price"><small>￥</small>10.9</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/kitchen_goods_7.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">大卫双驱动旋转拖把桶 免手洗拓扑拖布地拖墩布 </p>  
              <p class="flag"></p>  
              <p class="price"><small>￥</small>159</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/kitchen_goods_8.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">斧头牌（AXE）去污地板 清洁剂2L 柠檬清香 </p>  
              <p class="flag">海鲜年货</p>  
              <p class="price"><small>￥</small>22.9</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
        </ul>  
      </div>  
  
      <!-- 居家 -->  
      <div class="xtx_panel_header">  
        <h3>居家</h3>  
        <a href="javascript:;" class="more">  
          查看全部<i class="sprites"></i>  
        </a>  
        <div class="tabs-bar">  
          <a href="javascript:;" class="active">咖啡具</a>  
          <a href="javascript:;">水具酒具</a>  
          <a href="javascript:;">锅具</a>  
          <a href="javascript:;">餐具</a>  
          <a href="javascript:;">功能厨具</a>  
          <a href="javascript:;">茶具</a>  
          <a href="javascript:;">清洁保鲜</a>  
        </div>  
      </div>  
      <!-- 商品列表 -->  
      <div class="xtx_panel_goods_2">  
        <ul class="clearfix">  
          <li>  
            <a href="javascript:;">  
              <img src="./uploads/home_goods_cover.jpg" alt="">  
            </a>  
            <div class="label">  
              <span>居家馆</span>  
              <span>全场满减</span>  
            </div>  
          </li>  
          <li>  
            <!-- 商品图片 -->  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/home_goods_1.jpg" alt="">  
              </div>  
            </a>  
            <!-- 商品信息 -->  
            <div class="meta">  
              <p class="name">菜鸟异常专用链接 非请 勿拍</p>  
              <p class="flag">海鲜年货</p>  
              <p class="price"><small>￥</small>8999</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/home_goods_2.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">【中盐软水盐】汉斯希 尔家用软水机适配</p>  
              <p class="flag"></p>  
              <p class="price"><small>￥</small>65</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/home_goods_3.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">云米净水壶家用直饮台式 净水机渗透过滤自来水</p>  
              <p class="flag">海鲜年货</p>  
              <p class="price"><small>￥</small>129</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/home_goods_4.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">ztk恒温调奶器配件玻璃壶 炖盅</p>  
              <p class="flag">海鲜年货</p>  
              <p class="price"><small>￥</small>129</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/home_goods_5.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">荞麦枕头单人枕芯双人 护颈椎枕头芯</p>  
              <p class="flag"></p>  
              <p class="price"><small>￥</small>29</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/home_goods_6.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">Bear/小熊 LLJ-B04G1 家用多功能切碎机 电动</p>  
              <p class="flag">料理机</p>  
              <p class="price"><small>￥</small>10.9</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/home_goods_7.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">荣事达薄饼机春饼春卷皮 家用博饼机电饼铛 </p>  
              <p class="flag"></p>  
              <p class="price"><small>￥</small>159</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <div class="img-box">  
                <img src="./uploads/home_goods_8.jpg" alt="">  
              </div>  
            </a>  
            <div class="meta">  
              <p class="name">美式双人实木床 红实木 显档次</p>  
              <p class="flag"></p>  
              <p class="price"><small>￥</small>22.9</p>  
            </div>  
            <!-- 其它 -->  
            <div class="extra">  
              <a href="javascript:;">  
                <span>找相似</span>  
                <span>发现现多宝贝&gt;</span>  
              </a>  
            </div>  
          </li>  
        </ul>  
      </div>  
    </div>  
  </div>  
  <!-- 最新主题 -->  
  <div class="xtx_goods_topic xtx_panel">  
    <div class="wrapper">  
      <div class="xtx_panel_header">  
        <h3>最新专题</h3>  
        <a href="javascript:;" class="more">  
          查看全部<i class="sprites"></i>  
        </a>  
      </div>  
      <div class="xtx_topic">  
        <ul class="clearfix">  
          <li>  
            <a href="javascript:;">  
              <img src="./uploads/topic_goods_1.jpg" alt="">  
              <div class="meta">  
                <p class="title">  
                  吃这些美食才不算辜负自己  
                  <small>餐厨起居洗护好物</small>  
                </p>  
                <span class="price"><small>￥</small>29.9起</span>  
              </div>  
            </a>  
            <div class="social">  
              <span class="like">  
                <i class="sprites"></i>1220  
              </span>  
              <span class="view">  
                <i class="sprites"></i>1800  
              </span>  
  
              <span class="reply">  
                <i class="sprites"></i>1220  
              </span>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <img src="./uploads/topic_goods_2.jpg" alt="">  
              <div class="meta">  
                <p class="title">  
                  吃这些美食才不算辜负自己  
                  <small>餐厨起居洗护好物</small>  
                </p>  
                <span class="price"><small>￥</small>29.9起</span>  
              </div>  
            </a>  
            <div class="social">  
              <span class="liked">  
                <i class="sprites"></i>1220  
              </span>  
              <span class="view">  
                <i class="sprites"></i>1800  
              </span>  
  
              <span class="reply">  
                <i class="sprites"></i>1220  
              </span>  
            </div>  
          </li>  
          <li>  
            <a href="javascript:;">  
              <img src="./uploads/topic_goods_3.jpg" alt="">  
              <div class="meta">  
                <p class="title">  
                  吃这些美食才不算辜负自己  
                  <small>餐厨起居洗护好物</small>  
                </p>  
                <span class="price"><small>￥</small>29.9起</span>  
              </div>  
            </a>  
            <div class="social">  
              <span class="like">  
                <i class="sprites"></i>1220  
              </span>  
              <span class="view">  
                <i class="sprites"></i>1800  
              </span>  
  
              <span class="reply">  
                <i class="sprites"></i>1220  
              </span>  
            </div>  
          </li>  
        </ul>  
      </div>  
    </div>  
  </div>  
  <!-- 公共底部 -->  
  <div class="xtx_footer clearfix">  
    <div class="wrapper">  
      <!-- 联系我们 -->  
      <div class="contact clearfix">  
        <dl>  
          <dt>客户服务</dt>  
          <dd class="chat">在线客服</dd>  
          <dd class="feedback">问题反馈</dd>  
        </dl>  
        <dl>  
          <dt>关注我们</dt>  
          <dd class="weixin">公众号</dd>  
          <dd class="weibo">微博</dd>  
        </dl>  
        <dl>  
          <dt>下载APP</dt>  
          <dd class="qrcode">  
            <img src="./uploads/qrcode.jpg">  
          </dd>  
          <dd class="download">  
            <span>扫描二维码</span>  
            <span>立马下载APP</span>  
            <a href="javascript:;">下载页面</a>  
          </dd>  
        </dl>  
        <dl>  
          <dt>服务热线</dt>  
          <dd class="hotline">  
            400-0000-000  
            <small>周一至周日 8:00-18:00</small>  
          </dd>  
        </dl>  
      </div>  
    </div>  
    <!-- 其它 -->  
    <div class="extra">  
      <div class="wrapper">  
        <!-- 口号 -->  
        <div class="slogan">  
          <a href="javascript:;" class="price">价格亲民</a>  
          <a href="javascript:;" class="express">物流快捷</a>  
          <a href="javascript:;" class="quality">品质新鲜</a>  
        </div>  
        <!-- 版权信息 -->  
        <div class="copyright">  
          <p>  
            <a href="javascript:;">关于我们</a>  
            <a href="javascript:;">帮助中心</a>  
            <a href="javascript:;">售后服务</a>  
            <a href="javascript:;">配送与验收</a>  
            <a href="javascript:;">商务合作</a>  
            <a href="javascript:;">搜索推荐</a>  
            <a href="javascript:;">友情链接</a>  
          </p>  
          <p>CopyRight &copy; 小兔鲜儿</p>  
        </div>  
      </div>  
    </div>  
  </div>  
  
  <script>  
    // 1. 获取第一个小li  
    const li1 = document.querySelector('.xtx_navs li:first-child')  
    const li2 = li1.nextElementSibling  
    // 2. 最好做个渲染函数 因为退出登录需要重新渲染  
    function render() {  
      // 2.1 读取本地存储的用户名  
      const uname = localStorage.getItem('xtx-uname')  
      // console.log(uname)  
      if (uname) {  
        li1.innerHTML = `<a href="javascript:;"><i class="iconfont icon-user">${uname}</i></a>`  
        li2.innerHTML = `<a href="javascript:;">退出登录</a>`  
      } else {  
        li1.innerHTML = `<a href="./login.html">请先登录</a>`  
        li2.innerHTML = `<a href="./register.html">免费注册</a>`  
      }  
    }  
    render() // 调用函数  
  
    // 2. 点击退出登录模块  
    li2.addEventListener('click', function () {  
      // 删除本地存储的数据  
      localStorage.removeItem('xtx-uname')  
      // 重新渲染  
      render()  
    })  
  </script>  
</body>  
  
</html>