WEB APIs（2）-编程知识

应用定时器可以写一个定时轮播图，如下

<!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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title>~</title><link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico"><link rel="stylesheet" href="css/初始化表.css"><link rel="stylesheet" href="css/index.css"><meta name="keywords" content="..." /><style>/*写代码时始终要考虑权重问题！*/@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?au9n7q');src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?au9n7q') format('truetype'),url('fonts/icomoon.woff?au9n7q') format('woff'),url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-footer {height: 80px;background-color: rgb(72, 131, 213);padding: 12px 12px 0 12px;position: relative;}ul {display: flex;align-items: center;}.toggle {position: absolute;right: 0;top: 12px;display: flex;}ul li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background-color: #fff;opacity: 0.4;cursor: pointer;}ul .active {width: 12px;height: 12px;opacity: 1;}</style></head><body><div class="slider"><div class="slider-wrapper"><img src="img/1.jpg" alt=""></div><div class="slider-footer"><p>哆啦A梦1</p><ul><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>const sliderData = [{ url: 'img/1.jpg', title: '哆啦A梦1', color: 'rgb(72, 131, 213)' },{ url: 'img/2.jpg', title: '哆啦A梦2', color: 'rgb(43,35,26)' },{ url: 'img/3.jpg', title: '哆啦A梦3', color: 'rgb(36,3,31)' },{ url: 'img/4.jpg', title: '哆啦A梦4', color: 'rgb(166,131,143)' }]function getRandom(m, n) {return Math.floor(Math.random() * (n - m + 1)) + m}const random = getRandom(0, 3)const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')const footer = document.querySelector('.slider-footer')document.querySelector(`ul li:nth-child(${1})`).classList.add('active')let i = 0setInterval(function () {i++img.src = sliderData[i % 4].urlp.innerHTML = sliderData[i % 4].titlefooter.style.backgroundColor = sliderData[i % 4].colordocument.querySelector(`ul li:nth-child(${((i - 1) % 4) + 1})`).classList.remove('active')document.querySelector(`ul li:nth-child(${(i % 4) + 1})`).classList.add('active')}, 1000)</script>
</body></html>

效果：

此案例有一个缺陷，点击页面无法与用户交互，这就用到了事件监听

事件监听

什么是事件

编程时系统内发生的动作，比如单机一个按钮

监听即一旦有事件触发立即调用一个函数做出响应也称绑定事件

语法：

元素对象.addEventListener('事件类型',要执行的函数)

事件源：哪个DOM元素被触发，就获取这个元素

事件类型：用什么方式触发，鼠标点击click，鼠标经过mouseover等

调用函数：要做什么事

点击即可弹出对话框

事件类型

鼠标事件（click鼠标经过，mouseenter点击和mouseleave离开）

焦点事件（focus获得焦点，blur失去焦点）

键盘事件（Keydown键盘按下和Keyup抬起）

文本事件（input用户输入事件）

由此，可以得到完整轮播图

<!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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title>~</title><link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico"><link rel="stylesheet" href="css/初始化表.css"><link rel="stylesheet" href="css/index.css"><meta name="keywords" content="..." /><style>/*写代码时始终要考虑权重问题！*/@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?au9n7q');src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?au9n7q') format('truetype'),url('fonts/icomoon.woff?au9n7q') format('woff'),url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-footer {height: 80px;background-color: rgb(72, 131, 213);padding: 12px 12px 0 12px;position: relative;}ul {display: flex;align-items: center;}.toggle {position: absolute;right: 0;top: 12px;display: flex;}ul li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background-color: #fff;opacity: 0.4;cursor: pointer;}ul .active {width: 12px;height: 12px;opacity: 1;}.toggle {right: 0;top: 12px;}.toggle button {margin-right: 10px;width: 28px;height: 28px;border: none;background: rgba(255,255,255,0.1);color: #fff;border-radius: 4px;cursor: pointer;appearance: none;}.toggle button:hover {background: rgba(255,255,255,0.2);}</style></head><body><div class="slider"><div class="slider-wrapper"><img src="img/1.jpg" alt=""></div><div class="slider-footer"><p>哆啦A梦1</p><ul><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>const sliderData = [{ url: 'img/1.jpg', title: '哆啦A梦1', color: 'rgb(72, 131, 213)' },{ url: 'img/2.jpg', title: '哆啦A梦2', color: 'rgb(43,35,26)' },{ url: 'img/3.jpg', title: '哆啦A梦3', color: 'rgb(36,3,31)' },{ url: 'img/4.jpg', title: '哆啦A梦4', color: 'rgb(166,131,143)' }]const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')const footer = document.querySelector('.slider-footer')const next = document.querySelector('.next')const prev = document.querySelector('.prev')const slider = document.querySelector('.slider')document.querySelector(`ul li:nth-child(${1})`).classList.add('active')let n=setInterval(function () {next.click()}, 900)let i = 0prev.addEventListener('click',function(){i--i=i<0?sliderData.length-1:iimg.src = sliderData[i % 4].urlp.innerHTML = sliderData[i % 4].titlefooter.style.backgroundColor = sliderData[i % 4].colordocument.querySelector(`ul li:nth-child(${((i + 1) % 4) + 1})`).classList.remove('active')document.querySelector(`ul li:nth-child(${(i % 4) + 1})`).classList.add('active')})next.addEventListener('click',function(){i++img.src = sliderData[i % 4].urlp.innerHTML = sliderData[i % 4].titlefooter.style.backgroundColor = sliderData[i % 4].colordocument.querySelector(`ul li:nth-child(${((i - 1) % 4) + 1})`).classList.remove('active')document.querySelector(`ul li:nth-child(${(i % 4) + 1})`).classList.add('active')})slider.addEventListener('mouseenter',function(){clearInterval(n)})slider.addEventListener('mouseleave',function(){n=setInterval(function () {next.click()}, 900)})</script>
</body></html>

焦点事件

案例：

<!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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title>~</title><link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico"><link rel="stylesheet" href="css/初始化表.css"><link rel="stylesheet" href="css/index.css"><meta name="keywords" content="..." /><style>/*写代码时始终要考虑权重问题！*/@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?au9n7q');src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?au9n7q') format('truetype'),url('fonts/icomoon.woff?au9n7q') format('woff'),url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}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;}.mi .search {border: 1px solid #ff6700;}.list {display: none;position: absolute;border: 1px solid #e0e0e0;left: 0;top: 48px;width: 223px;border-top: 0;background-color: #fff;}.list a {display: block;padding: 6px 15px;font-size: 12px;color: #424242;}.list a:hover {background-color: #eee;}</style></head><body><div class="mi"><input type="search"><ul class="list"><li><a href="#">0</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li></ul></div><script>const input=document.querySelector('[type=search]')//属性选择器const ul=document.querySelector('.list')input.addEventListener('focus',function(){ul.style.display='block'input.classList.add('search')})input.addEventListener('blur',function(){ul.style.display='none'input.classList.remove('search')})</script>
</body></html>

效果：

键盘事件

文本事件

表单输入触发

发布评论案例

<!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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title>~</title><link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico"><link rel="stylesheet" href="css/初始化表.css"><link rel="stylesheet" href="css/index.css"><meta name="keywords" content="..." /><style>/*写代码时始终要考虑权重问题！*/@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?au9n7q');src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?au9n7q') format('truetype'),url('fonts/icomoon.woff?au9n7q') format('woff'),url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}.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(img/哔站头像.gif) no-repeat center/cover;margin-right: 20px;}.wrapper textarea {outline: none;border-color: transparent;resize: none;background-color: #f5f5f5;border-radius: 4px;flex: 1;padding: 10px;transition: all 0.5s;height: 50px;}.wrapper textarea:focus {border-color: #f5f5f5;background-color: #fff;height: 60px;}.wrapper button {background-color: #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="tx" placeholder="发布友善评论" rows="2" maxlength="200"></textarea><button>发布</button></div><div class="wrapper"><span class="total">0/200字</span></div><script>const tx=document.querySelector('#tx')const total=document.querySelector('.total')tx.addEventListener('focus',function(){total.style.opacity=1})tx.addEventListener('blur',function(){total.style.opacity=0})tx.addEventListener('input',function(){total.innerHTML=`${tx.value.length}/200字`})</script>
</body></html>