JavaScript期末复习

一些简单的JS

1.简单加法器

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="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单加法器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
        }
        input {
            padding: 8px;
            margin: 5px;
            font-size: 16px;
        }
        button {
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h2>简单加法器</h2>

    <button onclick="getFirstNumber()">输入第一个值</button>

    <script>
        function getFirstNumber() {
            // 弹窗输入第一个值
            var num1 = prompt("请输入第一个值：");

            // 如果用户点击取消或未输入任何值，退出函数
            if (num1 === null || num1 === "") {
                return;
            }

            // 将输入值转换为数字类型
            num1 = parseFloat(num1);

            // 弹窗输入第二个值
            var num2 = prompt("请输入第二个值：");

            // 如果用户点击取消或未输入任何值，退出函数
            if (num2 === null || num2 === "") {
                return;
            }

            // 将第二个输入值转换为数字类型
            num2 = parseFloat(num2);

            // 计算并显示结果
            var sum = num1 + num2;
            alert('两个数的和是：' + sum);
        }
    </script>

</body>
</html>

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>年龄判断</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
        }
        button {
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h2>年龄判断</h2>

    <button onclick="checkAge()">输入年龄</button>

    <script>
        function checkAge() {
            // 弹窗输入年龄
            var age = prompt("请输入您的年龄：");

            // 如果用户点击取消或未输入任何值，退出函数
            if (age === null || age === "") {
                return;
            }

            // 将输入值转换为数字类型
            age = parseInt(age);

            // 判断年龄类别并显示结果
            if (age >= 18) {
                alert('成年人');
            } else {
                alert('青少年');
            }
        }
    </script>

</body>
</html>

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加边框</title>
    <style>
        #myDiv {
            width: 200px;
            height: 200px;
            border: 1px solid black; /* 初始边框样式 */
            margin: 20px;
        }
    </style>
</head>
<body>

    <h2>添加边框</h2>

    <div id="myDiv">这是一个 div 元素</div>

    <button onclick="addRedBorder()">Change</button>

    <script>
        function addRedBorder() {
            // 获取 div 元素
            var myDiv = document.getElementById('myDiv');

            // 添加红色双线边框
            myDiv.style.border = '2px double red';
        }
    </script>

</body>
</html>

4.获取最大值

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取最大值</title>
    <script>
        function findMaxValue() {
            // 给定数组
            var numbers = [2, 6, 1, 77, 52, 25, 7, 99];

            // 使用Math.max.apply获取数组中的最大值
            var maxValue = Math.max.apply(null, numbers);

            // 显示结果
            alert('数组中的最大值是：' + maxValue);
        }
    </script>
</head>
<body>

    <h2>获取数组中的最大值</h2>

    <button onclick="findMaxValue()">找到最大值</button>

</body>
</html>

5.改变盒子大小

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="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>改变盒子大小</title>
    <style>
        #myBox {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transition: width 0.5s, height 0.5s; /* 添加过渡效果 */
        }
    </style>
    <script>
        function changeBoxSize() {
            // 获取盒子元素
            var myBox = document.getElementById('myBox');

            // 随机生成新的宽度和高度
            var newWidth = Math.floor(Math.random() * 200) + 50;
            var newHeight = Math.floor(Math.random() * 200) + 50;

            // 应用新的宽度和高度
            myBox.style.width = newWidth + 'px';
            myBox.style.height = newHeight + 'px';
        }
    </script>
</head>
<body>

    <h2>鼠标单击改变盒子大小</h2>

    <div id="myBox" onclick="changeBoxSize()"></div>

</body>
</html>

6.生成星星图案

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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成星星图案</title>
    <script>
        // 定义生成星星图案的函数
        function generateStarPattern() {
            // 弹窗输入行数和列数
            var row = prompt('请输入您打印几行星星:');
            var col = prompt('请输入您打印几列星星:');

            // 初始化一个空字符串用于存储星星图案
            var str = '';

            // 循环生成星星图案
            for (var i = 1; i <= row; i++) {
                // 每一行的星星数
                for (var j = 1; j <= col; j++) {
                    str += '☆'; // 在字符串中添加一个星星
                }
                str += '\n'; // 在字符串中添加换行符，表示换行
            }

            // 输出星星图案到控制台
            console.log(str);
        }
    </script>
</head>
<body>

    <h2>生成星星图案</h2>

    <!-- 点击按钮触发生成星星图案的函数 -->
    <button onclick="generateStarPattern()">生成星星图案</button>

</body>
</html>

7.判断成绩级别

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="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>判断成绩级别</title>
    <script>
        function judgeGrade() {
            // 弹窗输入成绩
            var score = prompt('请输入您的成绩：');

            // 将输入值转换为数字类型
            score = parseFloat(score);

            // 判断成绩级别并输出到控制台
            if (score >= 90) {
                console.log('A');
            } else if (score >= 80 && score < 90) {
                console.log('B');
            } else if (score >= 70 && score < 80) {
                console.log('C');
            } else if (score >= 60 && score < 70) {
                console.log('D');
            } else {
                console.log('E');
            }
        }
    </script>
</head>
<body>

    <h2>判断成绩级别</h2>

    <!-- 点击按钮触发判断成绩级别的函数 -->
    <button onclick="judgeGrade()">判断成绩级别</button>

</body>
</html>

8.计算数组长度

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算数组长度</title>
    <script>
        function getArrayLength() {
            // 定义数组
            var myArray = [2, 3, 4, 5, 6, 7];

            // 获取数组长度
            var arrayLength = myArray.length;

            // 弹窗显示数组长度
            alert('数组长度为：' + arrayLength);
        }
    </script>
</head>
<body>

    <h2>计算数组长度</h2>

    <!-- 点击按钮触发获取数组长度的函数 -->
    <button onclick="getArrayLength()">获取数组长度</button>

</body>
</html>

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串连接</title>
    <script>
        function concatenateStrings() {
            // 弹窗获取用户输入的两句话
            var sentence1 = prompt('请输入第一句话：');
            var sentence2 = prompt('请输入第二句话：');

            // 使用concat()函数连接两句话
            var result = sentence1.concat(' ', sentence2);

            // 弹窗显示连接后的结果
            alert('连接后的结果：' + result);
        }
    </script>
</head>
<body>

    <h2>字符串连接</h2>

    <!-- 点击按钮触发字符串连接函数 -->
    <button onclick="concatenateStrings()">连接两句话</button>

</body>
</html>

10.判断成绩类别

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="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>判断成绩类别</title>
    <script>
        function judgeScoreCategory() {
            // 弹窗输入成绩
            var score = prompt('请输入您的成绩：');

            // 将输入值转换为数字类型
            score = parseFloat(score);

            // 判断成绩类别并输出到弹出窗口
            if (score < 60) {
                alert('成绩不合格，加油！');
            } else if (score >= 60 && score <= 75) {
                alert('成绩良好，不错呀');
            } else if (score > 75 && score <= 85) {
                alert('成绩很好，很棒');
            } else if (score > 85 && score <= 100) {
                alert('成绩优秀，超级棒');
            } else {
                alert('请输入有效成绩');
            }
        }
    </script>
</head>
<body>

    <h2>判断成绩类别</h2>

    <!-- 点击按钮触发判断成绩类别的函数 -->
    <button onclick="judgeScoreCategory()">判断成绩类别</button>

</body>
</html>

11.获取小于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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取小于2的数组元素</title>
    <script>
        function getNumbersLessThan2() {
            // 定义数组
            var myArray = [2, 6, 1, 77, 52, 25, 7, 99];

            // 使用数组的filter方法过滤小于2的元素
            var filteredArray = myArray.filter(function(number) {
                return number < 2;
            });

            // 弹窗显示结果
            alert('小于2的数组元素为：' + filteredArray);
        }
    </script>
</head>
<body>

    <h2>获取小于2的数组元素</h2>

    <!-- 点击按钮触发获取小于2的数组元素的函数 -->
    <button onclick="getNumbersLessThan2()">获取小于2的数组元素</button>

</body>
</html>

12.计算圆的面积

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算圆的面积</title>
    <script>
        function calculateCircleArea() {
            // 获取圆周率常数π
            var pi = Math.PI;

            // 定义半径
            var radius = 7;

            // 计算圆的面积
            var area = pi * Math.pow(radius, 2);

            // 弹窗显示结果
            alert('半径为7单位的圆的面积为：' + area.toFixed(2));
        }
    </script>
</head>
<body>

    <h2>计算圆的面积</h2>

    <!-- 点击按钮触发计算圆的面积的函数 -->
    <button onclick="calculateCircleArea()">计算圆的面积</button>

</body>
</html>

13.全选与反选

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格操作</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        table, th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: left;
        }
    </style>
</head>
<body>

    <h2>表格操作</h2>

    <!-- 表格 -->
    <table>
        <thead>
            <tr>
                <th>操作</th>
                <th>编号</th>
                <th>图书名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1</td>
                <td>Javascript</td>
                <td>39.90</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>PHP</td>
                <td>39.90</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>3</td>
                <td>C语言</td>
                <td>39.90</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>4</td>
                <td>Python</td>
                <td>39.90</td>
            </tr>
        </tbody>
    </table>

    <!-- 按钮触发全选、全不选、反选 -->
    <button onclick="selectAll()">全选</button>
    <button onclick="unselectAll()">全不选</button>
    <button onclick="invertSelection()">反选</button>

    <script>
        // 全选函数
        function selectAll() {
            // 获取所有复选框，并设置为选中状态
            document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => checkbox.checked = true);
        }

        // 全不选函数
        function unselectAll() {
            // 获取所有复选框，并设置为未选中状态
            document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => checkbox.checked = false);
        }

        // 反选函数
        function invertSelection() {
            // 获取所有复选框，并反选状态
            document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => checkbox.checked = !checkbox.checked);
        }
    </script>

</body>
</html>

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>改变背景颜色</title>
</head>
<body>

    <h2>改变背景颜色</h2>

    <!-- 按钮触发改变背景颜色 -->
    <button onclick="changeBackgroundColor('red')">红色</button>
    <button onclick="changeBackgroundColor('yellow')">黄色</button>
    <button onclick="changeBackgroundColor('blue')">蓝色</button>
    <button onclick="changeCustomColor()">自定义颜色</button>

    <script>
        // 改变背景颜色函数
        function changeBackgroundColor(color) {
            document.body.style.backgroundColor = color;
        }

        // 自定义颜色函数
        function changeCustomColor() {
            var customColor = prompt('请输入自定义颜色（如#00ff00）：');
            document.body.style.backgroundColor = customColor;
        }
    </script>

</body>
</html>

15.计算圆的周长和面积

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算圆的周长和面积</title>
</head>
<body>

    <h2>计算圆的周长和面积</h2>

    <!-- 点击按钮触发输入半径 -->
    <button onclick="inputRadius()">输入半径</button>

    <!-- 显示结果的区域 -->
    <div id="result"></div>

    <script>
        // 输入半径函数
        function inputRadius() {
            // 弹窗输入半径
            var radiusInput = prompt('请输入圆的半径：');

            // 将输入的半径转换为浮点数
            var radius = parseFloat(radiusInput);

            // 检查输入是否合法
            if (isNaN(radius) || radius <= 0) {
                alert('请输入有效的正数半径');
                return;
            }

            // 计算圆的周长和面积
            var circumference = 2 * Math.PI * radius;
            var area = Math.PI * Math.pow(radius, 2);

            // 显示结果
            document.getElementById('result').innerHTML = `
                <p>圆的半径为：${radius.toFixed(2)}</p>
                <p>圆的周长为：${circumference.toFixed(2)}</p>
                <p>圆的面积为：${area.toFixed(2)}</p>
            `;
        }
    </script>

</body>
</html>

16.3D轮播图

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6张图片的3D轮播图</title>
    <style>
        body {
            perspective: 1000px;
            margin: 0;
            overflow: hidden;
        }

        .carousel {
            display: flex;
            width: 100%;
            transform-style: preserve-3d;
            transition: transform 1s ease-in-out;
        }

        .carousel-item {
            width: 100%;
            flex: 0 0 100%;
            margin-right: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transform-style: preserve-3d;
            transition: transform 0.5s ease-in-out;
        }

        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>

    <!-- 轮播图容器 -->
    <div class="carousel">
        <!-- 每个轮播项 -->
        <div class="carousel-item">
            <img src="./banner/1.jpg" alt="Image 1">
        </div>
        <div class="carousel-item">
            <img src="./banner/2.jpg" alt="Image 2">
        </div>
        <!-- <div class="carousel-item">
            <img src="./banner/3.jpg" alt="Image 3">
        </div>
        <div class="carousel-item">
            <img src="./banner/4.jpg" alt="Image 4">
        </div>
        <div class="carousel-item">
            <img src="./banner/5.jpg" alt="Image 5">
        </div>
        <div class="carousel-item">
            <img src="./banner/6.jpg" alt="Image 6">
        </div> -->
    </div>

    <script>
        // 获取轮播图容器和所有轮播项
        const carousel = document.querySelector('.carousel');
        const items = document.querySelectorAll('.carousel-item');

        // 当前轮播项的索引
        let currentIndex = 0;

        // 旋转轮播图函数
        function rotateCarousel() {
            // 根据当前轮播项的索引计算旋转角度
            const angle = -currentIndex * 360 / items.length;
            // 应用旋转变换到轮播图容器
            carousel.style.transform = `translateZ(-200px) rotateY(${angle}deg)`;
        }

        // 下一张轮播图函数
        function nextSlide() {
            // 更新当前轮播项的索引
            currentIndex = (currentIndex + 1) % items.length;
            // 旋转轮播图
            rotateCarousel();
        }

        // 上一张轮播图函数
        function prevSlide() {
            // 更新当前轮播项的索引
            currentIndex = (currentIndex - 1 + items.length) % items.length;
            // 旋转轮播图
            rotateCarousel();
        }

        // 初始化轮播图位置
        rotateCarousel();

        // 设置定时器自动播放，可根据需要调整时间间隔
        setInterval(nextSlide, 3000);
    </script>

</body>
</html>

17.红绿灯倒计时

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="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红绿灯倒计时</title>
    <style>
        #traffic-light {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }

        .light {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 10px;
            background-color: gray;
        }
        
        #countdown {
            font-size: 20px;
            margin-top: 20px;
        }
    </style>
</head>
<body>

    <div id="traffic-light">
        <div id="red" class="light"></div>
        <div id="yellow" class="light"></div>
        <div id="green" class="light"></div>
        <div id="countdown">倒计时: <span id="timer">10</span> 秒</div>
    </div>

    <script>
        // 初始化倒计时和当前灯
        let countdown = 10;
        let currentLight = 'red';

        // 更新倒计时和灯的显示
        function updateDisplay() {
            document.getElementById('timer').textContent = countdown;
            document.getElementById('red').style.backgroundColor = currentLight === 'red' ? 'red' : 'gray';
            document.getElementById('yellow').style.backgroundColor = currentLight === 'yellow' ? 'yellow' : 'gray';
            document.getElementById('green').style.backgroundColor = currentLight === 'green' ? 'green' : 'gray';
        }

        // 切换灯的函数
        function switchLight() {
            switch (currentLight) {
                case 'red':
                    currentLight = 'green';
                    countdown = 15;  // 切换到绿灯时重置倒计时
                    break;
                case 'green':
                    currentLight = 'yellow';
                    countdown = 3;   // 切换到黄灯时重置倒计时
                    break;
                case 'yellow':
                    currentLight = 'red';
                    countdown = 10;  // 切换到红灯时重置倒计时
                    break;
                default:
                    break;
            }

            updateDisplay();  // 更新显示
        }

        // 每秒更新倒计时
        setInterval(function () {
            countdown--;
            if (countdown === 0) {
                switchLight();  // 到达0秒时切换灯
            }
            updateDisplay();  // 更新显示
        }, 1000);

        // 页面加载时初始化显示
        updateDisplay();
    </script>

</body>
</html>

18.文本读取

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>读取.txt文件内容</title>
</head>
<body>

    <input type="file" id="fileInput" accept=".txt">
    <pre id="fileContent"></pre>

    <script>
        document.getElementById('fileInput').addEventListener('change', handleFile);

        function handleFile(event) {
            const fileInput = event.target;
            const file = fileInput.files[0];

            if (file && file.name.endsWith('.txt')) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    const content = e.target.result;
                    document.getElementById('fileContent').textContent = content;
                };

                reader.readAsText(file);
            } else {
                alert('请选择一个以 .txt 结尾的文件');
            }
        }
    </script>

</body>
</html>