随笔分类 - BOM对象
摘要：<style> * { margin: 0; padding: 0; } div { width: 1200px; margin: 10px auto; } .header { margin-top: 10px; height: 100px; background-color: hsl(39, 87
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-e
阅读全文
摘要：核心原理：通过定时器setlnterval()不断移动盒子位置 实现步骤： 1.获得盒子当前位置 2.让盒子在当前位置加上1个移动的距离 3.利用定时器不断重复这个操作 4.加上一个结束定时器的条件 5.注意此元素需要添加定位，才能使用element.style.left <body> <div><
阅读全文
摘要：当鼠标移动到元素上时就会触发mouseenter事件 类似mouseover，他们两个之间的差别是 mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发 之所以这样，就是因为mouseenter不会冒泡
阅读全文
摘要：1.offset系列经常用于获得元素位置 offsetTop 2.clicent 经常用于获取元素大小 clicentWidth clientHeight 3.scroll经常用于获取滚动距离 scrollTop scrollLeft 4.注意：页面滚动的距离通过window.pageXOffset
阅读全文
摘要：scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素大小 滚动距离等。 <style> div { width: 100px; height: 70px; background-color: pink; border: 3px solid red; } </styl
阅读全文
摘要：<script> // 1.立刻执行函数：不需要调用 立马能够自己执行的函数 function fn() { console.log(1); } fn(); // 2.写法 也可以传递参数进来 // 1.(function(){})() 或者 2.(function(){}()) (function
阅读全文
摘要：client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。 通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 <style> div { width: 500px; height: 500px; background-color: aqu
阅读全文
摘要：当我们在电商网站上购买商品时，经常会看到这样一种效果，当我们把鼠标放到我们浏览的商品图片上时，会出现类似放大镜一样的一定区域的放大效果，方便消费者观察商品。今天我对这一技术，进行简单实现，实现图片放大镜效果。 我在代码中进行了代码编写的思路的说明和详细的代码注释，方便读者，请看代码： 1 <!doc
阅读全文
摘要：案例分析： 1，点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层。 2，点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。 3，鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。mousedown mousemove 4，鼠标松开，可以停止模态框移动 mouseup 5,
阅读全文
摘要：offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移)、大小等。 ●获得元素距离带有定位父元素的位置 ●获得元素自身的大小(宽度高度) ●注意:返回的数值都不带单位 <style> .father { width: 500px; height: 500px
阅读全文
摘要：<body> <button>点击我</button> </body> <script> // location对象方法; // location.assign() 跟href一样，可以跳转页面（也称为重定向页面） // location.replace() 替换当前页面，因为不记录历史，所以不能后
阅读全文
摘要：第一个页面 <body> <form action="11.5获取URL参数跨页面输入.html"> 用户名: <input type="text " name="uname" /> <input type="submit" value="登录" /> </form> </body> 第二个页面 <
阅读全文
摘要：<body> <button>跳转</button> <div></div> </body> <script> var btn = document.querySelector("button"); var div = document.querySelector("div"); btn.addEv
阅读全文
摘要：同步 是一个一个执行的 异步 是很多个同时执行的 他们的区别就是执行顺序不同
阅读全文
摘要：<body> <button>发送</button> </body> <script> var btn = document.querySelector("button"); var time = 3; //定义剩下的秒数 btn.addEventListener("click", function
阅读全文
摘要：清除定时器clearInterval： <body> <button class="kai">开启定时器</button> <button class="guan">关闭定时器</button> </body> <script> var begin = document.querySelector(
阅读全文
