学习视频:黑马程序员视频链接
事件监听
三要素:事件源、事件类型、事件处理程序
随机点名案例
<!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;
}
h2 {
text-align: center;
}
.box {
width: 600px;
margin: 50px auto;
/* position: relative; */
font-size: 32px;
line-height: 80px;
/* display: flex; */
text-align: center;
}
.name {
width: 600px;
height: 80px;
color: skyblue;
}
/* .btn {
text-align: center;
} */
.btn button {
width: 120px;
height: 35px;
margin: 0 50px;
}
</style>
</head>
<body>
<h2>随机点名</h2>
<div class="box">
<div class="name">name</div>
<div class="btn">
<button class="start">start</button>
<button class="pause">pause</button>
</div>
</div>
<script>
const arr = ['马超', '黄忠', '赵云', '关羽', '张飞'];
const names = document.querySelector('.name');
const startBtn = document.querySelector('.start');
const pauseBtn = document.querySelector('.pause');
let indexofTimer;
let i;
startBtn.addEventListener('click', function() {
indexofTimer = setInterval(function() {
i = Math.floor(Math.random() * arr.length);
names.innerHTML = arr[i];
}, 100);
if(arr.length === 1) {
startBtn.disabled = true;
pauseBtn.disabled = true;
clearInterval(indexofTimer);
}
});
pauseBtn.addEventListener('click', function() {
clearInterval(indexofTimer);
arr.splice(i, 1);
})
</script>
</body>
</html>
事件类型
鼠标事件
click
mouseenter
mouseleave
焦点事件
focus
blur
练习-下拉搜索框
<!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>
* {
box-sizing: border-box;
}
.box {
width: 500px;
height: 290px;
margin: 50px auto 0;
/* text-align: center; */
position: relative;
}
.box input {
width: 100%;
height: 50px;
font-size: 16px;
padding-left: 8px;
align-items: center;
border: 1px solid rgb(157, 154, 154, 0.5);
outline: none;
}
.box .search {
border: 1px solid #ff6700;
}
.result-list {
list-style: none;
/* color: grey; */
overflow: hidden;
margin: 0;
padding: 0;
/* padding-left: 8px; */
font-size: 14px;
border: 1px solid rgb(234, 96, 96);
border-top: none;
display: none;
/* align-items: center; */
/* visibility: hidden; */
/* visibility: visible; */
}
.result-list li {
/* color: aquamarine; */
height: 25px;
line-height: 25px;
padding-left: 8px;
cursor: pointer;
}
.result-list li a {
text-decoration: none;
color: black;
/* align-items: center; */
}
.result-list li:hover {
background-color: #e1e1e1;
}
</style>
</head>
<body>
<div class="box">
<input type="search" placeholder="小米笔记本">
<ul class="result-list">
<li><a href='#'>全部</a></li>
<li><a href='#'>小米11</a></li>
<li><a href='#'>小米14</a></li>
<li><a href='#'>红米K70</a></li>
<li><a href='#'>哈希</a></li>
<li><a href='#'>abc</a></li>
</ul>
</div>
<script>
const input = document.querySelector('[type=search]');
const result = document.querySelector('.result-list');
input.addEventListener('focus', function() {
result.style.display = 'block';
input.classList.add('search');
});
input.addEventListener('blur', function() {
result.style.display = 'none';
input.classList.remove('search');
});
</script>
</body>
</html>
键盘事件
keydown
keyup
文本事件
input
练习-评论框-自己写的
看过标准的以后学到了这些
- 之前对不同div相同className没有概念,现在稍微了解一点了
- 学到了这个搭配
// parent
display: flex;
justify-content: flex-end;
// child
flex: 1; // 可根据parent元素伸缩
transition: all 0.5s;
理解了这个是怎么用的- 学习到了css里的focus,当获取焦点时变换元素属性
.wrapper textarea:focus {
border-color: #e4e4e4;
background: #fff;
height: 50px;
}
<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;
}
.comment {
width: 700px;
height: 50px;
margin: 20px;
/* overflow: hidden; */
position: relative;
/* line-height: 50px; */
justify-content: flex-end;
}
.comment img {
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
display: block;
}
.txt {
width: 80%;
/* max-height: 100%; */
/* left: 70px; */
margin-left: 50px;
position: relative;
display: flex;
justify-content: flex-end;
transition: all 0.3s;
}
.txt textarea {
width: 85%;
height: 50px;
/* left: 70px; */
padding-left: 20px;
line-height: 50px;
/* position: absolute; */
/* border: 1px solid #dbdbdb; */
outline: none;
overflow: hidden;
/* border: none; */
border-color: transparent;
resize: none;
background: #f2f2f2;
border-radius: 4px;
/* text-decoration: none; */
transition: all 0.5s;
}
.txt button {
width: 10%;
/* height: 100%; */
/* margin-right: 20px; */
color: #fff;
font-size: 14px;
font-family:"Microsoft Yahei";
background: rgb(32, 192, 255);
border-radius: 4px;
/* padding-left: 20px; */
margin-left: 10px;
float: right;
border-color: transparent;
}
.comment p {
position: relative;
display: block;
/* bottom: -20px; */
font-size: 12px;
color: #b5b3b3;
float: right;
margin-right: 160px;
/* right: 85px; */
}
.txt textarea:focus {
height: 80px;
border-color: #e4e4e4;
background: #fff;
}
</style>
0/200
```练习-评论框-照着标准抄了一遍
<!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>
.wrapper {
min-width: 400px;
max-width: 800px;
display: flex;
justify-content: flex-end;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
background: url(./images/comment/avatar.jpg) no-repeat center / cover;
margin-right: 20px;
}
.wrapper textarea {
outline: none;
resize: none;
border-color: transparent;
background: #f5f5f5;
border-radius: 4px;
flex: 1;
padding: 10px;
transition: all 0.5s;
height: 30px;
}
.wrapper textarea:focus {
background: #fff;
height: 50px;
border-color: #e4e4e4;
}
.wrapper button {
background: #00aeec;
color: #fff;
border: none;
border-radius: 4px;
margin-left: 10px;
width: 70px;
cursor: pointer;
}
.wrapper .total {
margin-right: 80px;
color: #999;
margin-top: 5px;
opacity: 0;
transition: all 0.5s;
}
</style>
</head>
<body>
<div class="wrapper">
<i class="avatar"></i>
<textarea id="txt" rows="2" maxlength="200" placeholder="友善评论"></textarea>
<button>发布</button>
</div>
<div class="wrapper">
<span class="total">0/200</span>
</div>
<script>
const txt = document.querySelector('#txt');
const total = document.querySelector('.total');
txt.addEventListener('focus', function() {
total.style.opacity = 1;
});
txt.addEventListener('blur', function() {
total.style.opacity = 0;
});
txt.addEventListener('input', function() {
total.innerHTML = `${txt.value.length}/200`;
});
</script>
</body>
</html>
事件对象
常用属性
- type 事件类型
- clientX/clientY 相对于浏览器窗口的坐标
- offsetX/offsetY 相对于当前DOM元素的坐标
- key 用户按下按键的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="" id="">
<script>
const input = document.querySelector('input');
input.addEventListener('keyup', function(evt) {
// console.log(evt.key);
if(evt.key === 'Enter') {
console.log('enter enter');
}
})
</script>
</body>
</html>
练习-按下回车发布评论
<!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>
.wrapper{
min-width: 400px;
max-width: 800px;
display: flex;
justify-content: flex-end;
}
.list {
max-height: 48px;
max-width: 800px;
display: flex;
opacity: 0;
}
.wrapper .avatar,
.list .avatar {
width: 48px;
height: 48px;
border-radius: 50%;
margin-right: 20px;
background: url(./images/comment/avatar.jpg) no-repeat center / cover;
}
.wrapper textarea {
outline: none;
resize: none;
border-color: transparent;
border-radius: 4px;
padding: 10px;
height: 30px;
background: #f5f5f5;
flex: 1;
transition: all 0.5s;
}
.wrapper textarea:focus {
height: 50px;
background: #fff;
border-color: #e4e4e4;
}
.wrapper button {
border: none;
background: #00aeec;
color: #fff;
margin-left: 10px;
width: 70px;
border-radius: 4px;
cursor: pointer;
}
.wrapper .total {
color: #999;
margin-right: 80px;
margin-top: 5px;
opacity: 0;
transition:all 0.5s;
}
.info {
display: flex;
flex-flow: column;
/* align-items: center; */
}
.info .uname {
color: pink;
font-weight: 600;
font-size: 12px;
/* line-height: 14px; */
padding: 2px 0;
}
.info .comment {
/* padding: 5px 0; */
flex: 1;
line-height: 28px;
/* align-items: center; */
}
/* .list2 {
max-width: 800px;
padding-bottom: 5px;
border-bottom: 1px solid #e4e4e4;
} */
.info .time {
/* margin-left: 68px; */
font-size: 10px;
color: #999;
/* padding-bottom: 5px; */
}
</style>
</head>
<body>
<div class="wrapper">
<i class="avatar"></i>
<textarea id="txt" rows="2" maxlength="200" placeholder="友善评论"></textarea>
<button>发布</button>
</div>
<div class="wrapper">
<span class="total">0/200</span>
</div>
<div class="list">
<i class="avatar"></i>
<div class="info">
<span class="uname">马小雨</span>
<span class="comment">评论</span>
<span class="time">2023-12-05 04:22:11</span>
</div>
</div>
<script>
const txt = document.querySelector('#txt');
const total = document.querySelector('.wrapper .total');
const list = document.querySelector('.list');
const comment = document.querySelector('.info .comment');
const time = document.querySelector('.info .time');
const btn = document.querySelector('.wrapper button');
txt.addEventListener('focus', function() {
total.style.opacity = 1;
});
txt.addEventListener('blur', function() {
total.style.opacity = 0;
});
txt.addEventListener('input', function() {
total.innerHTML = `${txt.value.length}/200`;
})
txt.addEventListener('keyup', function(evt) {
if(evt.key === 'Enter') {
publish();
}
});
btn.addEventListener('click', publish);
function publish() {
list.style.opacity = 1;
comment.innerHTML = txt.value;
const dateNow = new Date();
txt.value = '';
txt.blur();
total.innerHTML = `0/200`;
time.innerHTML = dateNow.toLocaleString();
}
</script>
</body>
</html>
环境对象this
this代表当前函数所处的环境;谁调用,this就是谁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>btn</button>
<script>
const btn = document.querySelector('button');
btn.addEventListener('click', function() {
console.log(this);
})
</script>
</body>
</html>
回调函数
a函数作为参数传给b函数,a叫做回调函数 如addEventListener
,'setInterval'
练习-tab栏切换-自己写的
<!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>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.tab {
width: 600px;
height: 380px;
overflow: hidden;
margin: 20px;
padding: 20px;
border: 1px solid #e4e4e4;
}
.title,
.items,
.imgs {
display: flex;
position: relative;
}
li {
list-style: none;
}
.title {
height: 60px;
/* line-height: 60px; */
/* position: relative; */
display: flex;
align-items: center;
}
.title h3 {
font-size: 24px;
/* line-height: 60px; */
}
.title .items {
/* float: right; */
/* flex: 1; */
position: absolute;
right: 0;
/* align-items: center; */
}
.title .items .item {
line-height: 28px;
padding: 0 5px;
margin: auto 10px;
/* flex: 1; */
/* float: right; */
/* align-items: center; */
/* margin: auto 0; */
cursor: pointer;
}
.item.active {
font-weight: 600;
color: red;
border-bottom: 3px solid red;
}
.imgs .img {
display: none;
position: absolute;
left: 0;
}
.img.active {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<div class="title">
<h3>每日特价</h3>
<ul class="items">
<li class="item active">精选</li>
<li class="item">美食</li>
<li class="item">百货</li>
<li class="item">个护</li>
<li class="item">预告</li>
</ul>
</div>
<div class="content">
<ul class="imgs">
<li class="img active"><img src="./images/tab/tab00.png" alt=""></li>
<li class="img"><img src="./images/tab/tab01.png" alt=""></li>
<li class="img"><img src="./images/tab/tab02.png" alt=""></li>
<li class="img"><img src="./images/tab/tab03.png" alt=""></li>
<li class="img"><img src="./images/tab/tab04.png" alt=""></li>
</ul>
</div>
</div>
<script>
const item = document.querySelectorAll('.title .items .item');
const img = document.querySelectorAll('.imgs .img');
for(let i = 0;i < item.length;i++) {
item[i].addEventListener('mouseenter', function() {
document.querySelector('.img.active').classList.remove('active');
document.querySelector('.item.active').classList.remove('active');
this.classList.add('active');
img[i].classList.add('active');
})
}
</script>
</body>
</html>
照着标准答案抄了一遍
<!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;
}
.tab {
width: 590px;
height: 340px;
margin: 20px;
border: 1px solid #e4e4e4;
}
.tab-nav {
width: 100%;
height: 60px;
line-height: 60px;
display: flex;
justify-content: space-between;
}
.tab-nav h3 {
font-size: 24px;
font-weight: normal;
margin-left: 20px;
}
.tab-nav ul {
list-style: none;
display: flex;
justify-content: flex-end;
}
.tab-nav ul li {
margin: 0 20px;
font-size: 14px;
}
.tab-nav ul li a {
text-decoration: none;
border-bottom: 2px solid transparent;
color: #333;
}
.tab-nav ul li a.active {
/* text-decoration: none; */
border-color: #e1251b;
color: #e1251b;
}
.tab-content {
padding: 0 16px;
}
.tab-content .item {
display: none;
}
.tab-content .item.active {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-nav">
<h3>每日特价</h3>
<ul>
<li><a href="javascript:;" class="active">精选</a></li>
<li><a href="javascript:;">美食</a></li>
<li><a href="javascript:;">百货</a></li>
<li><a href="javascript:;">个护</a></li>
<li><a href="javascript:;">预告</a></li>
</ul>
</div>
<div class="tab-content">
<div class="item active"><img src="./images/tab/tab00.png" alt=""></div>
<div class="item"><img src="./images/tab/tab01.png" alt=""></div>
<div class="item"><img src="./images/tab/tab02.png" alt=""></div>
<div class="item"><img src="./images/tab/tab03.png" alt=""></div>
<div class="item"><img src="./images/tab/tab04.png" alt=""></div>
</div>
<script>
const item = document.querySelectorAll('.tab-nav ul li a');
const img = document.querySelectorAll('.tab-content .item');
for(let i = 0;i < item.length;i++) {
item[i].addEventListener('mouseenter', function() {
document.querySelector('a.active').classList.remove('active');
document.querySelector('.item.active').classList.remove('active');
this.classList.add('active');
img[i].classList.add('active');
})
}
</script>
</div>
</body>
</html>
案例-全选 自己写的
- 复习了表格的HTML写法
- 学会了伪类选择器check:checked会选中所有checked === true的复选框
- 学会了:出现一个值不是true就是false的情况下,可以用 a = b === c这种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 500px;
height: 200px;
border: 2px solid #000;
border-collapse: collapse;
text-align: center;
}
/*
table {
border: 1px solid #aaa;
} */
table th {
background-color: skyblue;
}
table td,
table th {
/* width: 25%; */
border: 1px solid #aaa;
font-size: 18px;
}
</style>
</head>
<body>
<div class="box">
<table>
<tr>
<th><input type="checkbox" name="" id="checkAll"></th>
<th>brand</th>
<th>store</th>
<th>price</th>
</tr>
<tr>
<td><input type="checkbox" name="" class="checkone"></td>
<td>xiaomi1</td>
<td>aaaa</td>
<td>1999</td>
</tr>
<tr>
<td><input type="checkbox" name="" class="checkone"></td>
<td>xiaomi2</td>
<td>wwww</td>
<td>2000</td>
</tr>
<tr>
<td><input type="checkbox" name="" class="checkone"></td>
<td>xiaomi3</td>
<td>eeee</td>
<td>3999</td>
</tr>
</table>
</div>
<script>
const checkAll = document.querySelector('#checkAll');
const checkone = document.querySelectorAll('.checkone');
checkAll.addEventListener('click', function() {
for(let i = 0;i < checkone.length;i++) {
checkone[i].checked = checkAll.checked;
}
})
for(let i = 0;i < checkone.length;i++) {
checkone[i].addEventListener('click', function() {
if(this.checked === false) {
checkAll.checked = 0;
}
else if(this.checked === true){
let flag = 1;
for(let j = 0;j < checkone.length;j++) {
if(checkone[j].checked === false) {
flag = 0;
}
}
checkAll.checked = flag;
}
})
}
</script>
</body>
</html>
案例全选-抄了一遍标准答案
<!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;
}
table {
border: 1px solid #8a8888;
border-collapse: collapse;
border-spacing: 0;
width: 500px;
height: 180px;
margin: 50px auto;
text-align: center;
}
td {
border: 1px solid #929191;
}
th {
background: #0d8ee4;
color: #fff;
height: 30px;
}
</style>
</head>
<body>
<table>
<tr>
<th><input type="checkbox" id="checkAll">全选</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td><input type="checkbox" class="checkOne"></td>
<td>xiaomi</td>
<td>xiaomi</td>
<td>1999</td>
</tr>
<tr>
<td><input type="checkbox" class="checkOne"></td>
<td>xiaomi2</td>
<td>xiaomi2</td>
<td>2000</td>
</tr>
<tr>
<td><input type="checkbox" class="checkOne"></td>
<td>xiaomi3</td>
<td>xiaomi3</td>
<td>3999</td>
</tr>
</table>
<script>
const checkAll = document.querySelector('#checkAll');
const checkOne = document.querySelectorAll('.checkOne');
let checkNum = document.querySelector('.checkOne:checked');
checkAll.addEventListener('click', function() {
for(let i = 0;i < checkOne.length;i++) {
checkOne[i].checked = this.checked;
}
})
for(let i = 0;i < checkOne.length;i++) {
checkOne[i].addEventListener('click', function() {
// if(document.querySelectorAll('.checkOne:checked').length === checkOne.length) {
// checkAll.checked = this.checked;
// }
// else {
// checkAll.checked = false;
// }
checkAll.checked = document.querySelectorAll('.checkOne:checked').length === checkOne.length;
})
}
</script>
</body>
</html>
标签:document,color,border,JavaScript,height,width,API02,js,margin
From: https://www.cnblogs.com/ayubene/p/17868825.html