练习前端案例
练习前端案例
- 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>
展示结果：
