【前端】代码案例

1.猜数字

<!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>
    <button type="button" id="reset">重新开始一局游戏</button><br>
    请输入要猜的数字：<input type="text" id="number">
    <button type="button" id="button">猜</button><br>
    已经猜的次数：<span id="count">0</span><br>
    结果：<span id="result"></span>
</body>
<script>
    let inputE = document.querySelector("#number");
    let countE = document.querySelector("#count");
    let resultE = document.querySelector("#result");
    let btn = document.querySelector("#button");
    let resetBtn = document.querySelector("#reset");
    // 随机生成一个 1-100 的数字，向下取整
    let guessNumber = Math.floor(Math.random() * 100) + 1// 0 - 1 之间的数
    let count = 0;
    // 事件驱动（Event-Drive）：只要真正发生了点击事件时，才执行该函数
    btn.onclick = function() {
        count++;
        countE.innerText = count;
        let userGuess = parseInt(inputE.value);
        if (userGuess == guessNumber) {
            resultE.innerText = "猜对了";
            resultE.style = "color: green;";
        } else if (userGuess < guessNumber) {
            resultE.innerText = "猜小了";
            resultE.style = "color: blue;";
        } else {
            resultE.innerText = "猜大了";
            resultE.style = "color: red;";
        }
    };
    resetBtn.onclick = function() {
        guessNumber = Math.floor(Math.random() * 100) + 1
        count = 0;
        countE.innerText = count;
        resultE.innerText = "";
        inputE.value = "";
    }
</script>
</html>

2.表白墙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 400px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            padding: 20px 0;
        }   
        p {
            color: #666;
            text-align: center;
            font-size: 14px;
            padding: 10px 0;
        }
        .row {
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        span {
            width: 100px;
            line-height: 40px;
        }
        .edit {
            width: 200px;
            height: 30px;
        }
        .submit {
            width: 304px;
            height: 40px;
            color: white;
            background-color: orange;
            border: none;
            border-radius: 5px;
        }
        .submit:active {
            background-color: gray;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入后点击提交, 会将信息显示在表格中</p>
        <div class="row">
            <span>谁: </span>
            <input class="edit" type="text">
        </div>
        <div class="row">
            <span>对谁: </span>
            <input class="edit" type="text">
        </div>
        <div class="row">
            <span>说什么: </span>
            <input class="edit" type="text">
        </div>
            <div class="row">
            <input type="button" value="提交" class="submit">
        </div>
    </div>
</body>
<script>
    // 给点击按钮注册点击事件
    var submit = document.querySelector('.submit');
    submit.onclick = function () {
        // 1. 获取到编辑框内容
        var edits = document.querySelectorAll('.edit');
        var from = edits[0].value;
        var to = edits[1].value;
        var message = edits[2].value;
        console.log(from + "," + to + "," + message);
        if (from == '' || to == '' || message == '') {
            return;
        }
        // 2. 构造 html 元素
        var row = document.createElement('div');
        row.className = 'row';
        row.innerHTML = from + '对' + to + '说: ' + message;
        // 3. 把构造好的元素添加进去
        var container = document.querySelector('.container');
        container.appendChild(row);
        // 4. 同时清理之前输入框的内容
        for (var i = 0; i < 3; i++) {
            edits[i].value = '';
        }
    }
</script>
</html>

3.待办事项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项</title>
    <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;
            
        }
        .nav button:active {
            background-color: gray;
        }
        .row {
            height: 50px;
            display: flex;
            align-items: center;
        }
        .row input {
            margin: 0 10px;
        }
        .row span {
            width: 300px;
        }
        .row button {
            width: 50px;
            height: 40px;
        }
    </style>
</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>
</body>
<script>
    let addTaskButton = document.querySelector('.nav button');
    addTaskButton.onclick = function () {
        // 1. 获取到任务内容的输入框
        let input = document.querySelector('.nav input');
        // 2. 获取到输入框内容
        let taskContent = input.value;
        // 3. 根据内容新建一个元素节点
        let row = document.createElement('div');
        row.className = 'row';
        let checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        let span = document.createElement('span');
        span.innerHTML = taskContent;
        let button = document.createElement('button');
        button.innerHTML = '删除';
        row.appendChild(checkbox);
        row.appendChild(span);
        row.appendChild(button);
        // 4. 把新节点插入到 todo 中
        let todo = document.querySelector('.todo');
        todo.appendChild(row);
        // 5. 给 checkbox 注册点击事件
        checkbox.onclick = function () {
            let row = this.parentNode;
            // 注意! 是先触发 checked 为 true, 然后再调用 onclick 函数
            if (this.checked) {
                let target = document.querySelector('.done');
            } else {
                let target = document.querySelector('.todo');
            }
            target.appendChild(row);
        }
        // 6. 给删除按钮注册点击事件
        button.onclick = function () {
        let row = this.parentNode;
        let grandParent = row.parentNode;
        grandParent.removeChild(row);
        }
    }
</script>
</html>