文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么用HTML+CSS+JS实现猜数字游戏

2023-06-29 06:47

关注

这篇“怎么用HTML+CSS+JS实现猜数字游戏”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么用HTML+CSS+JS实现猜数字游戏”文章吧。

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>    <input type="button" id="reset" value="重新开始一局游戏">    <div>        <span>请输入要猜的数字:</span>        <input type="text" id="num">        <input type="button" value="猜" id="guess">    </div>    <div>        <span>已经猜的次数: </span>        <span id="count"> 0 </span>    </div>    <div>        <span>猜的结果: </span>        <span id="result"></span>    </div>    <script>        // 先获取要用到的 JS 的 DOM 对象        let resetButton =  document.querySelector("#reset")         let numInput = document.querySelector('#num');        let guessButton = document.querySelector('#guess');        let countSpan = document.querySelector('#count');        let resultSpan = document.querySelector('#result');        //生成一个1~100之间的随机整数        let toGuess = Math.floor(Math.random()*100) + 1;        let count = 0;        console.log("toGuess: " + toGuess);        guessButton.onclick = function(){            // 用户点击 [猜] 这个按钮, 首先先更新点击次数的显示.             count++;             countSpan.innerHTML = count;             // 读取到输入框的内容, 进行判定                          let num = parseInt(numInput.value);             console.log("num: " + num);             if(num < toGuess){                 resultSpan.innerHTML = '猜低了';                 resultSpan.style.color = 'red';             }else if(num > toGuess){                 resultSpan.innerHTML = '猜高了';                 resultSpan.style.color = 'green';             }else{                 resultSpan.innerHTML = '猜对了';                 resultSpan.style.color = 'orange';             }        }        resetButton.onclick = function(){            // 把 toGuess 和 count 清空, 同时重新生成一个随机的整数            toGuess = Math.floor(Math.random() * 100) + 1;            count = 0;            resultSpan.innerHTML = '';            countSpan.innerHTML = '';            numInput.value = '';        }    </script></body></html>

怎么用HTML+CSS+JS实现猜数字游戏

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>messageWall</title></head><body>    <style>        *{            margin:0;            padding:0;        }        .container {            width: 100%;            height:100%;        }        h2{            text-align:center;            padding:20px 0;        }        p{            font-size: 15px;            color:grey;            padding:10px 0;            text-align: center;        }        .row{            display:flex;            height:50px;            justify-content: center;            align-items: center;        }        .row span{            width:100px;        }        .row .edit{            width: 200px;            height: 36px;        }        .row .submit{            width:300px;            height:30px;            background-color: orange;            color:#fff;            border: none;         }        .row .submit:active{            background-color: grey;        }    </style>    <div class="container">        <h2>表白墙</h2>        <p>输入后点击提交, 将会把消息显示在墙上</p>        <div class="row">            <span>谁:</span>            <input type="text" class="edit">        </div>        <div class="row">            <span>对谁:</span>            <input type="text" class="edit">        </div>        <div class="row">            <span>说什么:</span>            <input type="text" class="edit">        </div>        <div class="row">            <input type="button" value="提交" class="submit">        </div>    </div>    <script>        let submitButton = document.querySelector('.submit');        submitButton.onclick = function() {            // 1. 获取到输入框里面的内容            let edits = document.querySelectorAll('.edit');            let from = edits[0].value;            let to = edits[1].value;            let message = edits[2].value;            console.log(from + ", " + to + ", " + message);            if (from == '' || to == '' || message == '') {                return;            }            //2. 创建一个新的元素节点,即获取到的输入框信息            //将其添加到DOM树中            let row = document.createElement('div');            row.className = 'row';            row.innerHTML = from + '对' + to + '说: ' + message;            let container = document.querySelector('.container');            container.appendChild(row);            //3. 把上次输入的内容清空            for(let i = 0; i < edits.length; i++){                edits[i].value = '';            }        }    </script></body></html>

怎么用HTML+CSS+JS实现猜数字游戏

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>    <style>                *{            margin:0;            padding: 0;        }        html,body {            width: 100%;            height: 100%;        }        .light{            background-color: #fff;            color: #000;            font-size: 40px;;        }        .dark{            background-color: #666;            color: #eee;            font-size: 40px;;        }    </style>    <div class="light">        代码案例:切换日夜间模式;    </div>    <script>                let div = document.querySelector('div');        div.onclick = function(){            console.log(div.className);             if (div.className.indexOf('light') != -1) {                div.className = 'dark';            }else{                div.className = 'light';            }        }    </script>    </body></html>

4.待办事项

<!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>todoList</title></head><body>    <style>        * {            padding: 0;            margin: 0;            box-sizing: border-box;        }        .nav {            width: 600px;            margin: 0 auto;            display: flex;            justify-content: center;            align-items: center;        }        .nav input {            width: 450px;            height: 50px;            font-size: 25px;            padding-left: 10px;        }        .nav button {            width: 150px;            height: 50px;            border: none;            color: white;            background-color: orange;            font-size: 18px;        }        .nav button:active {            background-color: grey;        }        .container {            width: 600px;            margin: 0 auto;            display: flex;            justify-content: center;                        margin-top: 10px;                    }        .container .left,        .container .right {            width: 50%;        }        .container .left h4,        .container .right h4 {            text-align: center;            height: 50px;            line-height: 50px;            background-color: black;            color: white;        }        .container .row {            height: 50px;            display: flex;            align-items: center;            justify-content: flex-start;        }        .container .row span {            width: 240px;        }        .container .row button {            width: 40px;            height: 30px;        }        .container .row input {            margin-right: 5px;        }    </style>    <!-- 表示上方的 div, 里面放输入框和按钮 -->    <div class="nav">        <input type="text">        <button>新建任务</button>    </div>    <!-- 这个是下方的 div, 里面分成左右两栏 -->    <div class="container">        <div class="left">            <h4>未完成</h4>            <!-- <div class="row">                <input type="checkbox">                <span>吃饭</span>                <button>删除</button>            </div> -->        </div>        <div class="right">            <h4>已完成</h4>        </div>    </div>    <script>        let addTaskBtn = document.querySelector(".nav button");        addTaskBtn.onclick = function() {            // 1. 获取到输入框的内容            let input = document.querySelector(".nav input");            let taskContent = input.value;            // 2. 创建一个 div.row, 里面设置上需要的 复选框, 文本, 删除按钮            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 deleteBtn = document.createElement('button');            deleteBtn.innerHTML = '删除';            row.appendChild(checkBox);            row.appendChild(span);            row.appendChild(deleteBtn);            // 3. 把 div.row 添加到 .left 中~            let left = document.querySelector('.left');            left.appendChild(row);            // 4. 给 checkBox 增加一个点击处理函数. 点击之后就能够移动任务            checkBox.onclick = function() {                // 当用户点击的时候, 就获取到当前的这个 row 这个元素                // 把这 row 给添加到另外一侧.                // 也可以根据 checkBox 的选中状态决定是在 left 还是 right                let target = null;                if (checkBox.checked) {                    // 已经是选中的状态                    // 就把这个元素放到右边                    target = document.querySelector('.right');                } else {                    // 是未选中的状态                    // 就把这个元素放到左边                    target = document.querySelector('.left');                }                target.appendChild(row);            }            // 5. 实现删除效果, 给删除按钮新增一个删除操作            deleteBtn.onclick = function() {                // 要想删除 row, 就需要知道 row 的父元素                let parent = row.parentNode;                parent.removeChild(row);            }        }    </script></body></html>

怎么用HTML+CSS+JS实现猜数字游戏

以上就是关于“怎么用HTML+CSS+JS实现猜数字游戏”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯