前端学习（6）—— WebAPI部分案例
目录
一，猜数字
二，表白墙
2.1 创建页面布局
2.2 调整样式
2.3 实现提交按钮
2.4 完整代码
三，待办
3.1 创建页面布局
3.2 调整样式
3.3 实现页面行为
3.3.1 新增
3.3.2 设置“已完成”
3.3.3 删除
编辑
3.4 完整代码
一，猜数字
实现一个猜数字页面，0 - 100 内，代码如下：
<button type="button" id="reset">重新开始一局游戏</button>
<br>
请输入要猜的数字：<input type="text" id="number">
<button type="button" id="button">猜</button>
<br>
已经猜的次数：<span id="count">0</span>
<br>
结果：<span id="result"></span>
<script>var inputE = document.querySelector("#number");var countE = document.querySelector("#count");var resultE = document.querySelector("#result");var btn = document.querySelector("#button");var resetBtn = document.querySelector("#reset");var guessNumber = Math.floor(Math.random() * 100) + 1; // 随机生成一个 1-100 的数字var count = 0;btn.onclick = function(){count++;countE.innerText = count; //猜的次数加1var userGuess = parseInt(inputE.value); //获取输入的值if (userGuess == guessNumber) {resultE.innerText = "猜对了";resultE.style = "color: green;";}else if (userGuess < guessNumber) {resultE.innerText = "猜小了";resultE.style = "color: blue;";}else{resultE.innerText = "猜大了";resultE.style = "color: red;";}};resetBtn.onclick = function () {guessNumber = Math.floor(Math.random() * 100) + 1; //重新生成随机数count = 0;countE.innerText = count;resultE.innerText = "";inputE.value = "";}
</script>
二，表白墙
展示效果如下：
实现这个页面分为三步：创建页面布局、调整样式、实现提交按钮
2.1 创建页面布局
如下代码：
<h1>表白墙</h1>
<p>输入后点击提交, 会将信息显示在表格中</p>
<span>谁: </span>
<input type="text">
<span>对谁: </span>
<input type="text">
<span>说什么: </span>
<input type="text">
<input type="button" value="提交">
2.2 调整样式
首先是给各个标签添加属性方便选择器选中：
<div class="container"><h1>表白墙</h1><p>输入后点击提交, 会将信息显示在表格中</p><div class="row"><span>谁: </span><input class="edit" type="text"></div><div class="row"><span>对谁: </span><input class="edit" type="text"></div><div class="row"><span>说什么: </span><input class="edit" type="text"></div><div class="row"><input type="button" value="提交" class="submit"></div>
</div>然后是设置样式，如下代码：
<style>* {margin: 0;padding: 0;}.container {width: 400px;margin: 0 auto;}h1 {text-align: center; /*让标题居中*/padding: 20px 0;}p {color: #666;text-align: center;font-size: 14px;padding: 10px 0;}.row {height: 40px;display: flex;justify-content: center;align-items: center;}span {width: 100px;line-height: 40px;}.edit {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: orange;border: none;}
</style>
2.3 实现提交按钮
<script>// 给点击按钮注册点击事件var submit = document.querySelecToWhor('.submit');submit.onclick = function () {// 1. 获取输入框中的内容var edits = document.querySelecToWhorAll('.edit');var Who = edits[0].value;var ToWhoWho = edits[1].value;var SayWhat = edits[2].value;if (Who == '' || ToWho == '' || SayWhat == '') return; //如果有一项为空，则什么也不做// 2. 构造 html 元素var row = document.createElement('div');row.className = 'row';row.innerHTML = Who + '对' + ToWho + '说: ' + SayWhat;// 3. 将构造好的元素添加进DOM树里var container = document.querySelecToWhor('.container');container.appendChild(row);// 4. 清理之前输入框的内容for (var i = 0; i < 3; i++) {edits[i].value = '';}}
</script>2.4 完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.container {width: 400px;margin: 0 auto;}h1 {text-align: center;/*让标题居中*/padding: 20px 0;}p {color: #666;text-align: center;font-size: 14px;padding: 10px 0;}.row {height: 40px;display: flex;justify-content: center;align-items: center;}span {width: 100px;line-height: 40px;}.edit {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: orange;border: none;}</style>
</head>
<body><div clsss="container"><h1>表白墙</h1><p>输入后点击提交, 会将信息显示在表格中</p><div class="row"><span>谁: </span><input class="edit" type="text"></div><div class="row"><span>对谁: </span><input class="edit" type="text"></div><div class="row"><span>说什么: </span><input class="edit" type="text"></div><div class="row"><input type="butToWhon" value="提交" class="submit"></div></div>
</body>
<script>// 给点击按钮注册点击事件var submit = document.querySelecToWhor('.submit');submit.onclick = function () {// 1. 获取输入框中的内容var edits = document.querySelecToWhorAll('.edit');var Who = edits[0].value;var ToWhoWho = edits[1].value;var SayWhat = edits[2].value;if (Who == '' || ToWho == '' || SayWhat == '') return; //如果有一项为空，则什么也不做// 2. 构造 html 元素var row = document.createElement('div');row.className = 'row';row.innerHTML = Who + '对' + ToWho + '说: ' + SayWhat;// 3. 将构造好的元素添加进DOM树里var container = document.querySelecToWhor('.container');container.appendChild(row);// 4. 清理之前输入框的内容for (var i = 0; i < 3; i++) {edits[i].value = '';}}
</script>
</html>
三，待办
展示效果如下：
3.1 创建页面布局
<div class="nav"><input type="text"><button>新建任务</button>
</div>
<div class="container"><div class="todo"><h3>未完成</h3></div><div class="done"><h3>已完成</h3></div>
</div>
3.2 调整样式
代码如下：
<style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 800px;margin: 0 auto;display: flex;}.todo,.done {width: 50%;height: 100%;}.container h3 {height: 50px;text-align: center;line-height: 50px;background-color: #333;color: #fff;}.nav {width: 800px;height: 100px;margin: 0 auto;display: flex;align-items: center;}.nav input {width: 600px;height: 50px;}.nav button {width: 200px;height: 50px;border: none;background-color: orange;color: #fff;}.row {height: 50px;display: flex;align-items: center;}.row input {margin: 0 10px;}.row span {width: 300px;}.row button {width: 50px;height: 40px;}
</style>3.3 实现页面行为
3.3.1 新增
var addTaskButton = document.querySelector('.nav button');
addTaskButton.onclick = function () {//1，获取到任务内容的输入框内容var input = document.querySelector('.nav input');var taskContent = input.value;//2，新建一个元素节点var row = document.createElement('div');row.className = 'row';var checkbox = document.createElement('input');checkbox.type = 'checkbox';var span = document.createElement('span');span.innerHTML = taskContent;var button = document.createElement('button');button.innerHTML = '删除';row.appendChild(checkbox);row.appendChild(span);row.appendChild(button);//3，把新节点插入到 todo 中var todo = document.querySelector('.todo');todo.appendChild(row);
}- 大体的步骤也就输和代码中的小标题一样，先获取，再创建，最后插入，完成新增行为
3.3.2 设置“已完成”
就和上面 gif 动图那样，只要把多选框勾上，就代表已完成，将该节点移动到右边
//4，给复选框注册点击事件
checkbox.onclick = function () {var row = this.parentNode;if (this.checked) var target = document.querySelector('.done');else var target = document.querySelector('.todo');target.appendChild(row);
}
3.3.3 删除
//5，给删除按钮注册点击事件
button.onclick = function ()
{var row = this.parentNode;var grandParent = row.parentNode;grandParent.removeChild(row);
}
3.4 完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 800px;margin: 0 auto;display: flex;}.todo,.done {width: 50%;height: 100%;}.container h3 {height: 50px;text-align: center;line-height: 50px;background-color: #333;color: #fff;}.nav {width: 800px;height: 100px;margin: 0 auto;display: flex;align-items: center;}.nav input {width: 600px;height: 50px;}.nav button {width: 200px;height: 50px;border: none;background-color: orange;color: #fff;}.row {height: 50px;display: flex;align-items: center;}.row input {margin: 0 10px;}.row span {width: 300px;}.row button {width: 50px;height: 40px;}</style>
</head><body><div class="nav"><input type="text"><button>新建任务</button></div><div class="container"><div class="todo"><h3>未完成</h3></div><div class="done"><h3>已完成</h3></div></div>
</body>
<script>var addTaskButton = document.querySelector('.nav button');addTaskButton.onclick = function () {//1，获取到任务内容的输入框内容var input = document.querySelector('.nav input');var taskContent = input.value;//2，新建一个元素节点var row = document.createElement('div');row.className = 'row';var checkbox = document.createElement('input');checkbox.type = 'checkbox';var span = document.createElement('span');span.innerHTML = taskContent;var button = document.createElement('button');button.innerHTML = '删除';row.appendChild(checkbox);row.appendChild(span);row.appendChild(button);//3，把新节点插入到 todo 中var todo = document.querySelector('.todo');todo.appendChild(row);//4，给复选框注册点击事件checkbox.onclick = function () {var row = this.parentNode;if (this.checked) var target = document.querySelector('.done');else var target = document.querySelector('.todo');target.appendChild(row);}//5，给删除按钮注册点击事件button.onclick = function () {var row = this.parentNode;var grandParent = row.parentNode;grandParent.removeChild(row);}}
</script></html>