练习前端案例

最新推荐文章于 2024-04-26 22:44:17 发布

十七ing

最新推荐文章于 2024-04-26 22:44:17 发布

阅读量181

点赞数

分类专栏：前端基础文章标签：前端

本文链接：https://blog.csdn.net/lfm1010123/article/details/126558849

版权

前端基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

练习前端案例

1. 猜数字游戏
2. 表白墙
3. 待办事项

1. 猜数字游戏

<!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>

    <button class="reset">重新开始一局游戏</button><br/>

    请输入要猜的数字: <input type="text" class="number"> 

    <button class="guess">点击猜</button><br/>

    已经猜的次数: <span class="count"> 0 </span><br/>

    结果: <span class="result">  </span>

    <script>

        //1. 拿到每个元素的对象
        let reset = document.querySelector('.reset');
        let number = document.querySelector('.number');
        let guess = document.querySelector('.guess');
        let count = document.querySelector('.count');
        let result = document.querySelector('.result');

        //2. 将猜的次数和生成的随机数放在点击事件的外面
        let guessCount = 0;
        let randomNum = Math.floor( Math.random() * 100 ) + 1;

        //3. 生成 guess 点击事件
        guess.onclick = function() {
            //(1) 猜的次数 +1
            guessCount += 1;
            count.innerHTML = guessCount;

            //(2) 将输入的猜的数字从输入框中拿出来，和随机数进行比较
            let guessNum = parseInt(number.value);

            if(guessNum == randomNum) {
                result.innerHTML = '猜对了';
                result.style.color = 'green';
            } else if (guessNum > randomNum) {
                result.innerHTML = '猜大了';
                result.style.color = 'red';
            } else {
                result.innerHTML = '猜小了';
                result.style.color = 'blue';
            }
        }

        //4. 设计好重置按钮的逻辑
        reset.onclick = function() {
            //这是一个 BOM API，相当于刷新浏览器的页面
            location.reload();
        }
    </script>
</body>

</html>

展示结果：

2. 表白墙

<!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>demo2</title>
</head>

<body>
    <div class="parent">
        <h2> 表白墙 </h2>
        <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>

        <button class="button"> 提交 </button>
        <button class="clear"> 清空 </button>

    </div>

    

    <script>
        //1. 获取输入框中的内容
        let submit = document.querySelector('.button');

        submit.onclick = function() {
            let input = document.querySelectorAll('input');
            let from = input[0].value;
            let to = input[1].value;
            let message = input[2].value;
            //console.log(from + ',' + to + ',' + message);

            if(from == '' || to == '' || message == '') {
                return;
            }

            //2. 创建节点， 并把节点放入 DOM 树中
            let div = document.createElement('div');
            div.className = 'row';
            div.innerHTML = from + " 对 " + to + " 说: " + message;
            let parent = document.querySelector('.parent');
            parent.appendChild(div);

            //3. 一趟后，清空输入框
            for(let i=0; i<input.length; i++) {
                input[i].value = '';
            }

            //4. 点击清空，刷新页面
            let clear = document.querySelector('.clear');
            clear.onclick = function() {
                location.reload();
            }
        } 

    </script>

    <style>
        .parent {
            width: 400px;
            margin-left: auto;
            margin-right: auto;
            /* background-color: aquamarine; */
        }

        h2 {
            text-align: center;
            font-size: 30px;
            padding: 20px;
        }

        p {
            text-align: center;
            font-size: 14px;
            padding: 10px;
        }


        .row {
            height: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
            /* background-color: gray; */
            
        }

        span {
            width: 150px;
            font-size: 18px;
            /* text-align: center; */
            /* background-color: aquamarine; */
            
        }

        input {
            width:250px;
            height: 45px;
            border-radius: 5px;
            border-color: black;
            /* border: none; */
            /* background-color: aquamarine; */
        }

        .button, .clear {
            width: 400px;
            height: 37px;
            background-color: coral;
            color: white;
            font-weight: bold;
            text-align: center;
            line-height: 35px;
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            /* background-color: aquamarine; */
        }
        
        .button:hover {
            background-color: blue;
        }

        .clear:hover {
            background-color: black;
        }
    </style>
</body>

</html>

展示结果：

3. 待办事项

<!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="parent">

        <div class="child1">
            <input type="text">
            <button class="button1">新建任务</button>
        </div>

        <div class="bar">
            <span>未完成</span>
            <span>已完成</span>
        </div>

        <div class="container">
            <div class="todo">
                <div class="row">
                    <!-- <input type="checkbox" class="checkbox">
                    <span class="items">吃饭</span>
                    <button class="button2">删除</button> -->
                </div>
            </div>

            <div class="done"></div>
        </div>
    </div>

    <script>

        //1. 实现新增待办事项
        
        //1.1 获取新建任务按钮的对象
        let button1 = document.querySelector('.button1');
        
        //1.2 将新建任务这个按钮设为一个点击事件
        button1.onclick = function() {
            //1. 获取输入文本框中的内容
            let content = document.querySelector('.child1>input');
            let inputContent = content.value;
            if(inputContent == '') {
                console.log('你还未输入内容');
                return;
            }

            //1.3 新增节点
            //(1) 创建一个节点
            //新创建的节点如果需要原有的属性，必须通过 className 赋值过去 
            let div = document.createElement('div');
            div.className = 'row';
            let input = document.createElement('input');
            input.type = 'checkbox';
            input.className = 'checkbox';
            let span = document.createElement('span');
            span.innerHTML = inputContent;
            span.className = 'items';
            let button = document.createElement('button');
            button.innerHTML = '删除';
            button.className = 'button2';

            //(2)把这个节点以及节点的子节点全部挂在 DOM 树上   
            //把三个元素放在 row 属性下
            div.appendChild(input);
            div.appendChild(span);
            div.appendChild(button);

            //将 row 属性放在 todo 属性下
            let todo = document.querySelector('.todo');
            todo.appendChild(div);

            //每成功新建一次任务，就将上一次的任务给清空了
            content.value = '';

             //2. 实现待办事项与完成事项之间的转换
             //2.1 针对 input 设为一个点击事件，实际上是实现多选框之间转换
            input.onclick = function() {
                if(input.checked) {
                    //如果多选框被选中了，那么就拿到 完成这一列
                    let target = document.querySelector('.done');
                    target.appendChild(div);
                } else {
                    //如果多选框未被选中，那么就拿到 未完成这一列
                    let target = document.querySelector('.todo');
                    target.appendChild(div);
                }
            }

            //3. 实现删除操作，针对删除按钮实现一个点击事件
            button.onclick = function() {
                //此时 div 的父元素可能是 todo，也可能是 done
                //可以直接通过 parentNode 这个属性来获取到元素当前的父元素
                let parent = div.parentNode;
                parent.removeChild(div);
            }


        }

    </script>

    <style>

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .parent {
            width: 700px;
            margin-left: auto;
            margin-right: auto;
            /* background-color: red; */
        }

        .child1 {
            width: 700px;
            height: 50px;
            margin-top: 20px;
            margin-bottom: 20px;
            /* background-color: gray; */
        }

        input {
            width: 580px;
            height: 40px;
            margin-right: 10px;
            /* background-color: gray; */
        }

        .button1 {
            width: 102px;
            height: 42px;
            background-color: orange;
            color: white;
            border: none;
            border-radius: 8px;

        }

        .bar {
            width:700px;
            height: 40px;
            line-height: 35px;
            font-weight: bold;
            margin-bottom: 20px;
            background-color:lightslategrey;
            color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        
        .container {
            width: 700px;
            height: 800px;
            /* background-color: aquamarine; */
            margin-left: auto;
            margin-right: auto;
            /* 让 todo 和 done 这两个 div 放置在同一行 */
            display: flex;
            justify-content: center;
        }

        .todo {
            width: 350px;
            height: 800px;
            /* background-color: green; */
        }

        .checkbox {
            width: 16px;
            height: 16px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .items {
            width: 260px;
            height:30px;
            line-height: 30px;
        }

        .done {
            width: 350px;
            height: 800px;
            /* background-color: blue; */
        }

        .row {
            width: 350px;;
            height:50px;
            /* line-height: 50px; */
            display: flex;
            align-items: center;
        }

    </style>

</body>
</html>