![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
WebAPI
文章平均质量分 78
李穩钰
这个作者很懒,什么都没留下…
展开
-
WebAPI第六天学习总结—— 本地存储案例-记住用户名
案例:记住用户名注意:如果勾选记住用户名, 下次用户打开浏览器,就在文本框里面自动显示上次登录的用户名案例分析把数据存起来,用到本地存储关闭页面,也可以显示用户名,所以用到localStorage打开页面,先判断是否有这个用户名,如果有,就在表单里面显示用户名,并且勾选复选框当复选框发生改变的时候change事件如果勾选,就存储,否则就移除示例代码:<!DOCTYPE html><html lang="en"><head>原创 2021-08-20 00:16:52 · 190 阅读 · 0 评论 -
WebAPI第六天学习总结——本地存储 (sessionStorage、localStorage)
window.sessionStorage生命周期为关闭浏览器窗口在同一个窗口(页面)下数据可以共享以键值对的形式存储使用存储数据:sessionStorage.setItem(key, value)获取数据:sessionStorage.getItem(key)删除数据:sessionStorage.removeItem(key)清空数据:(所有都清除掉)sessionStorage.clear()示例代码:<!DOCTYPE html>&l原创 2021-08-20 00:05:30 · 119 阅读 · 0 评论 -
WebAPI第六天学习总结—— 本地存储特性
本地存储 (本机浏览器存储)随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。本地存储特性数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大,sessionStorage约5M、localStorage约20M只能存储字符串,可以将对象JSON.stringify()编码后存储...原创 2021-08-19 00:29:53 · 74 阅读 · 0 评论 -
WebAPI第五天学习总结—— 移动端常用开发插件、移动端常用开发框架
移动端常用开发插件插件JS 插件是 js 文件(js工具),它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件。特点:它一般是为了解决某个问题而专门存在,其功能单一,并且比较小。插件的使用fastclick 插件解决 300ms 延迟。GitHub官网地址: https://github.com/ftlabs/fastclick‘引入 js 插件文件。按照规定语法使用。代码如下:if ('addEventListener' in document) {原创 2021-08-19 00:06:41 · 168 阅读 · 0 评论 -
WebAPI第五天学习总结—— click延时解决方案
click 延时解决方案移动端 click 事件会有 300ms 的延时,原因是移动端屏幕双击会缩放(double tap to zoom) 页面。解决方案:第一种禁用缩放: 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。<meta name="viewport" content="user-scalable=no">解决方案:第二种利用touch事件自己封装这个事件解决300ms 延迟。原理:当我们手指触摸屏幕,记录当前触摸时间当我们手指离开屏幕, 用原创 2021-08-19 00:06:22 · 155 阅读 · 0 评论 -
WebAPI第五天学习总结—— classList属性
classList 属性classList属性是HTML5新增的一个属性,返回元素的类名。但是ie10以上版本支持。该属性用于在元素中添加,移除及切换 CSS 类。添加类语法:element.classList.add('类名')例子:focus.classList.add('current');移除类语法:element.classList.remove('类名');例子:focus.classList.remove('current');切换类语法:element.原创 2021-08-19 00:05:50 · 184 阅读 · 0 评论 -
WebAPI第五天学习总结—— 移动端常见特效(轮播图)
移动端常见特效案例: 移动轮播图需求:移动端轮播图功能和基本PC端一致可以自动播放图片手指可以拖动播放轮播图案例分析:自动播放功能开启定时器移动端移动,可以使用translate 移动想要图片优雅的移动,请添加过渡效果思路:自动播放功能-无缝滚动注意,我们判断条件是要等到图片滚动完毕再去判断,就是过渡完成后判断此时需要添加检测过渡完成事件 transitionend判断条件:如果索引号等于 3 说明走到最后一张图片,此时 索引号要复原为 0此时图片,去掉过渡效果,原创 2021-08-18 18:20:06 · 260 阅读 · 0 评论 -
WebAPI第五天学习总结—— 触屏事件
触屏事件触屏事件概述移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。常见的触屏事件触屏touch事件说明touchstart手指触摸到一个DOM元素时触发touchmove手指在一个D原创 2021-08-18 18:17:40 · 96 阅读 · 0 评论 -
WebAPI第四天学习总结—— 常见网页特效案例(轮播图、节流阀、返回顶部、筋斗云案例)
常见网页特效案例案例:网页轮播图轮播图也称为焦点图,是网页中比较常见的网页特效。效果:功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 3.图片播放的同时,下面小圆圈模块跟随一起变化。 4.点击小圆圈,可以播放相应图片。 5.鼠标不经过轮播图,轮播图也会自动播放图片。 6.鼠标经过,轮播图模块, 自动播放停止。案例代码:index.html<!DOCTYPE html>原创 2021-08-18 16:18:23 · 234 阅读 · 0 评论 -
WebAPI第四天学习总结—— 动画函数封装
动画函数封装动画实现原理核心原理:通过定时器 setInterval()不断移动盒子位置。实现步骤:获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位,才能使用element.style.left示例代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na原创 2021-08-18 14:03:11 · 98 阅读 · 0 评论 -
WebAPI第四天学习总结—— mouseenter 和mouseover的区别
mouseenter 和mouseover的区别当鼠标移动到元素上时就会触发mouseenter 事件类似 mouseover,它们两者之间的差别是mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter 只会经过自身盒子触发之所以这样,就是因为mouseenter不会冒泡跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡mouseenter与mouseover的区别:mouseenter在父子盒子之间来回切换,不会重复触发mouseen原创 2021-08-18 14:00:58 · 103 阅读 · 0 评论 -
WebAPI第四天学习总结—— 元素偏移量offset、可视区client、滚动scroll三大系列总结
三大系列总结offset 系列常用属性offset系列属性作用element.offsetParent返回作为该元素带有定位的父级元素。 如果父级都没有定位则返回bodyelement.offsetTop返回元素相对带有定位父元素上方的偏移element.offsetLeft返回元素相对带有定位父元素左边框的偏移element.offsetWidth返回自身包括padding、边框、内容区的宽度,返回数值不带单位element.offsetHeigh原创 2021-08-18 12:05:40 · 108 阅读 · 0 评论 -
WebAPI第四天学习总结—— 元素滚动 scroll 系列
元素滚动 scroll 系列scroll 概述scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。scroll系列常用属性scroll系列属性作用element.scrollTop返回被卷去的上侧距离,返回数值不带单位element.scrollLeft返回被卷去的左侧距离,返回数值不带单位element.scrollWidth返回自身实际的宽度,不含边框,包含padding,返回数值不带单位el原创 2021-08-18 12:02:55 · 150 阅读 · 0 评论 -
WebAPI第四天学习总结—— 元素可视区 client 系列
元素可视区 client 系列client概述client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。client系列常用属性client系列属性作用element.clientTop返回元素上边框的大小element.clientLeft返回元素左边框的大小element.clientWidth返回自身包括padding、内容区的宽度,不含原创 2021-08-18 12:00:04 · 113 阅读 · 0 评论 -
WebAPI第四天学习总结—— 元素偏移量 offset 系列
元素偏移量 offset 系列offset 概述offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度)注意:返回的数值都不带单位offset 系列常用属性offset系列属性作用element.offsetParent返回作为该元素带有定位的父级元素。 如果父级都没有定位则返回bodyelement.offsetTop返回元素相对原创 2021-08-18 11:57:24 · 261 阅读 · 0 评论 -
WebAPI第三天学习总结—— location对象、navigator对象、history对象
location对象什么是 location 对象window 对象给我们提供了一个location 属性用于获取或设置窗体的 URL,并且可以用于解析 URL 。 因为这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象。URL统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。URL 的一般语法格式为:protocol://原创 2021-08-17 17:46:34 · 127 阅读 · 0 评论 -
WebAPI第三天学习总结—— JS执行机制
JS执行机制以下代码执行的结果是什么?<!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">原创 2021-08-17 17:44:28 · 123 阅读 · 0 评论 -
WebAPI第三天学习总结—— this指向问题
this指向问题this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象。现阶段,我们先了解一下几个this指向:全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)方法调用中谁调用this指向谁构造函数中this指向构造函数的实例示例代码:<!DOCTYPE html><html lang="en"><head>原创 2021-08-17 17:41:35 · 111 阅读 · 0 评论 -
WebAPI第三天学习总结—— 定时器
定时器(两种)window 对象给我们提供了 2 个非常好用的方法-定时器。setTimeout()setInterval()setTimeout() 炸弹定时器开启定时器语法:window.setTimeout(调用函数, [延迟的毫秒数]);setTimeout()这个调用函数我们也称为回调函数 callback注意:window 可以省略。这个调用函数可以直接写函数,或者写函数名或者采取字符串’函数名()'三种形式。第三种不推荐延迟的毫秒数省略默认是 0,如果写原创 2021-08-17 17:37:30 · 336 阅读 · 0 评论 -
WebAPI第三天学习总结—— Window对象的常见事件
Window对象的常见事件页面(窗口)加载事件(2种)window.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。第1种window.onload = function () {}// 或者window.addEventListener("load", function () {});注意:有了 window.onload 就可以把 JS 代码写到页面元素的上方,因为 onload 是等页面内容全部加原创 2021-08-17 17:34:14 · 72 阅读 · 0 评论 -
WebAPI第三天学习总结——BOM 浏览器对象模型
BOM 浏览器对象模型什么是BOMBOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分。DOM和BOM的区别DOM:文档对象模型DOM 就是把「文档」当做一个「对象」来看待DOM原创 2021-08-17 11:22:03 · 103 阅读 · 0 评论 -
WebAPI第二天学习总结—— 事件高级、常用鼠标事件、常用键盘事件
事件高级注册事件(2种方式)给元素添加事件,称为注册事件或者绑定事件注册事件有两种方式:传统注册方式和方法监听注册方式传统注册方式利用 on 开头的事件 onclick特点: 注册事件的唯一性同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数示例代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m原创 2021-08-16 17:15:47 · 144 阅读 · 0 评论 -
WebAPI第一天学习总结—— DOM、获取元素、事件基础、操作元素、节点操作
Web API介绍API的概念API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,无需理解其内部工作机制细节,只需直接调用使用即可。Web API的概念Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。现阶段我们主要针对于浏览器讲解常用的 API , 主要针对浏览器做交互效果。比如我们想要浏览器弹出一原创 2021-08-13 17:40:26 · 239 阅读 · 0 评论