摘要: 核心原理:通过定时器setlnterval()不断移动盒子位置 实现步骤: 1.获得盒子当前位置 2.让盒子在当前位置加上1个移动的距离 3.利用定时器不断重复这个操作 4.加上一个结束定时器的条件 5.注意此元素需要添加定位,才能使用element.style.left <body> <div>< 阅读全文
posted @ 2022-04-18 17:09 罗砂 阅读(45) 评论(0) 推荐(0)
摘要: 当鼠标移动到元素上时就会触发mouseenter事件 类似mouseover,他们两个之间的差别是 mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter只会经过自身盒子触发 之所以这样,就是因为mouseenter不会冒泡 阅读全文
posted @ 2022-04-18 16:41 罗砂 阅读(70) 评论(0) 推荐(0)
摘要: 1.offset系列经常用于获得元素位置 offsetTop 2.clicent 经常用于获取元素大小 clicentWidth clientHeight 3.scroll经常用于获取滚动距离 scrollTop scrollLeft 4.注意:页面滚动的距离通过window.pageXOffset 阅读全文
posted @ 2022-04-18 16:22 罗砂 阅读(27) 评论(0) 推荐(0)
摘要: scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素大小 滚动距离等。 <style> div { width: 100px; height: 70px; background-color: pink; border: 3px solid red; } </styl 阅读全文
posted @ 2022-04-18 15:46 罗砂 阅读(55) 评论(0) 推荐(0)
摘要: <script> // 1.立刻执行函数:不需要调用 立马能够自己执行的函数 function fn() { console.log(1); } fn(); // 2.写法 也可以传递参数进来 // 1.(function(){})() 或者 2.(function(){}()) (function 阅读全文
posted @ 2022-04-18 15:09 罗砂 阅读(33) 评论(0) 推荐(0)
摘要: client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。 通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 <style> div { width: 500px; height: 500px; background-color: aqu 阅读全文
posted @ 2022-04-18 14:51 罗砂 阅读(82) 评论(0) 推荐(0)
摘要: 当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品。今天我对这一技术,进行简单实现,实现图片放大镜效果。 我在代码中进行了代码编写的思路的说明和详细的代码注释,方便读者,请看代码: 1 <!doc 阅读全文
posted @ 2022-04-18 14:12 罗砂 阅读(62) 评论(0) 推荐(0)
摘要: 案例分析: 1,点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层。 2,点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。 3,鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。mousedown mousemove 4,鼠标松开,可以停止模态框移动 mouseup 5, 阅读全文
posted @ 2022-04-18 14:09 罗砂 阅读(101) 评论(0) 推荐(0)
摘要: offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 ●获得元素距离带有定位父元素的位置 ●获得元素自身的大小(宽度高度) ●注意:返回的数值都不带单位 <style> .father { width: 500px; height: 500px 阅读全文
posted @ 2022-04-18 13:41 罗砂 阅读(63) 评论(0) 推荐(0)
摘要: <body> <button>点击我</button> </body> <script> // location对象方法; // location.assign() 跟href一样,可以跳转页面(也称为重定向页面) // location.replace() 替换当前页面,因为不记录历史,所以不能后 阅读全文
posted @ 2022-04-18 13:25 罗砂 阅读(167) 评论(0) 推荐(0)
摘要: 第一个页面 <body> <form action="11.5获取URL参数跨页面输入.html"> 用户名: <input type="text " name="uname" /> <input type="submit" value="登录" /> </form> </body> 第二个页面 < 阅读全文
posted @ 2022-04-18 13:24 罗砂 阅读(46) 评论(0) 推荐(0)
摘要: <body> <button>跳转</button> <div></div> </body> <script> var btn = document.querySelector("button"); var div = document.querySelector("div"); btn.addEv 阅读全文
posted @ 2022-04-18 13:22 罗砂 阅读(29) 评论(0) 推荐(0)
摘要: 同步 是一个一个执行的 异步 是很多个同时执行的 他们的区别就是执行顺序不同 阅读全文
posted @ 2022-04-18 13:21 罗砂 阅读(32) 评论(0) 推荐(0)
摘要: <body> <button>发送</button> </body> <script> var btn = document.querySelector("button"); var time = 3; //定义剩下的秒数 btn.addEventListener("click", function 阅读全文
posted @ 2022-04-18 13:21 罗砂 阅读(35) 评论(0) 推荐(0)
摘要: 清除定时器clearInterval: <body> <button class="kai">开启定时器</button> <button class="guan">关闭定时器</button> </body> <script> var begin = document.querySelector( 阅读全文
posted @ 2022-04-18 13:20 罗砂 阅读(188) 评论(0) 推荐(0)
摘要: <style> div { width: 400px; height: 200px; background-color: cornsilk; } span { float: left; margin-right: 10px; background-color: black; width: 50px; 阅读全文
posted @ 2022-04-18 13:19 罗砂 阅读(143) 评论(0) 推荐(0)
摘要: 以毫秒的计算 定时器setTimeout( ) <script> // 以毫秒的计算 定时器setTimeout( ) // 第一种方法 setTimeout(function () { console.log("三秒钟到了"); }, 3000); </script> <script> // 第二 阅读全文
posted @ 2022-04-18 13:11 罗砂 阅读(66) 评论(0) 推荐(0)
摘要: window.onresize是调整窗口大小加载事件,当触发时就调用的处理函数 注意 1.只要窗口大小发生像素变化,就会触发这个事件 2.我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度 <script> // window.onresize是调整窗口大小加载事 阅读全文
posted @ 2022-04-18 13:10 罗砂 阅读(171) 评论(0) 推荐(0)
摘要: 核心思路:监测用户是否按下s键,如果按下s键就把光标定位到搜索框里面 使用键盘事件对象里面的keyCode判断用户按下的是否是s键 搜索框获得焦点:使用js里面的focus()方法 <body> <input type="text" /> </body> <script> var search = 阅读全文
posted @ 2022-04-18 11:35 罗砂 阅读(116) 评论(0) 推荐(0)
摘要: <script> document.addEventListener("keyup", function () { console.log("我弹起了"); }); // keypress按键按下的时候触发 不能识别功能键 比如ctr1 shift 左右箭头等 document.addEventLi 阅读全文
posted @ 2022-04-18 11:34 罗砂 阅读(44) 评论(0) 推荐(0)