WEBAPIs（2）
- 电脑硬件
- 2025-08-04 02:45:02
应用定时器可以写一个定时轮播图，如下
<!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"><</button> <button class="next">></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 = 0 setInterval(function () { i++ img.src = sliderData[i % 4].url p.innerHTML = sliderData[i % 4].title footer.style.backgroundColor = sliderData[i % 4].color document.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"><</button> <button class="next">></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 = 0 prev.addEventListener('click',function(){ i-- i=i<0?sliderData.length-1:i img.src = sliderData[i % 4].url p.innerHTML = sliderData[i % 4].title footer.style.backgroundColor = sliderData[i % 4].color document.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].url p.innerHTML = sliderData[i % 4].title footer.style.backgroundColor = sliderData[i % 4].color document.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>WEBAPIs（2）由讯客互联电脑硬件栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“WEBAPIs（2）”
上一篇
如何用npm运行本地js文件
下一篇
飞机大作战（c语言）
