随笔分类 -  js BOM

网页轮播图（功能最全）
摘要：布局： slider > ul > li slider > arrow > a> img arrow : z-index:2 ; 注意，ul 里面放着所有轮播图的图片，所以 ul 的宽度必须足够大能够容纳所有图片，这里有4张图片，ul宽度设置为 600% 功能需求： 1，鼠标经过轮播图模块，左右按钮 阅读全文
posted @ 2019-09-12 22:27 shanlu 阅读(7593) 评论(0) 推荐(0)
js 元素offset,client , scroll 三大系列总结
摘要：1，element.offsetWidth : 包括 padding 和 边框 2，element.clientWidth : 包括 padding ，不包含边框 ， 内容超出会溢出盒子的时候，就用scrollWidth 3，element.scrollWidth : 不包含边框 主要用法： 1，o 阅读全文
posted @ 2019-09-11 15:09 shanlu 阅读(294) 评论(0) 推荐(0)
仿淘宝固定侧边栏
摘要：案例分析： 1，原先侧边栏是绝对定位 2，当页面滚动到一定位置（这里是滚动到 banner 到达页面顶部的时候），侧边栏改为固定定位 3，页面继续滚动，会让 “ 返回顶部 ” 显示出来 （滚动到 main 到达页面顶部的时候） 4，需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是do 阅读全文
posted @ 2019-09-11 14:58 shanlu 阅读(1084) 评论(0) 推荐(0)
立即执行函数
摘要：立即执行函数： 1，不需要调用，立马能够自己执行的函数 2，写法 (function() { } ( )) 或者 (function () { } ) ( ) 3, 立即执行函数最大的作用就是 独立创建了一个作用域，里面所有的变量都是局部变量，不会有 命名冲突的情况 阅读全文
posted @ 2019-09-10 21:40 shanlu 阅读(188) 评论(0) 推荐(0)
拖动的模态框
摘要：案例分析： 1，点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层。 2，点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。 3，鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。mousedown mousemove 4，鼠标松开，可以停止模态框移动 mouseup 5, 阅读全文
posted @ 2019-09-10 19:28 shanlu 阅读(1522) 评论(0) 推荐(1)
navigator对象
摘要：navigator对象包含有关浏览器的信息, 它有很多属性 , 我们最常用的是 userAgent ,该属性可以返回由客户机发送服务器的 user-agent 头部的值 下面前端代码可以判断用户哪个终端打开页面,实现跳转 阅读全文
posted @ 2019-09-08 21:30 shanlu 阅读(185) 评论(0) 推荐(0)
获取URL参数
摘要：案例分析: ①第一个登陆页面,里面有提交表单, action提交到 index.html页面 ②第二个页面, 可以使用第一个页面的参数, 这样实现了一个数据不同页面之间的传递效果 ③第二个页面之所以可以使用第一个页面的数据, 是利用了URL里面的 location.search 参数 ④在第二个页面 阅读全文
posted @ 2019-09-08 21:04 shanlu 阅读(416) 评论(0) 推荐(0)
location对象
摘要：1，什么是location对象 window对象给我们提供了一个 location属性用于获取或设置窗体的URL，并且可以用于解析 URL，因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。 2，URL 统一资源定位符，是互联网上标准资源的地址，互联网上的每个文件都有一 阅读全文
posted @ 2019-09-08 20:44 shanlu 阅读(348) 评论(0) 推荐(0)
js执行机制
摘要：1，js 是单线程 javsscript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事，这是因为 javascript 这门脚本语言诞生的使命所致 javascript 是为处理页面中用户的交互，以及操作DOM而诞生的，比如我们对某个DOM 元素进行添加和删除操作，不能同时进行，应该先进 阅读全文
posted @ 2019-09-08 20:31 shanlu 阅读(989) 评论(0) 推荐(0)
倒计时发送短信案例
摘要：案例分析： ①按钮点击之后，会禁用按钮 disabled=true; ②同时按钮里面的内容会变化，注意button 里面的内容是通过 innerHTML修改 ③里面秒数是变化的，因此需要用到定时器 ④定义一个变量，在定时器里面，不断递减 ⑤如果变量为0，说明到了时间，需要停止定时器，并且复原按钮初始 阅读全文
posted @ 2019-09-08 18:05 shanlu 阅读(365) 评论(0) 推荐(0)
倒计时效果
摘要：1,案例分析： ①这个倒计时是不断变化的，因此需要定时器来自动变化(setInterval) ②三个黑色盒子里面分别存放 时分秒 ③ 三个黑色盒子利用 innerHTML 放入计算的 小时分钟秒数 ④ 第一次执行也是间隔毫秒数，因此刷新页面会有空白，最后采取封装函数的方式，这样可以先调用一次这个函数 阅读全文
posted @ 2019-09-08 17:04 shanlu 阅读(302) 评论(0) 推荐(0)
setInterval 定时器
摘要：setInterval()定时器 1,setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数 2，第一次执行也是间隔毫秒之后执行，之后每隔毫秒数就执行一次。 3，setTimeout 延时时间到了，就去调用这个回调函数，只调用一次就结束了这个定时器 setInterval 阅读全文
posted @ 2019-09-08 16:38 shanlu 阅读(241) 评论(0) 推荐(0)
setTimeout定时器
摘要：1,setTimeout()方法用户设置一个定时器，该定时器在时间到后执行调用函数 如上，2秒之后，控制台就会就会打印出“时间到了”；这个window在调用的时候可以省略 2，这个调用函数可以直接写函数，或者写函数名，或者采取字符串 ’函数名() ' 三种形式，第三种不推荐 3，延迟的毫秒数默认是0 阅读全文
posted @ 2019-09-08 16:32 shanlu 阅读(1077) 评论(0) 推荐(0)
调整窗口大小事件
摘要：1,window.onresize 时调整窗口大小加载事件，当触发时就调用的处理<!DOCTYPE html> 下面，当窗口大小改变时，控制台就会输出窗口的宽度，并打印出 “ 变化了”。 window.innerWidth 当前屏幕的宽度 2,我们经常利用这个事件完成响应式布局 比如，当前屏幕宽度小 阅读全文
posted @ 2019-09-08 16:19 shanlu 阅读(778) 评论(0) 推荐(0)
window常见事件onload
摘要：1, window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，css文件等），就调用的处理函数 下面的代码，当点击按钮，并不会弹出对话框，因为页面还没有加载到按钮元素，无法执行 js 点击事件 处理办法是： 2，window.onload传统注册事 阅读全文
posted @ 2019-09-08 16:07 shanlu 阅读(6263) 评论(0) 推荐(0)
放大镜案例
摘要：案例分析： 1，整个案例可以分为三个功能模块 2，鼠标经过小图片盒子，黄色的遮挡层 和 大图片盒子显示，鼠标离开，两个盒子隐藏 3，黄色的遮挡层跟随鼠标功能 4，移动黄色遮挡层，大图片跟随移动功能 关键代码： ①布局： 把big 定位在demo 里面，demo 里面放一个 small（和demo一样 阅读全文
posted @ 2019-07-25 14:47 shanlu 阅读(236) 评论(0) 推荐(0)