Shulou(Shulou.com)06/01 Report--

The knowledge of this article "how to use HTML+CSS+JS to achieve number guessing game" is not understood by most people, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use HTML+CSS+JS to achieve number guessing game" article.

1. Number guessing game Please enter the number you want to guess: the number of guesses already: the result of 0 guesses: / / the selector when getting the DOM object let resetButton = document.querySelector ("# reset") / * parameter of JS to be used first So use a special symbol to specify which selector * / let numInput = document.querySelector ('# num') Let guessButton = document.querySelector ('# guess'); let countSpan = document.querySelector ('# count'); let resultSpan = document.querySelector ('# result'); / / generate a random integer let toGuess = Math.floor (Math.random () * 100) + 1; let count = 0; console.log ("toGuess:" + toGuess) GuessButton.onclick = function () {/ / the user clicks the [guess] button and first updates the display of clicks. Count++; countSpann [XSS _ clean] = count; / / reads the contents of the input box, determines / * the parseInt () function parses the string and returns the integer * / let num = parseInt (numInput.value); console.log ("num:" + num); if (num)

< toGuess){ resultSpan[xss_clean] = '猜低了'; resultSpan.style.color = 'red'; }else if(num >

ToGuess) {resultSpanxss _ clean] = 'guess high'; resultSpan.style.color = 'green';} else {resultSpann [XSS _ clean] =' bingo'; resultSpan.style.color = 'orange' }} resetButton.onclick = function () {/ / empty toGuess and count and regenerate a random integer toGuess = Math.floor (Math.random () * 100) + 1; count = 0; resultSpan [XSS _ clean] ='; countSpann [XSS _ clean] ='' NumInput.value =';}

two。 Express the wall messageWall * {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 / * remove the button border * /} .row .submit: active {background-color: grey;} confession wall

Click submit after typing, and the message will be displayed on the wall.

Who: to whom: let submitButton = document.querySelector ('.submit'); submitButton.onclick = function () {/ / 1. Get the contents in the input box 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. Create a new element node, that is, get the input box information / / add it to the DOM tree let row = document.createElement ('div'); / * create a new idv node * / row.className =' row';/* setting attribute name * / row [XSS _ clean] = from + 'say to' + to +':'+ message Let container = document.querySelector ('.container'); container.appendChild (row); / / 3. Clear for (let I = 0; I) what you typed last time

< edits.length; i++){ edits[i].value = ''; } } 3.切换日夜间模式 切换日夜间模式 /* 清除浏览器默认格式 */ *{ 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;; } 代码案例:切换日夜间模式; /*获取元素*/ let div = document.querySelector('div'); div.onclick = function(){ console.log(div.className); /* 获取属性值:content*/ if (div.className.indexOf('light') != -1) { div.className = 'dark'; }else{ div.className = 'light'; } } 4.待办事项 todoList * { 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; /* padding-top: 10px; */ margin-top: 10px; /* background-color: green; */ } .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; } 新建任务 未完成 已完成 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[xss_clean] = taskContent; let deleteBtn = document.createElement('button'); deleteBtn[xss_clean] = '删除'; 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[xss_clean]; parent.removeChild(row); } }

The above is about the content of this article on "how to use HTML+CSS+JS to guess numbers game". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.