JavaScript——WebAPI案例（猜数字，表白墙，待办事例）

ゞ浴缸里的玫瑰 2024-03-26 21:53 29阅读 0赞

**目录**

猜数字

表白墙

待办事项

--------------------

## 猜数字 ##

1、生成1-100的数字

2、让用户输入一个数字

3、根据输入的数字的大小给出提示（高，低，猜对了）

在JavaScript中生成随机数使用的Math.random()是\[0,1)之间的数（小数），所以为了生成1-100，我们需要用100\*Math.random(),就变成了\[0,100)，然后使用parseInt使之变为整数，最后再加1，就是\[1,100\]。

完整代码：

![93323e0fc1624eb4b94439af5ccab42d.png][]

## 表白墙 ##

![72a18d26e13d447cb3353e1d13ac8163.png][]

<!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>表白墙</title>
    </head>
    <style>
        /* 通配符选择器，选择界面所有元素 */
        *{
            /* 消除浏览器自带的格式影响 */
            margin: 0;
            padding: 0;
            box-sizing: border-box;
    
        }
        .container{
    
            width: 600px;
            margin: 20px auto;
        }
        h1{
            text-align: center;
        }
        p{
            text-align:center;
            color: #666;
            margin: 20px;
        }
        .row{
            /*弹性布局*/
            display: flex;
            height: 40px;
            /* 水平方向居中 */
            justify-content: center;
            /* 垂直方向居中 */
            align-items: center;
    
        }
        .row span{
            width: 88px;
        }
        .row input{
            width: 200px;
            height: 30px;
        }
        .row button{
            width: 288px;
            height: 30px;
            color:white;
            background-color: orange;
            /* 去除黑色边框 */
            border: none;
            /* 加一个圆角矩形 */
            border-radius: 5px;
    
        }
        .row button:active{
            background-color: #666;
    
        }
    </style>
    <body>
        <div class="container">
            <h1>表白墙</h1>
            <p>输入内容后点击提交按钮，信息会显示在下方表格</p>
            <div class="row">
                <span>谁：</span>
                <input type="text">
            </div>
    
            <div class="row">
                <span>对谁：</span>
                <input type="text">
            </div>
           
            <div class="row">
                <span>说：</span>
                <input type="text">
            </div>
            <div class="row">
                <button id="submit">提交</button>
            </div>
    
            <div class="row">
                <button id="revert">撤销</button>
            </div>
          
        </div>
       <script>
        //实现提交,点击提交，输入的内容提交到页面显示
        //点击时获取输入框内容，创建新的div，把内容构造到div中
        let containerDiv=document.querySelector('.container');
        let button=document.querySelector('#submit');
        let inputs=document.querySelectorAll('input');
        button.onclick=function(){
            //1.获取输入框内容
            let from=inputs[0].value;
            let to =inputs[1].value;
            let msg=inputs[2].value;
            if(from==''||to==''|| msg==''){
                return;
            }
            //2.构造div
            let rowDiv=document.createElement('div');
            rowDiv.className='row message';
            rowDiv.innerHTML=from+'对'+to+'说'+msg;
            containerDiv.appendChild(rowDiv);
            //3.清空之前的输入框内容
            for(let input of inputs){
                input.value='';
            }
    
        }
        let revertButton=document.querySelector('#revert');
        revertButton.onclick=function(){
            //删除最后一条消息
            //选中所有的row，找出最后一个row，然后进行删除
            let rows=document.querySelectorAll('.message');
            if(rows==null||rows.length==0){
                return;
            }
            containerDiv.removeChild(rows[rows.length-1]);
    
        }
    
       </script>
    </body>
    </html>

![d4cbcb3beaa84fcca4e5bacc89955717.png][]

## 待办事项 ##

创建页面布局

实现页面样式

实现页面行为

完整代码展示：

<!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>待办事项</title>
    </head>
    <body>
        <div class="nav">
            <input type="text">
            <button>新建任务</button>
        </div>
        <div class="container">
            <div class="todo">
            <h3>未完成</h3>
            <div class="row">
            <input type="checkbox">
            <span>吃饭</span>
            <button>删除</button>
        </div>
            </div>
            <div class="done">
            <h3>已完成</h3>
            </div>
        </div>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                }
                .container {
                width: 800px;
                margin: 0 auto;
                display: flex;
                }
                .todo,
                .done {
                width: 50%;
                height: 100%;
                }
                .container h3 {
                height: 50px;
                text-align: center;
                line-height: 50px;
                background-color: #333;
                color: #fff;
            }
            .nav {
                width: 800px;
                height: 100px;
                margin: 0 auto;
                display: flex;
                align-items: center;
                }
                .nav input {
                width: 600px;
                height: 50px;
                }
                .nav button {
                width: 200px;
                height: 50px;
                border: none;
                background-color: orange;
                color: #fff;
                }
                .row {
                height: 50px;
                display: flex;
                align-items: center;
                }
                .row input {
                margin: 0 10px;
                }
                .row span {
                width: 300px;
                }
                .row button {
                width: 50px;
                height: 40px;
                }
    </style>
    
    <script>
            // 实现新增任务
            var addTaskButton = document.querySelector('.nav button');
            addTaskButton.onclick = function () {
            // 1. 获取到任务内容的输入框
            var input = document.querySelector('.nav input');
            // 2. 获取到输入框内容
            var taskContent = input.value;
            // 3. 根据内容新建一个元素节点
            var row = document.createElement('div');
            row.className = 'row';
            var checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            var span = document.createElement('span');
            span.innerHTML = taskContent;
            var button = document.createElement('button');
            button.innerHTML = '删除';
            row.appendChild(checkbox);
            row.appendChild(span);
            row.appendChild(button);
            // 4. 把新节点插入到 todo 中
            var todo = document.querySelector('.todo');
            todo.appendChild(row);
            }
            // 修改 addTaskButton.onclick
                addTaskButton.onclick = function () {
                // 上方的部分不变...
                // 5. 给 checkbox 注册点击事件
                checkbox.onclick = function () {
                //
                var row = this.parentNode;
                // 注意! 是先触发 checked 为 true, 然后再调用 onclick 函数
                if (this.checked) {
                var target = document.querySelector('.done');
                  } else {
                var target = document.querySelector('.todo');
                  }
                target.appendChild(row);
                  }
                  }
    
                // 修改 addTaskButton.onclick
                addTaskButton.onclick = function () {
                // 上方的部分不变...
                // 6. 给删除按钮注册点击事件
                button.onclick = function () {
                var row = this.parentNode;
                var grandParent = row.parentNode;
                grandParent.removeChild(row);
                    }
                }
    
    </script>
        
    </body>
    </html>

![fa9bc3fa90fc4a0dabaa008a5585de35.png][]

[93323e0fc1624eb4b94439af5ccab42d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/bd633f4e2517449ea9d7aff4fe8e1182.png
[72a18d26e13d447cb3353e1d13ac8163.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/290f51ba111c4336b4a266f44be14bb2.png
[d4cbcb3beaa84fcca4e5bacc89955717.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/a951e8cd53b441b6bd53d08754b78055.png
[fa9bc3fa90fc4a0dabaa008a5585de35.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e287e15fa82641669e633eabc90b61e8.png