Web APIs
曾吹雨
这个人很不懒,什么都想写~~
展开
-
原生js制作PC端轮播图
功能分析1.鼠标经过离开轮播图左右按钮显示隐藏2.点击左侧按钮图片向左播放一张,右边同理3.拖欠播放同时,下面的小圆圈也跟着变化4.点击小圆圈,播放相应的图片5.鼠标不经过轮播图,轮播图自动播放6.鼠标经过轮播图,自动播放停止HTML标签的结构及css样式 <div class="box"> <!-- 左侧按钮 --> <a href="javascript:;" class="arrow-l"> &原创 2020-07-30 20:27:26 · 297 阅读 · 0 评论 -
制作封装缓动画函数
利用JavaScript制作轮播图先封装好一个缓动画函数该函数可以有三个输入,分别是目标对象obj、目标距离target以及回调函数callback每次调用时停止定时器防止因为开启太多定时器导致速度越来越快缓动画的核心算法就是(target - obj.offsetLeft)/ 10注意将步长改成整数,否则会出现动画长度不准确问题代码如下 function animate(obj,target,callback) { // 先清除以前的定时器 cl原创 2020-07-27 15:27:56 · 135 阅读 · 0 评论 -
JavaScript实现秒杀倒计时效果(附源码)
正文整体效果如图HTML结构如下:<div class="box"> <span class="hour">1</span> : <span class="minute">2</span> : <span class="second">3</span> </div>大盒子装着三个小盒子,小盒子1、2、3依次为时、分原创 2020-08-02 09:48:58 · 6793 阅读 · 6 评论 -
DOM之操作元素(附实例)
目录改变元素内容常用元素的属性操作表单元素的属性操作样式属性操作4.1 ele.style 行内样式操作4.2 ele.className 类名样式操作4.3 排他思想自定义属性的操作5.1 获取属性值5.2 设置属性值5.3 移除属性值H5自定义属性正文JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容,属性等。注意以下都是属性1. 改变元素内容element.innerText从起始位置到终止位置的内容,原创 2020-08-02 16:30:53 · 243 阅读 · 0 评论 -
DOM之节点操作总结(附实例、图解)
目录获取元素的两种方式节点的概述节点层级3.1 父级节点3.2 父子节点3.3 兄弟节点创建节点删除节点复制节点(克隆节点)三种创建元素的区别正文1. 获取元素的两种方式(1)利用DOM提供的方法获取元素document.getElementById()document.getElementsByTagName()document.querSelector等逻辑性不强、繁琐(2)利用节点层级关系获取元素利用父子兄弟节点关系获取元素逻辑性强,但兼容性差2.原创 2020-08-02 21:46:24 · 2616 阅读 · 0 评论 -
元素偏移量offset系列(附实例)
offset概述offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移),大小等。获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度)注意:返回数值都不带单位offset系列常用属性:element.offsetparent返回作为该元素带有定位的父级元素,如果父级元素没有定位则返回bodyelement.offsetTop返回元素相对带有定位父级元素上方的偏移element.offsetLeft返回元素相对带有相.原创 2020-08-04 17:00:43 · 657 阅读 · 0 评论 -
DOM的重点核心总结
目录创建增删改查属性操作事件操作正文1. 创建document.writeinnerHTMLcreateElement2. 增appendChildinsertBefore// 3.添加节点 node.insertBefore(child,指定元素);var lili = document.createElement('li');ul.insertBefore(lili,ul.children[0]);3. 删removeChild4. 改主要原创 2020-08-02 22:19:14 · 188 阅读 · 0 评论 -
事件mousseenter和mouseover的区别
鼠标移动到元素上时就会触发mouseenter事件类似mouseover,它们两者之间的差别是mouseover鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter只会经过自身盒子触发之所以这样,是因为mouseenter不会冒泡跟mouseenter搭配的鼠标离开事件mouseleave同样不会冒泡...原创 2020-08-04 17:30:45 · 136 阅读 · 0 评论 -
DOM之事件高级(附实例、图解)
目录注册事件(绑定事件)1.1 注册事件概述1.2 addEventListener 事件监听方式1.3 attachEvent 事件监听方式 (不建议使用,非标准)1.4 注册事件兼容性解决办法删除事件(解绑事件)DOM事件流事件对象4.1 什么是事件对象4.2 事件对象的使用用法4.3 事件对象的兼容性问题4.4 事件对象常用的属性和方法4.5 阻止事件冒泡4.6 事件委托(代理、委派)4.7 常用的鼠标事件4.8 鼠标事件对象4.9 常用的键盘事件正文1.原创 2020-08-03 15:10:15 · 341 阅读 · 0 评论 -
元素滚动scroll系列(附实例、图解)
元素滚动scroll系列属性scroll翻译过来就是滚动,我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。属性详解element.scrollTop返回被卷去的上侧距离,返回数值不带单位element.scrollLeft返回被卷去的左侧距离,返回数值不带单位element.scrollWidth返回自身实际宽度,不含边框,返回数值不带单位element.scrollHeight返回自身实际高度,不含边框,返回数值不带单位页面被卷去的头.原创 2020-08-04 17:20:15 · 2815 阅读 · 0 评论 -
bom本地储存(附实例)
本地储存随着互联网的快速发展,基于网页的应用越来越普遍,同时也变得越来越复杂,为了满足各种各样的需求,会经常性的在本地存储大量的数据,HTML5规范提出了相关解决方案本地存储的特性数据存储在用户浏览器中设置、读取方便、甚至页面花心不丢失数据容量较大,sessionStorage约5M、localStorage约20M只能存储字符串,可以将对象JSON.stringify()编码后储存1.window.sessionStorage生命周期为关闭浏览器窗口在同一窗口(页面)下数据可以共享原创 2020-08-04 20:47:55 · 344 阅读 · 0 评论 -
DOM学习之获取元素及事件基础(附实例、源码)
目录DOM树获取元素2.1 根据ID对象2.2 根据标签名获取2.3 通过H5新增的方法获取(不考虑兼容用这个最好)2.4 获取特殊的元素事件基础3.1 事件概述3.2 事件三要素3.3 事件执行的步骤正文DOM文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可拓展标记语言(HTML或者XML)的标准编程接口DOM树文档:一个页面就是一个文档,DOM中使用document表示元素:页面中所有的标签都是元素,DOM中使用原创 2020-08-02 15:27:06 · 404 阅读 · 0 评论 -
元素可视区client系列(附实例)
client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息,通过client的相关属性可以动态获得该元素的边框、大小等。element.clientTop返回元素上边框的大小element.clientLeft返回元素左边框的大小element.clientWidth返回自身包括padding、内容区的宽度、不含边框,返回数值不带单位。element.clientHeight返回自身包括padding、内容区的高度、不含边框,返回数值不带单位原创 2020-08-04 17:11:04 · 337 阅读 · 0 评论 -
BOM知识点全面总结(附实例、图解)
目录BOM概述window对象的常见事件2.1 窗口加载事件2.2 调整窗口大小事件定时器3.1 两种定时器3.2 setTimeout()定时器3.3 停止setTimeout()定时器3.4 setInerval()定时器3.5 停止setInerval(0定时器3.6 thisjs执行机制4.1 js执行机制4.2 同步跟异步4.3 js执行机制location对象5.1 什么是location对象5.2 URL5.3 location对象的属性5.4 loc原创 2020-08-04 16:04:43 · 3768 阅读 · 0 评论 -
Web APIs概念详解(附图解)
目录JavaScript的组成js跟Web APIs的区别API和Web API3.1 API3.2 Web API3.3 API跟Web API总结正文JavaScript的组成js跟Web APIs的区别js基础:掌握基础语法,做不了页面交互效果Web APIs阶段:js的应用,大量使用js基础阶段的内容API和Web API3.1 APIAPI(Application Programming Interface, 应用程序编程接口)是一些预先定义的函数原创 2020-08-02 14:27:31 · 640 阅读 · 0 评论