使用原生js实现todolist增删改查，弹框复用_用js实现一个简易的 todo list 应用可添加删除和切换状态-优快云博客

本文链接：https://blog.youkuaiyun.com/ljx666888___/article/details/140755932

手写弹框样式+模块化拆分，实现复用弹框（弹框可随机变换颜色）
首先需要在github上将require.js文件复制到本地：
requirejs/require.js at master · requirejs/requirejs (github.com)

我写的是todolist小案例，最终的效果

文件结构如下：

下面为详细代码：

1.index.html文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    //css样式，方法一：使用link将css文件引入
    <!-- <link rel="stylesheet" href="./css/index.css"> -->
    //我这里使用了方法二，直接在style标签内引入，两种方法都可以
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 630px;
            margin: 30px auto;
        }
        .top {
            margin-bottom: 18px;
        }

        table {
            border-collapse: collapse;
        }

        table tr {
            height: 40px;
            text-align: center;
            border-bottom: 1px dashed #767676;
        }

        table td {
            border-bottom: 1px dashed #767676;
        }
    </style>
</head>

<body>
    //页面结构不多说，相信大家都能看懂
    <div class="container">
        <div class="top">
            <button class="add">添加信息</button>
        </div>
        <div class="main">
            <table width="639px" cellspacing="0">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>班级</th>
                        <th>年龄</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody class="tb">
                    <!-- <tr>
                        <td>春娇</td>
                        <td>一年二班</td>
                        <td>19</td>
                        <td>
                            <button class="catch">查看</button>
                            <button class=&