Web_API学习-day2
今天主要学习注册事件和tab栏切换
文章目录
一、事件
学习目标
(1)能给元素添加事件
(2)利用事件做常见的网页交互效果
1.事件监听
举例：
如菜单下拉效果，事件源是菜单，事件是鼠标经过，事件调用函数是菜单向下移动。
所有的事件都是纯小写，没有大写。触发事件需要点击，点击一次执行一次
小例：
<body>
<button>点击我</button>
<script>
// 1. 获取按钮元素
let btn = document.querySelector('button')
// 2. 事件监听 绑定事件 注册事件 事件监听
// 事件源.addEventListener('事件',事件处理函数)
btn.addEventListener('click', function() {
alert('月薪过万')
})
</script>
</body>
1.1 淘宝二维码案例
<style>
* {
margin: 0;
padding: 0;
}
.erweima {
position: relative;
width: 160px;
height: 160px;
margin: 100px auto;
border: 1px solid #ccc;
}
.erweima i {
position: absolute;
left: -13px;
top: 0;
width: 10px;
height: 10px;
border: 1px solid #ccc;
font-size: 12px;
line-height: 10px;
color: #ccc;
font-style: normal;
cursor: pointer;
}
</style>
</head>
<body>
<div class="erweima">
<img src="../素材/images/code.png" alt="">
<i class="close_btn">x</i>
</div>
<script>
// 1. 获取元素 事件源i 关闭的erweima
let close_btn = document.querySelector('.close_btn')
let erweima = document.querySelector('.erweima')
// 2. 事件监听 绑定事件 注册事件 事件监听
// 事件源.addEventListener('事件',事件处理函数)
close_btn.addEventListener('click', function() {
erweima.style.display = 'none' // erweima 关闭 他是隐藏的
})
</script>
</body>
1.2 随机点名案例：(很有学习价值，多写多理解)
<style>
* {
margin: 0;
padding: 0;
}
h2 {
text-align: center;
}
.box {
width: 600px;
margin: 50px auto;
display: flex;
font-size: 25px;
line-height: 40px;
}
.qs {
width: 450px;
height: 40px;
color: red;
}
.btns {
text-align: center;
}
.btns button {
width: 120px;
height: 35px;
margin: 0 50px;
}
</style>
</head>
<body>
<h2>随机点名</h2>
<div class="box">
<span>名字是：</span>
<div class="qs">这里显示姓名</div>
</div>
<div class="btns">
<button class="start">开始</button>
<button class="end">结束</button>
</div>
<script>
// 数据数组
let arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
// 1. 获取元素 两个按钮 + div
// 一定不要忘记加点，因为里面写css类选择器
let start = document.querySelector('.start')
let end = document.querySelector('.end')
let qs = document.querySelector('.qs')
let timer = 0 // timer得是一个全局变量
let random = 0 // random也得是一个全局变量，所以事先声明，而在局部变量里不使用let来定义它
// 2. 给开始按钮注册事件
start.addEventListener('click',function(){
// 随机出数据 --- 快速不断的抽取 间歇函数 将timer给事件但是不能用let
timer = setInterval(function(){
random = getRandom(0,arr.length - 1)
qs.innerHTML = arr[random]
},55)
// 如果到了最后一个，就禁用按钮
if (arr.length === 1) {
start.disabled = end.disabled = true
}
})
// 3. 给结束按钮注册事件 本质是停止定时器
end.addEventListener('click',function(){
clearInterval(timer)
arr.splice(random, 1)
})
</script>
</body>
2.拓展阅读-事件监听版本
现在主要用DOM L2
3.事件类型
3.1 小米搜索框案例
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
.mi {
position: relative;
width: 223px;
margin: 100px auto;
}
.mi input {
width: 223px;
height: 48px;
padding: 0 10px;
font-size: 14px;
line-height: 48px;
border: 1px solid #e0e0e0;
outline: none;
transition: all .9s;
/* 给添加一个过渡效果 */
}
.mi .search {
border: 1px solid #ff6700;
}
.result-list {
display: none;
position: absolute;
left: 0;
top: 48px;
width: 223px;
border: 1px solid #ff6700;
border-top: 0;
background: #fff;
}
.result-list a {
display: block;
padding: 6px 15px;
font-size: 12px;
color: #424242;
text-decoration: none;
}
.result-list a:hover {
background-color: #eee;
}
</style>
</head>
<body>
<div class="mi">
<input type="search" placeholder="小米笔记本">
<ul class="result-list">
<li><a href="#">全部商品</a></li>
<li><a href="#">小米11</a></li>
<li><a href="#">小米10S</a></li>
<li><a href="#">小米笔记本</a></li>
<li><a href="#">小米手机</a></li>
<li><a href="#">黑鲨4</a></li>
<li><a href="#">空调</a></li>
</ul>
</div>
<script>
// 1. 获取元素 input
let search = document.querySelector('input')
let rl = document.querySelector('.result-list')
// 2. 事件监听 获得光标事件 focus
search.addEventListener('focus', function () {
// 显示下拉菜单
rl.style.display = 'block'
// 文本框变色 add
search.classList.add('search')
})
// 3. 事件监听 失去光标事件 blur
search.addEventListener('blur', function() {
// 隐藏下拉菜单
rl.style.display = 'none'
// 文本框去色 remove
search.classList.remove('search')
})
</script>
</body>
3.2 微博输入案例
<body>
<div class="w">
<div class="controls">
<img src="images/tip.png" alt=""><br>
<!-- maxlength="200" 就是限制了输入字符的上限为200 -->
<textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
<div>
<span class="useCount">0</span>
<span>/</span>
<span>200</span>
<button id="send">发布</button>
</div>
</div>
<div class="contentList">
<ul>
</ul>
</div>
</div>
<script>
// 1. 获取元素 文本框 count
let area = document.querySelector('#area')
let useCount = document.querySelector('.useCount')
// 2. 绑定事件 用户输入事件 input
area.addEventListener('input', function(){
// 不断得到文本域里面的字符长度
// area.value可以得到的是值。area.value.length可以得到输入字符的长度
// console.log(area.value.length)
useCount.innerHTML = area.value.length
})
</script>
</body>
3.3 全选文本框案例1
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
// 1. 获取元素 全选 和 ck 小复选框
let all = document.querySelector('#checkAll')
let cks = document.querySelectorAll('.ck')
let span = document.querySelector('span')
// 2. 事件监听 全选按钮
all.addEventListener('click', function(){
// this 指当前的all，所以this.checked就是all.checked
// console.Log(all.checked) 返回值为ture或者false
// 我们需要做的就是把 all.checked 给下面三个小按钮
// 因为三个按钮在伪数组里面，我们需要遍历的方式，挨个取出来，依次给值
for (let i = 0; i < cks.length; i++) {
cks[i].checked = all.checked
}
// 当我们的全选按钮处于选中状态时，则可以改为取消
// if (all.checked === true) 因为all.checked本身就代表ture，可以简化代码
if (all.checked) {
span.innerHTML = '取消'
} else {
span.innerHTML = '全选'
}
})
</script>
3.4 全选文本框案例2
还是不太好理解，多捋顺逻辑
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
// 1. 获取元素 全选 和 ck 小复选框
let all = document.querySelector('#checkAll')
let cks = document.querySelectorAll('.ck')
let span = document.querySelector('span')
// 2. 事件监听 全选按钮
all.addEventListener('click', function(){
// this 指当前的all，所以this.checked就是all.checked
// console.Log(all.checked) 返回值为ture或者false
// 我们需要做的就是把 all.checked 给下面三个小按钮
// 因为三个按钮在伪数组里面，我们需要遍历的方式，挨个取出来，依次给值
for (let i = 0; i < cks.length; i++) {
cks[i].checked = all.checked
}
// 当我们的全选按钮处于选中状态时，则可以改为取消
// if (all.checked === true) 因为all.checked本身就代表ture，可以简化代码
if (all.checked) {
span.innerHTML = '取消'
} else {
span.innerHTML = '全选'
}
})
// 3.小按钮的做法 用for遍历，同时给多个元素绑定相同事件
for (let i = 0;i < cks.length; i++) {
// 绑定事件
cks[i].addEventListener('click',function(){
// 只要点击任何一个小按钮，都要遍历所有的小按钮
for (let j = 0;j < cks.length; j++) {
// 遍历来看看是不是有人没被选中
if(cks[j].checked === false) {
// 如果有false 则退出循环 结束函数
all.checked = false
span.innerHTML = '全选'
return
}
}
// 当我们的循环结束，如果代码走到这里，说明没有false，都被选中了
all.checked = true
span.innerHTML = '取消'
})
}
</script>
</body>
3.5 购物车加减案例
这个效果是在开发中经常用的
<style>
div {
width: 80px;
}
input[type=text] {
width: 50px;
height: 44px;
outline: none;
border: 1px solid #ccc;
text-align: center;
border-right: 0;
}
input[type=button] {
height: 24px;
width: 22px;
cursor: pointer;
}
input {
float: left;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div>
<input type="text" id="total" value="1" readonly>
<input type="button" value="+" id="add">
<input type="button" value="-" id="reduce" disabled>
<script>
// 1. 获取元素 三个 获取的数字是字符串类型的
let tota = document.querySelector('#total')
let add = document.querySelector('#add')
let reduce = document.querySelector('#reduce')
// 2. 点击加号 事件监听
add.addEventListener('click',function(){
// i++有一个特点 是隐式转换，所以原本字符串型直接转成了数字型
total.value++
reduce.disabled = false
})
// 3.点击减号 事件监听
reduce.addEventListener('click',function(){
total.value--
// <= 隐式转换 字符串类型变为数字型
if (total.value <= 1) {
reduce.disabled = true
}
})
</script>
</div>
</body>
二、高阶函数
如事件监听里的function就是回调函数，当事件被触发如点击click后，才会回头调用函数，所以叫回调函数
三、环境对象
<body>
<button>点击</button>
<script>
// 环境对象 this 他就是个对象
function fn() {
console.log(this)
}
// fn() 因为是window调用的fn()，this指代就是window
window.fn()
let btn = document.querySelector('button')
btn.addEventListener('click', function(){
console.log(this) // this指的就是btn
})
</script>
</body>
四、编程思想
排他思想
目前作为一个了解就可以
<style>
.pink {
background: pink;
}
</style>
</head>
<body>
<button>第1个</button>
<button>第2个</button>
<button>第3个</button>
<button>第4个</button>
<button>第5个</button>
<script>
let btns = document.querySelectorAll('button')
for (let i = 0; i < btns.length;i++) {
btns[i].addEventListener('click',function(){
// this.classList.add('pink')
// 先干掉所有人
for(let j = 0; j < btns.length; j++) {
btns[j].classList.remove('pink')
}
// 再复活我自己
this.classList.add('pink')
})
}
</script>
</body>
五、综合案例
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.active {
display: block;
}
.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main active">
<a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg" alt="" /></a>
</div>
</div>
</div>
<script>
// 0. 获取元素
// 得到所有的小li
let lis = document.querySelectorAll('.tab .tab-item')
let divs = document.querySelectorAll('.products .main')
// 1. 头部tab栏切换模块
// 1.1 先给4个小li添加点击事件
for(let i = 0; i < lis.length; i++) {
// 代码的逻辑就是 当点击元素的时候，先检测谁是active把它移除，然后再给点击的元素加active。
lis[i].addEventListener('click',function(){
// 点了谁 谁就变化
// 找到以前的active 类，把它移除掉 *querySelector是选择器，要注意加点
document.querySelector('.tab .active').classList.remove('active')
// 当前的元素添加
this.classList.add('active')
// 2. 底部显示隐藏模块 一定要写到点击事件的里面
document.querySelector('.products .active').classList.remove('active')
// div对应序号的那个加上active
divs[i].classList.add('active')
})
}
</script>
</body>
总结和作业
作业：
- 随机显示图片
<body>
<input type="button" value="切换" id="btn"><br>
<img src="images/1.jpg" width="300" id="img">
<script>
let arr = ["images/1.jpg","images/01.gif","images/02.gif","images/2.jpg",,"images/3.jpg","images/4.jpg","images/5.jpg"]
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
// 1. 获取元素
let btn = document.querySelector('#btn')
let pic = document.querySelector('#img')
// 2. 注册事件，点击随机更换图片
btn.addEventListener('click',function(){
let random = getRandom(0, arr.length - 1)
pic.src = arr[random]
})
</script>
</body>
- 同意协议
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>个人注册</title>
<link rel="stylesheet" href="./css/7.3/common.css" />
<link rel="stylesheet" href="./css/7.3/index.css" />
<link rel="icon" href="./images/7.3/favicon.ico" />
</head>
<body>
<div class="register py-container">
<!--head-->
<div class="logoArea">
<a href="home.html" class="logo"></a>
</div>
<!--register-->
<div class="registerArea">
<h3>
注册新用户<span class="go">我有账号，去<a href="login.html">登陆</a></span>
</h3>
<div class="info">
<form class="sui-form form-horizontal">
<div class="control-group">
<label class="control-label">用户名：</label>
<div class="controls">
<input type="text" class="input-xfat input-xlarge" placeholder="用户名" />
</div>
</div>
<div class="control-group">
<label class="control-label">邮箱：</label>
<div class="controls">
<input type="text" class="input-xfat input-xlarge" placeholder="邮箱" />
</div>
</div>
<div class="control-group">
<label class="control-label">登录密码：</label>
<div class="controls">
<input type="password" class="input-xfat input-xlarge" placeholder="设置登录密码" />
</div>
</div>
<div class="control-group">
<label class="control-label">确认密码：</label>
<div class="controls">
<input type="password" class="input-xfat input-xlarge" placeholder="再次确认密码" />
</div>
</div>
<div class="control-group">
<span class="control-label"> </span>
<label class="controls">
<input id="agree" name="m1" type="checkbox" checked />
<span>同意协议并注册《品优购用户协议》</span>
</label>
</div>
<div class="control-group">
<span class="control-label"></span>
<div class="controls btn-reg">
<button id="registerBtn" class="sui-btn btn-block btn-xlarge btn-danger" href="#">
完成注册
</button>
</div>
</div>
</form>
<div class="clearfix"></div>
</div>
</div>
<!--foot-->
<div class="py-container copyright">
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">联系客服</a></li>
<li><a href="#">商家入驻</a></li>
<li><a href="#">营销中心</a></li>
<li><a href="#">手机品优购</a></li>
<li><a href="#">销售联盟</a></li>
<li><a href="#">品优购社区</a></li>
<li><a href="#">品优购公益</a></li>
<li><a href="#">English Site</a></li>
<li><a href="#">Contact U</a></li>
</ul>
<div class="address">
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096
电话：400-618-4000 传真：010-82935100
</div>
<div class="beian">京ICP备08001421号京公网安备110108007702</div>
</div>
</div>
<script>
// 思路
// 1. 获取元素 复选框 和 按钮
let agree = document.querySelector('#agree')
let btn = document.querySelector('#registerBtn')
// 2. 给按钮注册点击事件
agree.addEventListener('click',function(){
// 2.1 如果复选框选中，按钮就启用，如果复选框不选中，按钮就禁用
// 2.2 注意：复选框选中是true，按钮启用disabled 是false，是相反的要小心
if (this.checked) {
btn.disabled = false
} else {
btn.disabled = true
}
// 参考答案是：
// btn.disabled = !this.checked
// 意为this没有勾选的时候，btn不可用
})
</script>
</body>
</html>
- 验证码倒计时
<style>
body {
padding: 40px;
}
ul {
padding: 0;
list-style: none;
}
li {
margin: 10px 0;
line-height: 26px;
display: flex;
}
input,
button {
padding: 0;
margin-left: 10px;
display: block;
}
input {
width: 190px;
outline: none;
}
button {
width: 120px;
}
.verify {
width: 60px;
}
</style>
</head>
<body>
<ul>
<li>
手机号:
<input type="text">
</li>
<li>
验证码:
<input type="text" class="verify">
<button id="btn">获取验证码</button>
</li>
</ul>
<script>
// 1. 获取元素 按钮
let btn = document.querySelector('#btn')
// 2. 给按钮注册点击事件
btn.addEventListener('click',function(){
// 3. 点击之后，禁用按钮，同时开启倒计时
this.disabled = true
let i = 5
btn.innerHTML = `${i}s后重新获取`
let timer = setInterval(function(){
i--
// 在定时器里面不能用this，this执行的window
btn.innerHTML = `${i}s后重新获取`
// 4. 如果时间为0，则清楚定时器，并且更改文字
if (i < 0){
clearInterval(timer)
btn.innerHTML = '获取验证码'
btn.disabled = false
}
},1000)
})
</script>
</body>
- 显示隐藏密码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box label {
position: absolute;
top: 2px;
right: 2px;
width: 24px;
height: 24px;
background-color: pink;
cursor: pointer;
background: url(./images/close.png) no-repeat;
background-size: cover;
}
.box label.active {
background-image: url(./images/open.png);
}
</style>
</head>
<body>
<div class="box">
<label for=""></label>
<input type="password" name="" id="pwd">
</div>
<script>
// 1. 获取元素 label 和 input
let label = document.querySelector('label')
let input = document.querySelector('input')
// 2. 给label 注册事件， 可以切换类实现图片的切换
// 声明一个变量来控制
let flag = true
label.addEventListener('click',function(){
// toggle实现“睁眼”“闭眼”的切换
this.classList.toggle('active')
// 3. 因为要修改input的type属性 text和password,可以使
// 用一个变量来控制 flag ， 如果为true 就切换为password，
// 如果为false就修改为 text
// input.type = Number
if (flag) {
input.type = 'text'
// flag = false
} else {
input.type = 'password'
// flag = true
}
flag = !flag
})
</script>
</body>
</html>
142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
