WEB APIs（2）

已于 2024-02-18 16:15:51 修改
阅读量367 收藏 2
点赞数 6
文章标签： 前端 javascript
于 2024-02-16 16:39:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74227060/article/details/136123263
版权

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

<!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 = 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">&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 = 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>

说到评论 str.trim()去除两侧无意义空格，防止输入数据无意义

象更
关注
JavaScript Web APIs2
2401_84152911的博客
05-12 766
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Web APIs
chinusyan的专栏
05-04 711
Web APIs 主要学习 DOM 和 BOM Web APIs are typically used with JavaScript, although this doesn’t always have to be the case. 一、Web API API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可
WebAPIs
m0_62091240的博客
09-06 159
API是为我们程序员提供的一个接口,帮助我们实现某种功能,我们会使用就可以了,不必纠结内部如何实现Web API主要是针对于浏览器提供的接口,主要针对于浏览器做交互效果。Web API -般都有输入和输出(函数的传参和返回值) , Web API很多都是方法(函數)出(函数的传参和返回值) , Web API很多都是方法(函數)学习Web API可以结合前面学习内置对象方法的思路学习。
JavaScript——Web APIs
蟹黄堡
05-22 288
JS的组成 JavaScript由ECMAScript（JavaScript基础）、DOM和BOM（Web APIs）组成。 其中，JavaScript基础是ECMAScript标准规定的基本语法；而Web APIs是W3C组织的标准。 API和Web API API（应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码或理解内部工作机制的细节。 Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。
Web APIs 简介
喔吼吼吼
08-11 638
1. Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 JS 基础学习 ECMAScript 基础语法为后面作铺垫， Web APIs 是 JS 的应用，大量使用 JS 基础语法做交互效果 JS 基础阶段 我们学习的是 ECMAScript 标准规定的基本语法 要求同学们掌握 JS 基础语法 只学习基本语法，做不了常用的网页交互效果 目的是为了 JS 后面的课程打基础、做铺垫 Web APIs 阶段 Web APIs 是
WebAPIs-基础知识
qq_31087241的博客
05-12 1584
###WebAPIs Web APIs 是W3C组织的标准 Web APIs 是JavaScript所独有的部分 Web APIs 主要提供页面交互功能 JS的应用 API (Application Programming Interfact) 应用程序编程接口 : 一些预定义的函数，提供应用程序和开发人员基于某软件或硬件得意访问一组例程的能力 Web API : 浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM) DOM （Document Object Model) : W3C组织推
JavaScript核心Web APIs
weixin_58997863的博客
08-23 2658
前端学习之 JavaScript核心WebAPIs 学完JavaScript基础，就可以学习JavaScript核心 DOM 和 BOM操作了，真正体会JavaScript的魅力，本文会讲解如何获取DOM元素，如何操作DOM 元素，BOM操作， 事件，事件对象，事件委托，JS执行队列，定时器，常见网页特效，比如轮播图，tab栏切换等。 还会讲解移动端如何制作网页特效，带你进入JavaScript的实际开发应用。
WebAPIs:事件流
2301_76534754的博客
12-27 2181
获取位置1.获取元素距离自己定位父级元素的左、上距离offsetLefth和offsetTop注意是只读属性。
tizen-tv-webapis
05-17
tizen-电视-webapis tizen-tv-webapis软件包用于支持commonjs 作为commonjs样式。 现在，我们为Typescript开发人员提供支持。 请注意，为了使用此功能，需要@types/tizen-tv-webapis 。 支持的API 如何使用 普通js ...
Web APIs.xmind
12-05
- API（Application Programming Interface）应用程序编程==接口==（暴露出来的工具）。 - webAPI：浏览器平台对外公开的提供操作浏览器和网页的接口（BOM、DOM
WebAPIs基础笔记
07-07
WebAPIs笔记
Designing Web APIs
09-15
Designing Web APIs O'Reilly, 2018 Sep. Building APIs That Developers Love By Amir Shevat, Brenda Jin, Saurabh Sahni ---------------------------------------------------- 具体介绍见美亚，版权归原作者。...
RESTful Web APIs
09-05
For you see, the programming world was quite a different place when RESTful Web Services, the predecessor of this book, was written. At that time, the term “REST” was was rarely used. And when it ...
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 606
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
登录功能开发 P167重点
最新发布
2303_81204446的博客
09-30 380
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1179
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 5856
Webpack 打包后文件过大，如何优化？
第十一章 【前端】调用接口（11.1）——Vite 环境变量
qdbest的专栏
09-29 138
Vite。
前端面试经验总结2(经典问题篇)
rita_0567的博客
09-28 1025
因为计算机技术的快速发展，所以程序员如果不能保持对技术的持续性学习，会更容易的被淘汰，我从来不觉得程序员是一个轻松的职业，但是程序员是我最热爱的职业，我做好了充足的准备让自己能够长期在前端行业深耕。既要扩充自己的知识宽度，同时又不要一味的追求学习的东西越多越来，今天学两天这个，明天学两天那个，工作中又没有得到使用的话，很快也都会忘记的。了解，贵公司主要是在xxx行业从事xxx业务，贵公司所处的行业是我非常看好的，我感觉贵公司的氛围我很喜欢，比如xxxx。遇到了哪些挑战，我如何在不利的条件下成长起来的。
精通RESTful Web APIs设计
"RESTful Web APIs 是一本由 Leonard Richardson 和 Mike Amundsen 合著，并由 Sam Ruby 撰写前言的专业书籍，专注于探讨如何设计和实现高效、优雅的 RESTful Web API。这本书受到了业界专家的高度评价，被认为是对 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

象更

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值