Оглавление
4.1 Получить элементы на основе идентификатора
4.2 Получить элементы по имени
4.3 Получить элементы по имени класса
4.4 Получение элементов на основе селекторов css
1. Отображение эффекта
добавление:
Вычитание:
умножение:
разделение:
Делитель на 0:
2. Исходный код
2.1Исходный код 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 Исходный код 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. CSS-свойства
3.1ширина, атрибут высоты
width задает ширину, а height задает высоту.
<body>
<input type="button" value="按钮"/>
</body>Оригинальный размер кнопки:
После изменения ширины и высоты:
<style>
#but{
height: 60px;
width: 100px;
}
</style>
<body>
<input type="button" value="按钮" id="but"/>
</body>
3.2 свойство размера шрифта
font-size — это атрибут для установки размера шрифта, и его общая единица измерения — px . Например, установите шрифт абзаца на 30px:
<style>
.title {
font-size: 30px;
}
</style>
<body>
<a class="title">这是一段话</a>
</body>
После изменения размера шрифта:
3.3 свойство маржи
Атрибут поля — это атрибут, который изменяет поле, и у поля есть четыре значения параметра . Таким образом, имеется четыре маржинальных случая.
Дело 1
margin:10px,15px,20px,30px;- Верхнее поле 10px
- правое поле 15px
- Нижнее поле 20px.
- Левое поле 30px
Случай 2
margin:20px,30px,15px- Верхнее поле 20px.
- правое поле 30px
- Нижнее поле 15px.
Случай 3
margin:10px,20px- Верхнее поле 10px
- правое поле 20px
Случай 4
margin:50px- Все четыре поля равны 50px.
Давайте возьмем случай четырех полей, чтобы показать эффект:
<style>
.ty {
margin:50px ;
}
</style>
<body>
<div class="ty">
<label>这是一个label:</label>
<input type="text" />
</div>
</body>
3.4 свойство заполнения
Выше мы знаем, что поле устанавливает внешнее поле, затем внутреннее поле изменяется с помощью заполнения , и есть четыре ситуации:
Дело 1
padding:10px,5px,15px,20px;- Верхний отступ составляет 10 пикселей.
- Отступ справа 5px.
- Нижний отступ составляет 15 пикселей.
- Левый отступ составляет 20 пикселей.
Случай 2
padding:10px,5px,15px;- Верхний отступ составляет 10 пикселей.
- Отступы справа и слева равны 5px.
- Нижний отступ составляет 15 пикселей.
Случай 3
padding:10px,5px;- Верхний и нижний отступы составляют 10 пикселей.
- Отступы справа и слева равны 5px.
Случай 4
padding:100px;- Верхний, нижний, левый и правый отступы составляют 100 пикселей.
Возьмем в качестве примера случай 4:
<style>
.test {
padding: 50px;
}
</style>
<body>
<table border="1">
<tr><td class="test"></td></tr>
</table>
</body>Эффект проявляется:
3.5 свойство background-color
Эффект, достигаемый атрибутом background-color , — это цвет фона, например, установка цвета фона фрагмента текста на небесно-голубой:
<style>
.title {
background-color: skyblue;
}
</style>
<body>
<a class="title">这是一段话</a>
</body>
эффект отображения:
3.6 атрибут границы
Атрибут границы — это атрибут для изменения границы, мы можем установить размер и цвет границы. Синтаксис: граница: размер сплошной цвет; если у нас есть только размер, но нет сплошного значения, цвет по умолчанию черный.
<style>
.ty {
border: 2px solid red;
}
</style>
<body>
<label>这是一个label:</label>
<input type="text" class="ty"/>
</body>
3.7 свойство радиуса границы
Атрибут border-radius — это «округлость» измененной границы, то есть добавление закругленной границы к элементу.Синтаксис такой: border-radius: размер; например, установите для границы закругленную границу 10px.
<style>
.ty {
border-radius: 10px;
}
</style>
<body>
<label>这是一个label:</label>
<input type="text" class="ty"/>
</body> Эффект проявляется:
3.8 свойство text-align
Атрибут text-align используется для указания выравнивания текста.Методы выравнивания включают выравнивание по левому краю, выравнивание по центру и выравнивание по правому краю . Выравнивание по левому краю является выравниванием по умолчанию.
Выравнивание по центру :
<style>
.test {
text-align: center;
}
</style>
<body>
<h1 class="test">这是一个标题</h1>
</body>Эффект проявляется:
Выровнять вправо :
<style>
.test {
text-align: right;
}
</style>
<body>
<h1 class="test">这是一个标题</h1>
</body> Показать результаты:
4, ДОМ
4.1 Получить элементы на основе идентификатора
document.getElementById получает элементына основе идентификатора , как показано в следующем коде:
<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>Когда я ввожу 55, а затем нажимаю кнопку, консоль выводит 55:
Таким образом, добавление .onclick после document.getElementById в приведенном выше коде означает нажатие кнопки для выполнения соответствующей операции, а добавление .value означает получение значения, соответствующего идентификатору.
4.2 Получить элементы по имени
document.getElementByName основан на имени для получения элемента
<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>В приведенном выше коде мы получаем два элемента формы, бокс и джиу-джитсу, через document.getElementsByName('sports'):
4.3 Получить элементы по имени класса
document.getElementByClassName -получить элементы в соответствии с классом
<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 Получение элементов на основе селекторов css
document.querySelector получает элементыв соответствии с селекторами css , как в следующем коде:
<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>
В этом сообщении в блоге в основном объясняются некоторые формы и атрибуты CSS в HTML, а также DOM в JS. В статье подробно объясняется эффект реализации и использование каждой точки знаний. Когда вы спуститесь, вы должны попытаться набрать код самостоятельно, Только когда мы реализуем некоторые страницы, мы сможем понять эту точку знаний и как добиться определенного эффекта. В статье также много точек знаний, которые не реализовали эффект страницы.Вы также можете проверить это сами, чтобы почувствовать эффект реализации этих точек знаний, давай!
Этот блог закончился, спасибо, что читаете. Если вы что-то выиграете, пожалуйста, уделите блогеру немного внимания, и мы увидимся в следующий раз.