随笔分类 - Web API
摘要：随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。 本地存储特性： ① 数据存储在用户浏览器中 ② 设置、读取方便、甚至页面刷新不丢失数据 ③ 容量较大，sessionStorage约5M、l
阅读全文
摘要：从下面5个方面介绍PC端的网页特效： 元素偏移量offset系列 元素可视区client系列 元素滚动scroll系列 动画函数封装 常见网页特效案例 1. 元素偏移量offset系列 offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得
阅读全文
摘要：轮播图也称为焦点图，是网页中比较常见的网页特效。 功能需求： 1. 鼠标经过轮播图模块，左右按钮显示，鼠标离开则隐藏左右按钮。 2. 点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。 3. 图片播放的同时，下面小圆圈模块跟随一起变化。 4. 点击小圆圈，可以播放相应图片。 5. 鼠标不经
阅读全文
摘要：实现功能： ① 鼠标经过某个小li，筋斗云跟着到当前小li的位置 ② 鼠标离开这个小li，筋斗云就复原为原来的位置 ③ 鼠标点击了某个小li，筋斗云就会留在点击这个小li的位置 具体实现思路如下： 利用动画函数做该动画效果 原先的筋斗云的起始位置是0 鼠标经过某个小li，就把当前小li的offset
阅读全文
摘要：这个案例功能是模仿京东的一个小功能，如下图所示： 鼠标移动到箭头时，问题反馈这个盒子从右边滑动出来，鼠标一离开，向左边滑动过去 <!-- CSS样式 --> <style> .sliderbar { position: fixed; right: 0; bottom: 100px; width: 4
阅读全文
摘要：1. 原先侧边栏是绝对定位（相对于body来定位） 2. 当页面滚动到一定位置时（header部分全部被卷去时），侧边栏改为固定定位 3. 页面继续滚动，会让“返回顶部”显示出来（滚动到main区域时，显示“返回顶部”） 需要用到页面滚动事件scroll，因为是页面滚动，所以事件源是document
阅读全文
摘要：整个案例可以分为三个功能模块： ① 鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开则隐藏遮挡层和大图片的盒子的功能：就是显示与隐藏。 ② 黄色的遮藏层要跟随鼠标移动的功能： 把鼠标坐标给遮挡层不合适，因为遮挡层是用定位方式设置的，所以它的坐标是以父盒子为准的 首先获得鼠标在盒子里的坐标 之后
阅读全文
摘要：下面是flexible.js的源码： // 立即执行函数 (function() {})() 或者 (function() {} ()) // 主要作用：创建一个独立的作用域，里面所有的变量都是局部变量，避免了命名冲突问题 // 立即执行函数不需要调用，立马能够自己执行 (function flex
阅读全文
摘要：实现功能：弹出框也称为模态框 ① 点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层，display: block; ② 点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层，display: none; ③ 鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动 ④ 鼠标松开，可以停
阅读全文
摘要：下面从以下7个方面介绍BOM： BOM概述 window对象的常见事件 定时器 JS执行机制 location对象 navigator对象 history对象 1. 什么是BOM？ BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其
阅读全文
摘要：主要实现的是数据在不同页面中的传递功能 ① 第一个登录页面，里面有提交表单，action提交到index.html页面 ② 第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果 ③ 第二个页面之所以可以使用第一个页面的数据，是利用了URL里面的location.search
阅读全文
摘要：<button>点击</button> <div></div> <script> var btn = document.querySelector('button'); var div = document.querySelector('div'); btn.addEventListener('cl
阅读全文
摘要：this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。 1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window） // 1. 全局作用域或者普通函数中this指向全
阅读全文
摘要：实现功能：点击按钮后，该按钮60秒内不能再次点击，防止重复发送短信 ① 按钮点击之后，会禁用按钮（disabled为true） ② 同时按钮里面的内容会有变化，注意button里面的内容通过innerHTML修改 ③ 里面秒数是有变化的，因此需要用到定时器 ④ 定义一个变量，在定时器里面，不断递减
阅读全文
摘要：① 这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval） ② 三个黑色盒子里面分别存放时分秒 ③ 三个盒子利用innerHTML放入计算的小时、分钟、秒数 ④ 问题：第一次执行也是间隔毫秒数，因此刚刷新页面会有空白 ⑤ 解决方法：最好采取封装函数的方式，这样可以先调用用一次这个
阅读全文
摘要：① 核心思路：5秒之后，就把这个广告隐藏起来 ② 用定时器setTimeout() <body> <img src="images/ad.jpg" alt="" class="ad"> <script> var ad = document.querySelector('.ad'); setTimeo
阅读全文
摘要：下面从这七个方面来介绍事件高级： 注册事件（绑定事件） 删除事件（解绑事件） DOM事件流 事件对象 阻止事件冒泡 常用的鼠标事件 常用的键盘事件 1. 注册事件（绑定事件） 给元素添加事件，称为注册事件或者绑定事件。 注册事件有两种方式：传统方式和方法监听注册方式。 传统注册方式： 利用on开头的
阅读全文
摘要：实现功能：当我们在文本框输入内容时，文本框上面自动显示大字号的内容 ① 快递单号输入内容时，上面的大号字体盒子（con）显示出来（这里面的字号更大） ② 表单检测用户输入：给表单添加键盘事件 ③ 同时把快递单号里面的值（value）获取过来赋值给con盒子（innerText）作为内容 ④ 如果快递
阅读全文
摘要：① 核心思路：检测用户是否按下了s键，如果按下了s键，就把光标定位到搜索框里面 ② 使用键盘事件对象里面的keyCode判断用户按下的是否是s键 ③ 搜索框获得焦点：使用js里面的focus() 方法 <body> <input type="text"> <script> var search =
阅读全文
摘要：① 鼠标不断的移动，使用鼠标移动事件：mousemove ② 在页面中移动，给document注册事件 ③ 图片要移动距离，而且不占位置，所以需要使用绝对定位 ④ 核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个 x 和 y 坐标作为图片的 top 和 left 值就可以移动图片 这个案例
阅读全文
浙公网安备 33010602011771号