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>
展示结果：
