发表于： 2023-02-28 21:30:29
0 279
今天的js知识点：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
font-weight: bolder;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div>我是广告</div>
<script>
//延迟函数 setTimeout(回调函数, 等待的毫秒数)
//setTimeout 仅执行一次 所以可以理解为把一段代码延迟执行，平时省略window
// setTimeout(function () {
// console.log('时间到了')
// },2000)
//清除延时函数 let timer = setTimeout(回调函数, 等待的毫秒数)
//clearTimeout(timer)
//案例 5秒钟之后消失的广告
const div = document.querySelector('div')
setTimeout(function (){
div.style.display = 'none'
}, 5000)
</script>
</body>
</html>
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../../css/swiper-bundle.min.css">
<style>
.box {
position: relative;
width: 800px;
height: 300px;
background-color: red;
margin: 100px auto;
}
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="box">
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<script src="../../js/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
//小圆点
pagination: {
el: ".swiper-pagination",
},
//自动播放
autoplay: {
delay: 1000,//1秒切换一次
disableOnInteraction: false, // 之后自动继续播放
},
//可以键盘控制
keyboard: {
enabled: true,
onlyInViewport: true,
},
});
</script>
</body>
</html>
学生信息表案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../css/17-学生信息表.css">
</head>
<body>
<h1>新增学员</h1>
<form class="info" autocomplete="off">
姓名：<input type="text" class="uname" name="uname" />
年龄：<input type="text" class="age" name="age" />
性别:
<select name="gender" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
薪资：<input type="text" class="salary" name="salary" />
就业城市：<select name="city" class="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="曹县">曹县</option>
</select>
<button class="add">录入</button>
</form>
<h1>就业榜</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!--
<tr>
<td>1001</td>
<td>欧阳霸天</td>
<td>19</td>
<td>男</td>
<td>15000</td>
<td>上海</td>
<td>
<a href="javascript:">删除</a>
</td>
</tr>
-->
</tbody>
</table>
<script>
// 获取元素
const uname = document.querySelector(".uname")
const age = document.querySelector(".age")
const gender = document.querySelector(".gender")
const salary = document.querySelector(".salary")
const city = document.querySelector(".city")
const tbody = document.querySelector('tbody')
// 获取所有带有 name 属性 的元素
const items = document.querySelectorAll('[name]')
const arr = [] // 声明一个空的数组，对增加和删除都是对这个数组进行操作
// 1. 录入模块
//1.1 表单提交事件
const info = document.querySelector(".info")
info.addEventListener('submit', function (e) {
// 阻止默认行为 不跳转
e.preventDefault()
// console.log(11)
// 4. 这里进行表单验证 如果不通过，直接中断，不需要添加数据
// 先遍历循环
for (let i = 0; i < items.length; i++) {
if (items[i].value=== '') {
return alert('输入内容不能为空') // 退出函数
}
}
// 创建新的对象
const obj = {
stuId: arr.length + 1,
uname: uname.value,
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value,
}
// console.log(obj)
// 追加到数组里面
arr.push(obj)
//清空表单 重置 reset 方法可以重置一个表单内的所有表单控件的值到初始状态。
this.reset() // this === info
//调用渲染函数
render()
})
//2. 渲染函数 因为增加和删除都需要渲染
function render() {
// 先清空tbody ，把最新数组里面的数据渲染完毕
tbody.innerHTML = ''
// 遍历arr数组
for (let i = 0; i < arr.length; i++) {
//生成tr
const tr = document.createElement('tr')
tr.innerHTML = `
<td>${arr[i].stuId}</td>
<td>${arr[i].uname}</td>
<td>${arr[i].age}</td>
<td>${arr[i].gender}</td>
<td>${arr[i].salary}</td>
<td>${arr[i].city}</td>
<td>
<a href="javascript:" data-id=${i}>删除</a>
</td>
`
// 追加元素 父元素.appendChild(子元素)
tbody.appendChild(tr)
}
}
//3. 删除操作
//3.1 事件委托 tbody
tbody.addEventListener('click', function (e) {
if (e.target.tagName === 'A') {
// 得到当前元素的 自定义属性 data-id
// console.log(e.target.dataset.id)
//删除 arr 数组里面对应的数据
arr.splice(e.target.dataset.id, 1)
// console.log(arr)
//重新渲染一次
render()
}
})
</script>
</body>
</html>
css：
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color:#721c24;
}
h1 {
text-align: center;
color:#333;
margin: 20px 0;
}
table {
margin:0 auto;
width: 800px;
border-collapse: collapse;
color:#004085;
}
th {
padding: 10px;
background: #cfe5ff;
font-size: 20px;
font-weight: 400;
}
td,th {
border:1px solid #b8daff;
}
td {
padding:10px;
color:#666;
text-align: center;
font-size: 16px;
}
tbody tr {
background: #fff;
}
tbody tr:hover {
background: #e1ecf8;
}
.info {
width: 900px;
margin: 50px auto;
text-align: center;
}
.info input, .info select {
width: 80px;
height: 27px;
outline: none;
border-radius: 5px;
border:1px solid #b8daff;
padding-left: 5px;
box-sizing: border-box;
margin-right: 15px;
}
.info button {
width: 60px;
height: 27px;
background-color: #004085;
outline: none;
border: 0;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
.info .age {
width: 50px;
}
返回列表
评论