Tabla de contenido
3.2 propiedad de tamaño de fuente
3.5 propiedad de color de fondo
3.8 propiedad de alineación de texto
4.1 Obtener elementos basados en id
4.2 Obtener elementos por nombre
4.3 Obtener elementos según el nombre de la clase
4.4 Obtener elementos basados en selectores css
1. Visualización de efectos
suma:
Sustracción:
multiplicación:
división:
Divisor por 0:
2. Código fuente
2.1 Código fuente HTML+CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="cal.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.cal {
width: 400px;
background-color: skyblue;
margin: 50px auto;
border-radius: 10px;
}
.cal h1 {
background-color: rebeccapurple;
height: 60px;
line-height: 60px;
border-radius: 10px 10px 0 0;
text-align: center;
color: azure;
}
.from-control {
padding: 25px 50px;
}
.form-control label {
text-align: right;
}
.form-control,input {
padding: 5px 10px;
height: 20px;
border: 1px black;
border-radius: 5px;
}
.form-control,button{
width: 67px;
height: 32px;
font-size: 25px;
border-radius: 5px;
border: none;
background-color: forestgreen;
}
.result {
height: 25px;
width: 200px;
}
</style>
</head>
<body>
<div class="cal">
<h1>COUNTER</h1>
<div class="from-control">
<label>NumberOne</label>
<input type="text" id="num1"/>
</div>
<div class="from-control">
<label>NumberTwo</label>
<input type="text" id="num2"/>
</div>
<div class="from-control">
<button id="plus">+</button>
<button id="reduce">-</button>
<button id="mul">*</button>
<button id="dev">/</button>
</div>
<div class="from-control">
<label >RESULT</label>
<input type="text" class="result"/>
</div>
</div>
</body>
</html>2.2 código fuente JS
window.addEventListener('load',function(){
document.querySelector('#plus').onclick = function() {
cal('+');
}
document.querySelector('#reduce').onclick = function() {
cal('-');
}
document.querySelector('#mul').onclick = function() {
cal('*');
}
document.querySelector('#dev').onclick = function() {
cal('/');
}
function cal(symbom) {
let num1 = document.getElementById('num1').value;
let num2 = document.getElementById('num2').value;
let result = document.querySelector('.result');
if(symbom == '/') {
if(num2 == 0) {
result.value = "除数不能为零";
}else {
result.value = num1 / num2;
}
}else {
result.value = eval(num1 + symbom + num2);
}
}
})3. Propiedades CSS
3.1 atributo ancho, alto
ancho establece el ancho y alto establece la altura.
<body>
<input type="button" value="按钮"/>
</body>Tamaño original del botón:
Después de la modificación de ancho y alto:
<style>
#but{
height: 60px;
width: 100px;
}
</style>
<body>
<input type="button" value="按钮" id="but"/>
</body>
3.2 propiedad de tamaño de fuente
font-size es un atributo para establecer el tamaño de fuente, y su unidad común es px . Por ejemplo, establezca la fuente de un párrafo en 30 px:
<style>
.title {
font-size: 30px;
}
</style>
<body>
<a class="title">这是一段话</a>
</body>
Después de la modificación del tamaño de fuente:
3.3 propiedad de margen
El atributo de margen es un atributo que modifica el margen, y el margen tiene cuatro valores de parámetro . Por lo tanto, hay cuatro casos de margen.
Caso 1
margin:10px,15px,20px,30px;- El margen superior es 10px
- margen derecho es 15px
- El margen inferior es 20px
- El margen izquierdo es de 30px
Caso 2
margin:20px,30px,15px- El margen superior es de 20px
- margen derecho es 30px
- El margen inferior es 15px
Caso 3
margin:10px,20px- El margen superior es 10px
- margen derecho es 20px
Caso 4
margin:50px- Los cuatro márgenes son 50px
Tomemos el caso de cuatro márgenes para mostrar el efecto:
<style>
.ty {
margin:50px ;
}
</style>
<body>
<div class="ty">
<label>这是一个label:</label>
<input type="text" />
</div>
</body>
3.4 propiedad de relleno
Arriba sabemos que el margen es para establecer el margen exterior, luego el margen interior se modifica mediante relleno , y hay cuatro situaciones:
Caso 1
padding:10px,5px,15px,20px;- El relleno superior es 10px
- El relleno derecho es 5px
- El relleno inferior es 15px
- El relleno izquierdo es 20px
Caso 2
padding:10px,5px,15px;- El relleno superior es 10px
- El relleno derecho y el relleno izquierdo son 5px
- El relleno inferior es 15px
Caso 3
padding:10px,5px;- El relleno superior e inferior son 10px
- El relleno derecho y el relleno izquierdo son 5px
Caso 4
padding:100px;- El relleno superior, inferior, izquierdo y derecho es de 100px
Tomemos el caso 4 como ejemplo:
<style>
.test {
padding: 50px;
}
</style>
<body>
<table border="1">
<tr><td class="test"></td></tr>
</table>
</body>El efecto muestra:
3.5 propiedad de color de fondo
El efecto logrado por el atributo de color de fondo es el color de fondo, como establecer el color de fondo de un texto en azul cielo:
<style>
.title {
background-color: skyblue;
}
</style>
<body>
<a class="title">这是一段话</a>
</body>
efecto de visualización:
3.6 atributo de borde
El atributo de borde es un atributo para modificar el borde, podemos establecer el tamaño y el color del borde. La sintaxis es: border: size solid color; si solo tenemos size pero no solid value, el color por defecto es el negro.
<style>
.ty {
border: 2px solid red;
}
</style>
<body>
<label>这是一个label:</label>
<input type="text" class="ty"/>
</body>
3.7 propiedad border-radius
El atributo border-radius es la "redondez" del borde modificado, es decir, agregar un borde redondeado al elemento. La sintaxis es: border-radius: tamaño; por ejemplo, establezca un borde en un borde redondeado de 10px.
<style>
.ty {
border-radius: 10px;
}
</style>
<body>
<label>这是一个label:</label>
<input type="text" class="ty"/>
</body> El efecto muestra:
3.8 propiedad de alineación de texto
El atributo de alineación de texto se utiliza para especificar la alineación del texto. Los métodos de alineación incluyen alineación a la izquierda, alineación al centro y alineación a la derecha . La alineación izquierda es la alineación predeterminada.
Alineación central :
<style>
.test {
text-align: center;
}
</style>
<body>
<h1 class="test">这是一个标题</h1>
</body>El efecto muestra:
Alinear a la derecha :
<style>
.test {
text-align: right;
}
</style>
<body>
<h1 class="test">这是一个标题</h1>
</body> Mostrar resultados:
4 、 DOM
4.1 Obtener elementos basados en id
document.getElementById obtiene elementosbasados en id , como se muestra en el siguiente código:
<body>
<div>
<label>Number:</label>
<input type="text" id="num1"/>
</div>
<div>
<button id="but">按钮</button>
</div>
<script>
document.getElementById('but').onclick = function() {
let num = document.getElementById('num1').value;
console.log(num);
}
</script>
</body>Cuando ingreso 55 y luego hago clic en el botón, la consola genera 55:
Por lo tanto, agregar .onclick después de document.getElementById en el código anterior significa hacer clic en el botón para realizar la operación correspondiente, y agregar .value significa obtener el valor correspondiente a la identificación.
4.2 Obtener elementos por nombre
document.getElementByName se basa en el nombre para obtener el elemento
<body>
<p>请选择你的兴趣爱好(多选):</p>
<input type="checkbox" name="sports" value="拳击"/>拳击
<input type="checkbox" name="sports" value="柔术"/>柔术
<input type="checkbox" name="sports" value="摔跤"/>摔跤
<input type="checkbox" name="sports" value="散打"/>散打
<script>
var sports = document.getElementsByName('sports');
console.log(sports[0]);
console.log(sports[1]);
</script>
</body>En el código anterior, obtenemos los dos elementos de forma boxeo y jujitsu a través de document.getElementsByName('deportes'):
4.3 Obtener elementos según el nombre de la clase
document.getElementByClassName es paraobtener elementos según la clase
<body>
<div>
<p class="person1">阿珍</p>
<p class="person2">阿强</p>
</div>
<script>
let person1 = document.getElementsByClassName('person1');
console.log(person1[0]);
</script>
</body>
4.4 Obtener elementos basados en selectores css
document.querySelector obtiene elementosde acuerdo con css selectors , como en el siguiente código:
<body>
<div class="mma">拳击</div>
<div class="mma">柔术</div>
<div class="mma">摔跤</div>
<script>
//第一个div
let firstdiv = document.querySelector('.mma');
console.log(firstdiv);
//所有的div
let alldiv = document.querySelectorAll('.mma');
console.log(alldiv);
</script>
</body>
Esta publicación de blog explica principalmente algunos formularios y atributos CSS en HTML más DOM en JS. El artículo explica en detalle el efecto de implementación y el uso de cada punto de conocimiento. Cuando baje, debe intentar escribir el código usted mismo. Solo cuando implementamos algunas páginas podemos entender este punto de conocimiento y cómo lograr un efecto determinado. También hay muchos puntos de conocimiento en el artículo que no se han dado cuenta del efecto de página. También puedes probarlo tú mismo para sentir el efecto de realización de estos puntos de conocimiento, ¡vamos!
Este blog está aquí, gracias por leer. Si gana algo, preste un poco de atención al blogger y nos vemos la próxima vez.