Directorio de artículos
muro de confesiones
El muro de confesiones debe tener tres cuadros de entrada y el texto correspondiente a los tres cuadros de entrada y, finalmente, debe haber un mensaje rápido y un botón de envío.
<body>
<h1>表白墙</h1>
<p>输入后点击提交，会将信息显示到表格中</p>
<span>谁：</span>
<input type="text">
<span>对谁：</span>
<input type="text">
<span>说：</span>
<input type="text">
<button>提交</button>
</body>
1. Implementación de la página
Se puede ver que aunque el efecto en este momento cumple con los requisitos, no es atractivo.
Por lo tanto, para introducir estilos para que se vea bien, eventualmente formará el siguiente efecto.
Primero haga un diseño simple de varios cuadros de entrada.
<div class="container">
<h1>表白墙</h1>
<p>输入后点击提交，会将信息显示到表格中</p>
<span>谁：</span>
<input type="text">
<span>对谁：</span>
<input type="text">
<span>说：</span>
<input type="text">
<button>提交</button>
</div>
Como se muestra en el código anterior, coloque el código escrito anteriormente en una etiqueta div.
<style>
.container {
width: 600px;
margin: 0 auto;
}
</style>
Después de introducir el contenedor , se pueden lograr los siguientes efectos.
El siguiente paso es centrar horizontalmente a los tres personajes en la pared de la confesión.
h1 {
text-align: center;
}
A continuación, deje que la oración "Después de ingresar, haga clic en enviar, la información se mostrará en la tabla" esté centrada horizontalmente.
Luego cambia el color de la oración.
p {
text-align: center;
color: #666;
}
De acuerdo con la representación final anterior, se puede encontrar que los tres cuadros de entrada y un botón ocupan cuatro líneas respectivamente.
Así que aquí necesitamos usar cuatro etiquetas div y encerrarlas respectivamente.
<body>
<div class="container">
<h1>表白墙</h1>
<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>
<div class="row">
<button>提交</button>
</div>
</div>
</body>
El siguiente paso es configurar la fila y habilitar el diseño elástico.
.row {
/* 开启弹性布局 */
display: flex;
height: 40px;
}
A continuación, establezca el centrado horizontal y vertical.
/* 水平方向居中 */
justify-content: center;
/* 垂直方向居中 */
align-items: center;
Puede ver que los cuadros de entrada no están ordenados y el siguiente paso es alinear los cuadros de entrada.
.row span {
width: 80px;
}
.row input {
width: 200px;
}
Ahora establezca la altura del cuadro de entrada.
height: 30px;
El siguiente paso es configurar el botón. Primero elimine el estilo predeterminado del navegador.
/* 这是通配符选择器，可以选中页面的所有元素 */
* {
/* 消除浏览器的默认样式 */
margin: 0;
padding: 0;
box-sizing: border-box;
}
En este momento, se encuentra que la distancia entre las partes encerradas en un círculo en la figura es demasiado grande y se puede ajustar en este momento.
h1 {
text-align: center;
margin: 20px auto;
}
p {
text-align: center;
color: #666;
margin: 20px auto;
}
A continuación, establezca el ancho, la altura y el color del botón.
.row button {
width: 280px;
height: 30px;
color: white;
background-color: orange;
}
Puede ver que el botón de arriba tiene un borde, y el borde debe eliminarse a continuación.
border: none;
Si hace clic en el botón en este momento, no verá el efecto y no podrá determinar si ha hecho clic en él.
Entonces, en este punto, establezca un efecto de retroalimentación para hacer clic en el botón.
.row button:active {
background-color: #666;
}
Cuando se hace clic en el botón, el color de fondo cambia.
código general
<style>
/* 这是通配符选择器，可以选中页面的所有元素 */
* {
/* 消除浏览器的默认样式 */
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 600px;
margin: 0 auto;
}
h1 {
text-align: center;
margin: 20px auto;
}
p {
text-align: center;
color: #666;
margin: 20px auto;
}
.row {
/* 开启弹性布局 */
display: flex;
height: 40px;
/* 水平方向居中 */
justify-content: center;
/* 垂直方向居中 */
align-items: center;
}
.row span {
width: 80px;
}
.row input {
width: 200px;
height: 30px;
}
.row button {
width: 280px;
height: 30px;
color: white;
background-color: orange;
border: none;
}
.row button:active {
background-color: #666;
}
</style>
<body>
<div class="container">
<h1>表白墙</h1>
<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>
<div class="row">
<button>提交</button>
</div>
</div>
</body>
2. Implementación de la lógica js
Lo que queremos es ingresar alguna información en el cuadro de entrada, y después de hacer clic en enviar, se mostrará la información ingresada.
Obtenga el contenido de texto de los tres cuadros de entrada al hacer clic, cree un nuevo div.row y coloque el contenido en este nuevo div.
Primero, seleccione tres cuadros de entrada y un botón
let inputs = document.querySelectorAll('input');
let button = document.querySelector('button');
El siguiente paso es configurar una respuesta de evento basada en el clic.
1. El primero es obtener el contenido de los tres cuadros de entrada.
button.onclick = function() {
// 1.获取到三个输入框的内容
let from = inputs[0].value; // 表示是谁说的
let to = inputs[1].vlaue; // 表示对谁说的
let what = inputs[2].vlaue; // 表示说的是什么
}
2. Construya un nuevo div.
Este div es un div vacío sin atributos, así que déjelo tener atributos.
rowDiv.className = 'row'; // 有了一个 row 的属性
Luego deje que tenga contenido, y coloque el contenido en los tres cuadros de entrada en una oración y póngalo en este nuevo div.
rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + what;
A continuación, no olvide poner este nuevo div después del siguiente código.
Primero seleccione el contenedor actual
let containerDiv = document.querySelector('.container');
Agregue un nuevo div al contenedor seleccionado .
containerDiv.appendChild(rowDiv);
Se puede ver que el efecto deseado se ha logrado en este momento.
Pero hay un lugar donde el diseño no es razonable en este momento, es decir, después del clic actual para enviar, para facilitar la siguiente entrada, se
debe borrar el contenido del cuadro de entrada.
3. Borrar el contenido del cuadro de entrada anterior
// 3.清楚之前输入框里的内容
for (let input of inputs) {
input.value = '';
}
Puede ver que después de hacer clic en enviar, la información en el cuadro de entrada se borra.
Pero ahora todavía hay un problema, es decir, si no hay contenido en el cuadro de entrada, aún se mostrará información después de hacer clic en Enviar.
Por supuesto, esto obviamente es inapropiado, por lo que ahora es necesario hacer un juicio para determinar si el cuadro de entrada actual está vacío.
if (from == '' || to == '' || what == '') {
return;
}
En este momento, si no hay contenido en el cuadro de entrada, ya no se mostrará.
código general
<script>
// 先选中三个输入框和一个按钮
let inputs = document.querySelectorAll('input');
let button = document.querySelector('button');
let containerDiv = document.querySelector('.container');
button.onclick = function() {
// 1.获取到三个输入框的内容
let from = inputs[0].value; // 表示是谁说的
let to = inputs[1].value; // 表示对谁说的
let what = inputs[2].value; // 表示说的是什么
if (from == '' || to == '' || what == '') {
return;
}
// 2.构造一个新 div
let rowDiv = document.createElement('div');
rowDiv.className = 'row'; // 有了一个 row 的属性
rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + what;
containerDiv.appendChild(rowDiv);
// 3.清楚之前输入框里的内容
for (let input of inputs) {
input.value = '';
}
}
</script>