前端基础——JavaScript(WebAPI)代码案例

目录

代码案例:猜数字

预期效果

代码实现

代码案例:表白墙

预期效果

创建页面布局

调整样式

实现提交

实现点击按钮的动画效果(选学)

代码案例:待办事项

预期效果

创建页面布局

实现页面样式

实现页面行为

实现新增

点击删除按钮删除该任务

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


代码案例:猜数字

预期效果

代码实现

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>

效果展示👇

待办清单完整版测试演示

相关推荐
Joe_Wang58 分钟前
【从0到1学习JVM · 15】对象在堆里来回倒腾,究竟怎样才会进老年代?
java·jvm·学习·垃圾回收
一条小小yu21 分钟前
为什么使用springboot
java·spring boot·后端
Elastic 中国社区官方博客28 分钟前
Kubernetes attributes processor v1:它对 EDOT Collector 意味着什么
java·大数据·elasticsearch·搜索引擎·贪心算法·kubernetes·全文检索
Sarvartha33 分钟前
对象创建与引用
java·开发语言
excel41 分钟前
Nuxt 中 useSeoMeta 与 useHead 的区别
前端
竹林8181 小时前
OmniGame 技术白皮书:从零依赖到 WebRTC P2P,重新定义网页小游戏的工程上限
前端·浏览器
ss2731 小时前
AI全栈实战 | 2.1-02 CSS 布局:垂直居中为什么是经典面试题?所有布局在解决什么矛盾
前端·css
律宏阔1 小时前
Flutter Riverpod 3:统一打印 Provider 错误与自动重试日志
前端·flutter
周洲08301 小时前
STM32片内Flash读写深度详解|掉电参数保存、底层原理
linux·前端·stm32
hasty1 小时前
限制写了却没生效:OpenTelemetry Go 的 Unicode 截断边界
开发语言·后端·golang