前端基础——JavaScript（WebAPI）代码案例

CoderYanger2026-09-11 11:25

目录

代码案例：猜数字

预期效果

代码实现

代码案例：表白墙

预期效果

创建页面布局

调整样式

实现提交

实现点击按钮的动画效果（选学）

代码案例：待办事项

预期效果

创建页面布局

实现页面样式

实现页面行为

实现新增

点击删除按钮删除该任务

点击复选框后将元素放到"已完成"

代码案例：猜数字

预期效果

代码实现

1.初步设计大体界面框架

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input class="reset_button" type="button" value="重新开始一局游戏"><br>
    请输入要猜的数字：<input class="to_guess_num" type="text" value="0"><input type="button" value="猜"><br>
    已经猜的次数：<span class="has_guess_num">0</span><br>
    结果：<span class="result">这是测试结果</span>
</body>
</html>

初步效果👇

2.开始绑定事件，实现累加猜的次数👇

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input class="reset_button" type="button" value="重新开始一局游戏" onclick="reSet()"><br>
    请输入要猜的数字：<input class="to_guess_num" type="text" value="0"><input type="button" value="猜" onclick="Guess()"><br>
    已经猜的次数：<span class="has_guess_num">0</span><br>
    结果：<span class="result">这是测试结果</span>
</body>
<script>
    //输入的数字
    let to_guess_num_element=document.querySelector('.to_guess_num')
    console.dir(to_guess_num_element)
    //已经猜的次数
    let input_num_element=document.querySelector('.has_guess_num')
    console.dir(input_num_element)
    //猜测的结果
    let result_element=document.querySelector('.result_element')
    console.dir(result_element)
    function reSet(){
        to_guess_num_element.value = 0
        input_num_element.innerHTML = 0
        result_element.innerHTML = ""
    }
    function Guess(){
        //累加猜的次数
        input_num_element.innerHTML = parseInt(input_num_element.innerHTML)+1
    }
</script>
</html>

效果展示👇

3.处理结果，先随机生成数字，我们可以通过 Math.random() 生成一个 0~1 之间的小数

我们对其 ×100 之后用 Math.floor 向下取整再 ＋1 即可得到 1~100 的整数了👇

代码展示👇

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input class="reset_button" type="button" value="重新开始一局游戏" onclick="reSet()"><br>
    请输入要猜的数字：<input class="to_guess_num" type="text" value="0"><input type="button" value="猜" onclick="Guess()"><br>
    已经猜的次数：<span class="has_guess_num">0</span><br>
    结果：<span class="result"></span>
</body>
<script>
    //输入的数字
    let to_guess_num_element=document.querySelector('.to_guess_num')
    console.dir(to_guess_num_element)
    //已经猜的次数
    let input_num_element=document.querySelector('.has_guess_num')
    console.dir(input_num_element)
    //猜测的结果
    let result_element=document.querySelector('.result')
    console.dir(result_element)
    function reSet(){
        to_guess_num_element.value = 0
        input_num_element.innerHTML = 0
        result_element.innerHTML = ""
    }
    //生成 1~100 随机整数
    let num = Math.floor(Math.random()*100) + 1
    //打印出来瞅瞅
    console.log(num)
    function Guess(){
        //累加猜的次数
        input_num_element.innerHTML = parseInt(input_num_element.innerHTML)+1
        //进行对比
        if(num < parseInt(to_guess_num_element.value)){
            result_element.innerHTML = "猜大了"
        }else if(num > parseInt(to_guess_num_element.value)){
            result_element.innerHTML = "猜小了"
        }else{
            result_element.innerHTML = "猜中了"
        }
    }
</script>
</html>

效果展示👇

4.对猜测结果美化

代码展示👇

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 美化 -->
    <style>
        .false{
            color:red;
        }
        .true{
            color:green;
        }
    </style>
</head>
<body>
    <input class="reset_button" type="button" value="重新开始一局游戏" onclick="reSet()"><br>
    请输入要猜的数字：<input class="to_guess_num" type="text" value="0"><input type="button" value="猜" onclick="Guess()"><br>
    已经猜的次数：<span class="has_guess_num">0</span><br>
    结果：<span class="result"></span>
</body>
<script>
    //输入的数字
    let to_guess_num_element=document.querySelector('.to_guess_num')
    console.dir(to_guess_num_element)
    //已经猜的次数
    let input_num_element=document.querySelector('.has_guess_num')
    console.dir(input_num_element)
    //猜测的结果
    let result_element=document.querySelector('.result')
    console.dir(result_element)
    function reSet(){
        to_guess_num_element.value = 0
        input_num_element.innerHTML = 0
        result_element.innerHTML = ""
    }
    //生成 1~100 随机整数
    let num = Math.floor(Math.random()*100) + 1
    //打印出来瞅瞅
    console.log(num)
    function Guess(){
        //累加猜的次数
        input_num_element.innerHTML = parseInt(input_num_element.innerHTML)+1
        //进行对比
        if(num < parseInt(to_guess_num_element.value)){
            result_element.innerHTML = "猜大了"
            //美化
            result_element.className = 'false'
        }else if(num > parseInt(to_guess_num_element.value)){
            result_element.innerHTML = "猜小了"
            //美化
            result_element.className = 'false'
        }else{
            result_element.innerHTML = "猜中了"
            //美化
            result_element.className = 'true'
        }
    }
</script>
</html>

效果展示👇

代码案例：表白墙

预期效果

创建页面布局

创建 表白墙.html

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>表白墙</h1>
    <p>输入相关信息，点击提交，数据将会展示在表格中</p>
    谁：<input type="text">
    对谁：<input type="text">
    说：<input type="text">
    <input type="button" value="提交">
</body>
</html>

此时效果形如👇

调整样式

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入相关信息，点击提交，数据将会展示在表格中</p>
        <div class="div1">
            <span>谁：</span><input type="text" class="edit">
        </div>
        <div class="div1">
            <span>对谁：</span><input type="text" class="edit">
        </div>
        <div class="div1">
            <span>说：</span><input type="text" class="edit">
        </div>
        <div class="div1">
            <input type="button" value="提交" class="submit">
        </div>
    </div>
</body>
<style>
    *{
        margin:0px;
        padding:0px;
    }
    .container{
        width: 400px;
        /* 将整个布局放到正中间 */
        margin:0 auto;
    }
    h1{
        /* 字体居中 */
        text-align: center;
        /* 表白墙和p标签之间有一定距离 */
        margin-bottom: 40px;
    }
    p{
        /* 居中 */
        text-align: center;
        color:gray;
        /* 设置行高，调整到看起来舒服的数值 */
        line-height: 63px;
    }
</style>
</html>

此时效果形如👇

接下来要让下面三行都水平居中、上下居中，这时候就用到了弹性布局，让 div 下面的这个子元素通过一个水平居中以及垂直方向居中即可

css 复制代码 
    /* 选中父级元素，设置居中效果 */
    .div1{
        display: flex;
        justify-content: center;
        align-items: center ;
    }

接下来再在这三个框与字之间加点间距👇

css 复制代码 
    .edit{
        margin-bottom: 20px;
        width: 200px;
        height: 30px;
    }
    span{
        width: 50px;
        /* 加上下边距 */
        margin-bottom: 20px;
    }

接下来调整提交按钮👇

css 复制代码 
    .submit{
        /* 调整按钮颜色 */
        background-color: rgb(255, 157, 0);
        color:white;
        /* 调整按钮大小 */
        width:260px;
        height: 30px;
        /* 去掉边框 */
        border: none;
        /* 设置圆角，为了更好看 */
        border-radius: 5px;
    }
    /* 设计按钮点击时的动画 */
    .submit:active{
        background-color: gray;
    }

效果展示👇

点击时👇

实现提交

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入相关信息，点击提交，数据将会展示在表格中</p>
        <div class="div1">
            <span>谁：</span><input type="text" class="edit">
        </div>
        <div class="div1">
            <span>对谁：</span><input type="text" class="edit">
        </div>
        <div class="div1">
            <span>说：</span><input type="text" class="edit">
        </div>
        <div class="div1">
            <!-- 绑定点击事件 -->
            <input type="button" value="提交" class="submit" onclick="Submit()">
        </div>
    </div>
</body>
<style>
    *{
        margin:0px;
        padding:0px;
    }
    .container{
        width: 400px;
        /* 将整个布局放到正中间 */
        margin:0 auto;
    }
    h1{
        /* 字体居中 */
        text-align: center;
        /* 表白墙和p标签之间有一定距离 */
        margin-bottom: 40px;
    }
    p{
        /* 居中 */
        text-align: center;
        color:gray;
        /* 设置行高，调整到看起来舒服的数值 */
        line-height: 63px;
    }
    /* 选中父级元素，设置居中效果 */
    .div1{
        display: flex;
        justify-content: center;
        align-items: center ;
    }
    .edit{
        margin-bottom: 20px;
        width: 200px;
        height: 30px;
    }
    span{
        width: 50px;
        /* 加上下边距 */
        margin-bottom: 20px;
    }
    .submit{
        /* 调整按钮颜色 */
        background-color: rgb(255, 157, 0);
        color:white;
        /* 调整按钮大小 */
        width:260px;
        height: 30px;
        /* 去掉边框 */
        border: none;
        /* 设置圆角，为了更好看 */
        border-radius: 5px;
    }
    /* 设计按钮点击时的动画 */
    .submit:active{
        background-color: gray;
    }
</style>
<script>
    function Submit(){
        let edits = document.querySelectorAll('.edit')
        //打印信息
        console.dir(edits)
        let from = edits[0].value
        let to = edits[1].value
        let message = edits[2].value
        console.log(from + " " + to + " " + message)
    }
</script>
</html>

此时效果形如👇

接下来开始构造数据，构造一个 div 把提交结果放在提交按钮下面👇

javascript 复制代码 
<script>
    function Submit(){
        let edits = document.querySelectorAll('.edit')
        //打印信息
        console.dir(edits)
        let from = edits[0].value
        let to = edits[1].value
        let message = edits[2].value
        console.log(from + " " + to + " " + message)
        // 创建一个div
        let div = document.createElement('div')
        div.className = "div1"
        div.innerHTML = "谁：" + from + "对谁：" + to + message
        console.log(div)
    }
</script>

接下来我们把它插入到 container 中即可

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入相关信息，点击提交，数据将会展示在表格中</p>
        <div class="div1">
            <span>谁：</span><input type="text" class="edit">
        </div>
        <div class="div1">
            <span>对谁：</span><input type="text" class="edit">
        </div>
        <div class="div1">
            <span>说：</span><input type="text" class="edit">
        </div>
        <div class="div1">
            <!-- 绑定点击事件 -->
            <input type="button" value="提交" class="submit" onclick="Submit()">
        </div>
    </div>
</body>
<style>
    *{
        margin:0px;
        padding:0px;
    }
    .container{
        width: 400px;
        /* 将整个布局放到正中间 */
        margin:0 auto;
    }
    h1{
        /* 字体居中 */
        text-align: center;
        /* 表白墙和p标签之间有一定距离 */
        margin-bottom: 40px;
    }
    p{
        /* 居中 */
        text-align: center;
        color:gray;
        /* 设置行高，调整到看起来舒服的数值 */
        line-height: 63px;
    }
    /* 选中父级元素，设置居中效果 */
    .div1{
        display: flex;
        justify-content: center;
        align-items: center ;
    }
    .edit{
        margin-bottom: 20px;
        width: 200px;
        height: 30px;
    }
    span{
        width: 50px;
        /* 加上下边距 */
        margin-bottom: 20px;
    }
    .submit{
        /* 调整按钮颜色 */
        background-color: rgb(255, 157, 0);
        color:white;
        /* 调整按钮大小 */
        width:260px;
        height: 30px;
        /* 去掉边框 */
        border: none;
        /* 设置圆角，为了更好看 */
        border-radius: 5px;
    }
    /* 设计按钮点击时的动画 */
    .submit:active{
        background-color: gray;
    }
</style>
<script>
    function Submit(){
        let edits = document.querySelectorAll('.edit')
        //打印信息
        console.dir(edits)
        let from = edits[0].value
        let to = edits[1].value
        let message = edits[2].value
        console.log(from + " " + to + " " + message)
        // 创建一个div
        let div = document.createElement('div')
        div.className = "div1"
        div.innerHTML = from + "对：" + to + "，说："+message
        console.log(div)
        let container = document.querySelector('.container')
        // 插入
        container.appendChild(div)
    }
</script>
</html>

实现点击按钮的动画效果（选学）

需要使用伪类选择器.

伪类选择器种类有很多. 此处的 :active 表示选中被按下的按钮

javascript 复制代码 
.submit:active {
    background-color: #666;
}

代码案例：待办事项

预期效果

创建页面布局

创建 待办事项.html

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nav">
        <input type="text">
        <button>新建任务</button>
    </div>
    <div class="container">
        <div class="todo">
            <h3>未完成</h3>
            <input type="checkbox" name="" id="">
            <span>吃饭</span>
            <button>删除</button>
        </div>
        <div class="done">
            <h3>已完成</h3>
        </div>
    </div>
</body>
</html>

效果展示👇

实现页面样式

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 把浏览器默认样式清除 */
        *{
            margin: 0px;
            padding: 0px;
            /* 为了不让boder撑大我们的盒子，对其效果进行消除 */
            box-sizing:border-box;
        }
        .nav{
            width: 800px;
            padding: 200px;
            /* 让浏览器自适配到中间 */
            margin:0 auto;
            /* 弹性布局 */
            display: flex;
            /* 垂直方向居中 */
            align-items: center;
        }
        .nav input{
            width:600px;
            height:60px;
            /* 设置圆角 */
            border-radius: 5px;
        }
        .nav button{
            width:200px;
            height:60px;
            background-color: orange;
            color:white;
            font-size: 20px;
            border: orange;
            /* 设置圆角 */
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <input type="text"><button>新建任务</button>
    </div>
    <div class="container">
        <div class="todo">
            <h3>未完成</h3>
            <input type="checkbox" name="" id="">
            <span>吃饭</span>
            <button>删除</button>
        </div>
        <div class="done">
            <h3>已完成</h3>
        </div>
    </div>
</body>
</html>

此时效果展示👇

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 把浏览器默认样式清除 */
        *{
            margin: 0px;
            padding: 0px;
            /* 为了不让boder撑大我们的盒子，对其效果进行消除 */
            box-sizing:border-box;
        }
        .nav{
            width: 800px;
            height: 100px;
            /* 让浏览器自适配到中间 */
            margin:0 auto;
            /* 弹性布局 */
            display: flex;
            /* 垂直方向居中 */
            align-items: center;
        }
        .nav input{
            width:600px;
            height:60px;
            /* 设置圆角 */
            border-radius: 5px;
        }
        .nav button{
            width:200px;
            height:60px;
            background-color: orange;
            color:white;
            font-size: 20px;
            border: orange;
            /* 设置圆角 */
            border-radius: 5px;
        }
        .container{
            width: 800px;
            /* 弹性布局 */
            display: flex;
            /* 上下为0，左右自适应 */
            margin: 0px auto;
        }
        h3{
            background-color: grey;
            color: white;
            /* 字体居中 */
            text-align: center;
            /* 宽度也跟上 */
            width: 400px;
            height:60px;
            /* 把字体从上面调整到中间 */
            padding-top: 15px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <input type="text"><button>新建任务</button>
    </div>
    <div class="container">
        <div class="todo">
            <h3>未完成</h3>
            <input type="checkbox" name="" id="">
            <span>吃饭</span>
            <button>删除</button>
        </div>
        <div class="done">
            <h3>已完成</h3>
        </div>
    </div>
</body>
</html>

效果展示👇

实现页面行为

实现新增

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 把浏览器默认样式清除 */
        *{
            margin: 0px;
            padding: 0px;
            /* 为了不让boder撑大我们的盒子，对其效果进行消除 */
            box-sizing:border-box;
        }
        .nav{
            width: 800px;
            height: 100px;
            /* 让浏览器自适配到中间 */
            margin:0 auto;
            /* 弹性布局 */
            display: flex;
            /* 垂直方向居中 */
            align-items: center;
        }
        .nav input{
            width:600px;
            height:60px;
            /* 设置圆角 */
            border-radius: 5px;
        }
        .nav button{
            width:200px;
            height:60px;
            background-color: orange;
            color:white;
            font-size: 20px;
            border: orange;
            /* 设置圆角 */
            border-radius: 5px;
        }
        .nav button:active{
            background-color: gray;
        }
        .container{
            width: 800px;
            /* 弹性布局 */
            display: flex;
            /* 上下为0，左右自适应 */
            margin: 0px auto;
        }
        h3{
            background-color: grey;
            color: white;
            /* 字体居中 */
            text-align: center;
            /* 宽度也跟上 */
            width: 400px;
            height:60px;
            /* 把字体从上面调整到中间 */
            padding-top: 15px;
        }
        .todo,
        .done{
            width:50%;
            height:100%;
        }
        .row{
            width:400px;
            display: flex;
            align-items:center;
        }
        span{
            width: 200px;
            font-size: 20px;
            margin-left: 5px;
        }
        .row button{
            width:90px;
            height:40px;
            font-size:20px;
            margin-top:10px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <!-- 绑定点击事件 -->
        <input type="text"><button onclick="newJob()">新建任务</button>
    </div>
    <div class="container">
        <div class="todo">
            <h3>未完成</h3>
            <div class="row">
                <input type="checkbox" name="" id="">
                <span>吃饭</span><button>删除</button>
            </div>
            <div class="row">
                <input type="checkbox" name="" id="">
                <span>吃饭</span><button>删除</button>
            </div>
        </div>
        <div class="done">
            <h3>已完成</h3>
        </div>
    </div>
</body>
<script>
    function newJob(){
        // 获取到 input 输入框按钮
        let input = document.querySelector('.nav input')
        // 获取到输入的信息
        let input_info = input.value
        console.log(input_info)
        // 获取到 todo 这个 div
        let todo = document.querySelector('.todo')
        // 创建一个 div
        let div = document.createElement('div')
        // 创建一个 checkbox
        let checkbox = document.createElement('input')
        checkbox.type = 'checkbox'
        // 创建一个 span(文本内容时刚才输入的信息对应的文本)
        let span = document.createElement('span')
        span.innerHTML = input_info
        console.log(checkbox)
        console.log(span)
        // 创建一个删除 button
        let button = document.createElement('button')
        button.innerHTML = "删除"
        div.appendChild(checkbox)
        div.appendChild(span)
        div.appendChild(button)

        // let new_job_button = document.querySelector('.nav button')
        // // 查看按钮属性
        // console.dir(new_job_button)

        // 更新样式
        div.className = 'row'
        // 将 div 插入到 todo 这个 div 中
        todo.appendChild(div)
    }
</script>
</html>

效果展示👇

Ctrl +F 搜索新建任务，看到在 innerHTML 上有"新建任务"👇

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 把浏览器默认样式清除 */
        *{
            margin: 0px;
            padding: 0px;
            /* 为了不让boder撑大我们的盒子，对其效果进行消除 */
            box-sizing:border-box;
        }
        .nav{
            width: 800px;
            height: 100px;
            /* 让浏览器自适配到中间 */
            margin:0 auto;
            /* 弹性布局 */
            display: flex;
            /* 垂直方向居中 */
            align-items: center;
        }
        .nav input{
            width:600px;
            height:60px;
            /* 设置圆角 */
            border-radius: 5px;
        }
        .nav button{
            width:200px;
            height:60px;
            background-color: orange;
            color:white;
            font-size: 20px;
            border: orange;
            /* 设置圆角 */
            border-radius: 5px;
        }
        .container{
            width: 800px;
            /* 弹性布局 */
            display: flex;
            /* 上下为0，左右自适应 */
            margin: 0px auto;
        }
        h3{
            background-color: grey;
            color: white;
            /* 字体居中 */
            text-align: center;
            /* 宽度也跟上 */
            width: 400px;
            height:60px;
            /* 把字体从上面调整到中间 */
            padding-top: 15px;
        }
        .todo,
        .done{
            width:50%;
            height:100%;
        }
        .row{
            width:400px;
            display: flex;
            align-items:center;
        }
        span{
            width: 200px;
            font-size: 20px;
            margin-left: 5px;
        }
        .row button{
            width:90px;
            height:40px;
            font-size:20px;
            margin-top:10px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <!-- 绑定点击事件 -->
        <input type="text"><button onclick="newJob()">新建任务</button>
    </div>
    <div class="container">
        <div class="todo">
            <h3>未完成</h3>
            <div class="row">
                <input type="checkbox" name="" id="">
                <span>吃饭</span><button>删除</button>
            </div>
            <div class="row">
                <input type="checkbox" name="" id="">
                <span>吃饭</span><button>删除</button>
            </div>
        </div>
        <div class="done">
            <h3>已完成</h3>
        </div>
    </div>
</body>
<script>
    function newJob(){
        // 获取到 input 输入框按钮
        let input = document.querySelector('.nav input')
        // 获取到输入的信息
        let input_info = input.value
        console.log(input_info)
        // 获取到 todo 这个 div
        let todo = document.querySelector('.todo')
        // 创建一个 div
        let div = document.createElement('div')
        // 创建一个 checkbox
        let checkbox = document.createElement('input')
        checkbox.type = 'checkbox'
        // 创建一个 span(文本内容时刚才输入的信息对应的文本)
        let span = document.createElement('span')
        span.innerHTML = input_info
        console.log(checkbox)
        console.log(span)
        // 创建一个删除 button
        let button = document.createElement('button')
        button.innerHTML = "删除"
        div.appendChild(checkbox)
        div.appendChild(span)
        div.appendChild(button)

        // let new_job_button = document.querySelector('.nav button')
        // // 查看按钮属性
        // console.dir(new_job_button)

        // 更新样式
        div.className = 'row'
        // 将 div 插入到 todo 这个 div 中
        todo.appendChild(div)
    }
</script>
</html>

效果展示👇

点击新建后👇

点击删除按钮删除该任务

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 把浏览器默认样式清除 */
        *{
            margin: 0px;
            padding: 0px;
            /* 为了不让boder撑大我们的盒子，对其效果进行消除 */
            box-sizing:border-box;
        }
        .nav{
            width: 800px;
            height: 100px;
            /* 让浏览器自适配到中间 */
            margin:0 auto;
            /* 弹性布局 */
            display: flex;
            /* 垂直方向居中 */
            align-items: center;
        }
        .nav input{
            width:600px;
            height:60px;
            /* 设置圆角 */
            border-radius: 5px;
        }
        .nav button{
            width:200px;
            height:60px;
            background-color: orange;
            color:white;
            font-size: 20px;
            border: orange;
            /* 设置圆角 */
            border-radius: 5px;
        }
        .nav button:active{
            background-color: gray;
        }
        .container{
            width: 800px;
            /* 弹性布局 */
            display: flex;
            /* 上下为0，左右自适应 */
            margin: 0px auto;
        }
        h3{
            background-color: grey;
            color: white;
            /* 字体居中 */
            text-align: center;
            /* 宽度也跟上 */
            width: 400px;
            height:60px;
            /* 把字体从上面调整到中间 */
            padding-top: 15px;
        }
        .todo,
        .done{
            width:50%;
            height:100%;
        }
        .row{
            width:400px;
            display: flex;
            align-items:center;
        }
        span{
            width: 200px;
            font-size: 20px;
            margin-left: 5px;
        }
        .row button{
            width:90px;
            height:40px;
            font-size:20px;
            margin-top:10px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <!-- 绑定点击事件 -->
        <input type="text"><button onclick="newJob()">新建任务</button>
    </div>
    <div class="container">
        <div class="todo">
            <h3>未完成</h3>
            <div class="row">
                <input type="checkbox" name="" id="">
                <span>吃饭</span><button>删除</button>
            </div>
            <div class="row">
                <input type="checkbox" name="" id="">
                <span>吃饭</span><button>删除</button>
            </div>
        </div>
        <div class="done">
            <h3>已完成</h3>
        </div>
    </div>
</body>
<script>
    function newJob(){
        // 获取到 input 输入框按钮
        let input = document.querySelector('.nav input')
        // 获取到输入的信息
        let input_info = input.value
        // 优化：如果内容为空就直接return,避免添加空任务
        if(input_info == ''){
            return
        }
        console.log(input_info)
        // 获取到 todo 这个 div
        let todo = document.querySelector('.todo')
        // 创建一个 div
        let div = document.createElement('div')
        // 创建一个 checkbox
        let checkbox = document.createElement('input')
        checkbox.type = 'checkbox'
        // 创建一个 span(文本内容时刚才输入的信息对应的文本)
        let span = document.createElement('span')
        span.innerHTML = input_info
        console.log(checkbox)
        console.log(span)
        // 创建一个删除 button
        let button = document.createElement('button')
        button.innerHTML = "删除"
        div.appendChild(checkbox)
        div.appendChild(span)
        div.appendChild(button)

        // let new_job_button = document.querySelector('.nav button')
        // // 查看按钮属性
        // console.dir(new_job_button)

        // 更新样式
        div.className = 'row'
        // 将 div 插入到 todo 这个 div 中
        todo.appendChild(div)

        // 注意，我们获取到的删除按钮是多个，所以用到All
        let delete_buttons = document.querySelectorAll('.row button')
        // 打印看是否找到对应按钮
        console.log(delete_buttons)
        // 将绑定的所有事件进行删除
        for(i=0;i<delete_buttons.length;i++){
            delete_buttons[i].onclick = function(){
                // 删除对应整个的 div
                let parent = this.parentNode;
                console.log(parent)
                let grand_parent = parent.parentNode
                console.log(grand_parent)
                // 删除父级元素
                grand_parent.removeChild(parent)
            }
        }
    }
</script>
</html>

效果展示👇

待办事项的删除操作演示

点击复选框后将元素放到"已完成"

注意 :

在事件回调函数中使用 this 能够获取到当前处理事件的元素.

通过 this.parentNode 属性能够获取到当前元素的父元素.

点击 checkbox 时, 会先修改 value , 再触发点击事件

javascript 复制代码 
        //先获取到checkbox元素，对其进行绑定，再执行相关程序
        let checkbox_buttons = document.querySelectorAll('.row input')
        //给每一个复选框绑定点击事件
        for(i=0;i<checkbox_buttons.length;i++){
            checkbox_buttons[i].onclick = function(){
                //将节点插入到对应的 div 中
                console.log(this.checked)//先看一下是什么
                
            }
        }

此时点击后会显示 true👇

接下来需要给它插入到已完成列表中去👇

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 把浏览器默认样式清除 */
        *{
            margin: 0px;
            padding: 0px;
            /* 为了不让boder撑大我们的盒子，对其效果进行消除 */
            box-sizing:border-box;
        }
        .nav{
            width: 800px;
            height: 100px;
            /* 让浏览器自适配到中间 */
            margin:0 auto;
            /* 弹性布局 */
            display: flex;
            /* 垂直方向居中 */
            align-items: center;
        }
        .nav input{
            width:600px;
            height:60px;
            /* 设置圆角 */
            border-radius: 5px;
        }
        .nav button{
            width:200px;
            height:60px;
            background-color: orange;
            color:white;
            font-size: 20px;
            border: orange;
            /* 设置圆角 */
            border-radius: 5px;
        }
        .nav button:active{
            background-color: gray;
        }
        .container{
            width: 800px;
            /* 弹性布局 */
            display: flex;
            /* 上下为0，左右自适应 */
            margin: 0px auto;
        }
        h3{
            background-color: grey;
            color: white;
            /* 字体居中 */
            text-align: center;
            /* 宽度也跟上 */
            width: 400px;
            height:60px;
            /* 把字体从上面调整到中间 */
            padding-top: 15px;
        }
        .todo,
        .done{
            width:50%;
            height:100%;
        }
        .row{
            width:400px;
            display: flex;
            align-items:center;
        }
        span{
            width: 200px;
            font-size: 20px;
            margin-left: 5px;
        }
        .row button{
            width:90px;
            height:40px;
            font-size:20px;
            margin-top:10px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <!-- 绑定点击事件 -->
        <input type="text"><button onclick="newJob()">新建任务</button>
    </div>
    <div class="container">
        <div class="todo">
            <h3>未完成</h3>
            <div class="row">
                <input type="checkbox" name="" id="">
                <span>吃饭</span><button>删除</button>
            </div>
            <div class="row">
                <input type="checkbox" name="" id="">
                <span>吃饭</span><button>删除</button>
            </div>
        </div>
        <div class="done">
            <h3>已完成</h3>
        </div>
    </div>
</body>
<script>
    function newJob(){
        // 获取到 input 输入框按钮
        let input = document.querySelector('.nav input')
        // 获取到输入的信息
        let input_info = input.value
        // 优化：如果内容为空就直接return,避免添加空任务
        if(input_info == ''){
            return
        }
        console.log(input_info)
        // 获取到 todo 这个 div
        let todo = document.querySelector('.todo')
        // 创建一个 div
        let div = document.createElement('div')
        // 创建一个 checkbox
        let checkbox = document.createElement('input')
        checkbox.type = 'checkbox'
        // 创建一个 span(文本内容时刚才输入的信息对应的文本)
        let span = document.createElement('span')
        span.innerHTML = input_info
        console.log(checkbox)
        console.log(span)
        // 创建一个删除 button
        let button = document.createElement('button')
        button.innerHTML = "删除"
        div.appendChild(checkbox)
        div.appendChild(span)
        div.appendChild(button)

        // let new_job_button = document.querySelector('.nav button')
        // // 查看按钮属性
        // console.dir(new_job_button)

        // 更新样式
        div.className = 'row'
        // 将 div 插入到 todo 这个 div 中
        todo.appendChild(div)

        // 注意，我们获取到的删除按钮是多个，所以用到All
        let delete_buttons = document.querySelectorAll('.row button')
        // 打印看是否找到对应按钮
        console.log(delete_buttons)
        // 将绑定的所有事件进行删除
        for(i=0;i<delete_buttons.length;i++){
            delete_buttons[i].onclick = function(){
                // 删除对应整个的 div
                let parent = this.parentNode;
                console.log(parent)
                let grand_parent = parent.parentNode
                console.log(grand_parent)
                // 删除父级元素
                grand_parent.removeChild(parent)
            }
        }
        //先获取到checkbox元素，对其进行绑定，再执行相关程序
        let checkbox_buttons = document.querySelectorAll('.row input')
        //给每一个复选框绑定点击事件
        for(i=0;i<checkbox_buttons.length;i++){
            checkbox_buttons[i].onclick = function(){
                //将节点插入到对应的 div 中
                // row代表的插入的节点
                let row = this.parentNode;
                // target 代表的是将 row 插入到哪个 div 中
                // 如果复选框已经被选中，那么target就是已完成对应的这个div
                // 否则target就是未完成对应的 div
                console.log(this.checked)//先看一下是什么
                if(this.checked){
                    target = document.querySelector('.done')
                }else{
                    target = document.querySelector('.todo')
                }
                target.appendChild(row)
            }
        }
    }
</script>
</html>

效果展示👇

待办清单完整版测试演示

相关推荐
geovindu1 小时前
CSharp: Task Scheduler
开发语言·后端·c#·.net·.netcore
qq_401700411 小时前
Qt窗体大小控制从resize到自适应
开发语言·qt
恋猫de小郭1 小时前
Shopify 从 React Native 回到 Swift/Kotlin，但是你以为有手就行？？
android·前端·ios
Nuanyt1 小时前
JUC常见核心知识梳理02 AQS ReentrantLock CAS 原子类 线程池
java
CodeStats1 小时前
【Java数据类型】Java底层数据类型原理（上）：基本类型、转换与封装核心
java·数据类型·string·封装·转换
fengkai45451 小时前
七、华为云网络综合实验 & 运维类及其他服务总结
服务器·开发语言·php
PHP实战开发录1 小时前
PHP日志写满磁盘后接口为什么异常
开发语言·系统架构·php·开发
陈皮波比茶1 小时前
SpringCloudAlibaba
java·spring cloud·微服务
重生之小比特1 小时前
【Java SE】程序逻辑控制
java·开发语言·python
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02如何新建文件夹？ 电脑新建文件夹的4种方法03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新072026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？08ZCode 周末送额度活动开启：3 亿 Token 免费领取09Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费10AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路