摘要：
核心原理：通过定时器setlnterval()不断移动盒子位置 实现步骤： 1.获得盒子当前位置 2.让盒子在当前位置加上1个移动的距离 3.利用定时器不断重复这个操作 4.加上一个结束定时器的条件 5.注意此元素需要添加定位，才能使用element.style.left <body> <div>< 阅读全文
posted @ 2022-04-18 17:09
罗砂
阅读(50)
评论(0)
推荐(0)
摘要：
当鼠标移动到元素上时就会触发mouseenter事件 类似mouseover，他们两个之间的差别是 mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发 之所以这样，就是因为mouseenter不会冒泡 阅读全文
posted @ 2022-04-18 16:41
罗砂
阅读(76)
评论(0)
推荐(0)
摘要：
1.offset系列经常用于获得元素位置 offsetTop 2.clicent 经常用于获取元素大小 clicentWidth clientHeight 3.scroll经常用于获取滚动距离 scrollTop scrollLeft 4.注意：页面滚动的距离通过window.pageXOffset 阅读全文
posted @ 2022-04-18 16:22
罗砂
阅读(34)
评论(0)
推荐(0)
摘要：
scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素大小 滚动距离等。 <style> div { width: 100px; height: 70px; background-color: pink; border: 3px solid red; } </styl 阅读全文
posted @ 2022-04-18 15:46
罗砂
阅读(62)
评论(0)
推荐(0)
摘要：
<script> // 1.立刻执行函数：不需要调用 立马能够自己执行的函数 function fn() { console.log(1); } fn(); // 2.写法 也可以传递参数进来 // 1.(function(){})() 或者 2.(function(){}()) (function 阅读全文
posted @ 2022-04-18 15:09
罗砂
阅读(39)
评论(0)
推荐(0)
摘要：
client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。 通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 <style> div { width: 500px; height: 500px; background-color: aqu 阅读全文
posted @ 2022-04-18 14:51
罗砂
阅读(87)
评论(0)
推荐(0)
摘要：
当我们在电商网站上购买商品时，经常会看到这样一种效果，当我们把鼠标放到我们浏览的商品图片上时，会出现类似放大镜一样的一定区域的放大效果，方便消费者观察商品。今天我对这一技术，进行简单实现，实现图片放大镜效果。 我在代码中进行了代码编写的思路的说明和详细的代码注释，方便读者，请看代码： 1 <!doc 阅读全文
posted @ 2022-04-18 14:12
罗砂
阅读(69)
评论(0)
推荐(0)
摘要：
案例分析： 1，点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层。 2，点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。 3，鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。mousedown mousemove 4，鼠标松开，可以停止模态框移动 mouseup 5, 阅读全文
posted @ 2022-04-18 14:09
罗砂
阅读(110)
评论(0)
推荐(0)
摘要：
offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移)、大小等。 ●获得元素距离带有定位父元素的位置 ●获得元素自身的大小(宽度高度) ●注意:返回的数值都不带单位 <style> .father { width: 500px; height: 500px 阅读全文
posted @ 2022-04-18 13:41
罗砂
阅读(67)
评论(0)
推荐(0)
摘要：
<body> <button>点击我</button> </body> <script> // location对象方法; // location.assign() 跟href一样，可以跳转页面（也称为重定向页面） // location.replace() 替换当前页面，因为不记录历史，所以不能后 阅读全文
posted @ 2022-04-18 13:25
罗砂
阅读(168)
评论(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
罗砂
阅读(48)
评论(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
罗砂
阅读(33)
评论(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
罗砂
阅读(36)
评论(0)
推荐(0)
摘要：
同步 是一个一个执行的 异步 是很多个同时执行的 他们的区别就是执行顺序不同 阅读全文
posted @ 2022-04-18 13:21
罗砂
阅读(34)
评论(0)
推荐(0)
摘要：
清除定时器clearInterval： <body> <button class="kai">开启定时器</button> <button class="guan">关闭定时器</button> </body> <script> var begin = document.querySelector( 阅读全文
posted @ 2022-04-18 13:20
罗砂
阅读(191)
评论(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
罗砂
阅读(155)
评论(0)
推荐(0)
摘要：
以毫秒的计算 定时器setTimeout( ) <script> // 以毫秒的计算 定时器setTimeout( ) // 第一种方法 setTimeout(function () { console.log("三秒钟到了"); }, 3000); </script> <script> // 第二 阅读全文
posted @ 2022-04-18 13:11
罗砂
阅读(72)
评论(0)
推荐(0)
摘要：
window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数 注意 1.只要窗口大小发生像素变化，就会触发这个事件 2.我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度 <script> // window.onresize是调整窗口大小加载事 阅读全文
posted @ 2022-04-18 13:10
罗砂
阅读(179)
评论(0)
推荐(0)
摘要：
核心思路：监测用户是否按下s键，如果按下s键就把光标定位到搜索框里面 使用键盘事件对象里面的keyCode判断用户按下的是否是s键 搜索框获得焦点：使用js里面的focus()方法 <body> <input type="text" /> </body> <script> var search = 阅读全文
posted @ 2022-04-18 11:35
罗砂
阅读(123)
评论(0)
推荐(0)
摘要：
<script> document.addEventListener("keyup", function () { console.log("我弹起了"); }); // keypress按键按下的时候触发 不能识别功能键 比如ctr1 shift 左右箭头等 document.addEventLi 阅读全文
posted @ 2022-04-18 11:34
罗砂
阅读(46)
评论(0)
推荐(0)
摘要：
鼠标不断的移动，使用鼠标移动事件:mousemove 在页面中移动，给document注册事件 图片要移动距离，而且不占位置，我们使用绝对定位即可 核心原理∶每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的 top和left值就可以移动图片 <body> <img src="/i 阅读全文
posted @ 2022-04-18 11:33
罗砂
阅读(54)
评论(0)
推荐(0)
摘要：
<body> 这句话有自己的想法 </body> <script> // 1.禁止鼠标右键菜单 // contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认上下文菜单 document.addEventListener("contextmenu", function (e) { 阅读全文
posted @ 2022-04-18 11:32
罗砂
阅读(45)
评论(0)
推荐(0)
摘要：
<style> body { height: 3000px; } </style> </head> <body> <script> // 鼠标事件对象 MouseEvent document.addEventListener("click", function (e) { // 1.client 鼠 阅读全文
posted @ 2022-04-18 11:32
罗砂
阅读(161)
评论(0)
推荐(0)
摘要：
<script> // 常见事件对象的属性和方法 // 1.返回事件类型 var div = document.querySelector("div"); div.addEventListener("click", fn); div.addEventListener("mouseover", fn) 阅读全文
posted @ 2022-04-18 11:31
罗砂
阅读(76)
评论(0)
推荐(0)
摘要：
<body> <div>123</div> <ul> <li>abc</li> <li>abc</li> <li>abc</li> </ul> </body> <script> // 常见事件对象的属性和方法 // 1.e.target 返回的是触发事件的对象(元素) this返回的是绑定事件的对象 阅读全文
posted @ 2022-04-18 11:31
罗砂
阅读(69)
评论(0)
推荐(0)
摘要：
<style> ul { list-style: none; } li { width: 300px; } </style> </head> <body> <ul> <li>知否知否，点我应有弹窗在手</li> <li>知否知否，点我应有弹窗在手</li> <li>知否知否，点我应有弹窗在手</li 阅读全文
posted @ 2022-04-18 11:30
罗砂
阅读(283)
评论(0)
推荐(0)
摘要：
<body> <button>注册事件</button> </body> <script> let arr = "asdfdgd"; let aar = 0; for (let i = 0; i < arr.length; i++) { aar += arr[i]; } console.log(aa 阅读全文
posted @ 2022-04-18 11:29
罗砂
阅读(28)
评论(0)
推荐(0)
摘要：
<body onclick="alert('body')"> <!--html--> <div style="width: 400px; height: 400px; background: red" onclick="alert(this.style.background)" > <div id= 阅读全文
posted @ 2022-04-18 11:29
罗砂
阅读(39)
评论(0)
推荐(0)
摘要：
DOM重点核心-基础 获取元素有哪两种方法方法？ 1 利用DOM提供的方法获取元素。 document.getElementbyId(),document.getELmenntbyTagName() document,getElementsByClassName('') document.query 阅读全文
posted @ 2022-04-18 11:28
罗砂
阅读(46)
评论(0)
推荐(0)
摘要：
document.write(); element.innerHTML; document.createElement(); 区别 document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘 innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘 阅读全文
posted @ 2022-04-18 11:27
罗砂
阅读(34)
评论(0)
推荐(0)
摘要：
<style> * { padding: 0; margin: 0; } table { width: 500px; margin: 100px auto; border-collapse: collapse; /*边框合并模式*/ text-align: center; } td, th { bo 阅读全文
posted @ 2022-04-18 11:26
罗砂
阅读(99)
评论(0)
推荐(0)
摘要：
复制节点 node.cloneNode() node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点 <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> <script> let ul = docu 阅读全文
posted @ 2022-04-18 11:25
罗砂
阅读(67)
评论(0)
推荐(0)
摘要：
当我们把文本域里面的值赋值给li的时候，多添加一个删除的链接 需要把所有链接获取过来，当我们点击当前的链接的时候，删除当亲链接所在的li 阻止链接跳转需要添加JavaScript:void(0);或者JavaScript:; <body> <button>删除</button> <ul> <li>张 阅读全文
posted @ 2022-04-18 11:24
罗砂
阅读(62)
评论(0)
推荐(0)
摘要：
添加节点 1. node.appendChild(child) node.appendChild( ) 方法将一个节点添加到指定父节点列表末尾。类似于css里面的after <body> <ul> <li>123</li> </ul> </body> <script> // 1.创建节点元素节点 v 阅读全文
posted @ 2022-04-18 11:23
罗砂
阅读(94)
评论(0)
推荐(0)
摘要：
<style> ul { list-style: none; } ul li { background-color: pink; line-height: 40px; margin: 10px; width: 300px; } ul li a { color: red; float: right; 阅读全文
posted @ 2022-04-18 11:23
罗砂
阅读(99)
评论(0)
推荐(0)
摘要：
<body> <ul> <li id="top">微博</li> <li class="hide">私信</li> <li class="hide">评论</li> <li class="hide">@我</li> </ul> </body> <script> // 大概方法： // 1.获取元素 阅读全文
posted @ 2022-04-18 11:21
罗砂
阅读(77)
评论(0)
推荐(0)
摘要：
<body> <div>我是div</div> <span>我是span</span> </body> <script> var div = document.querySelector("div"); // 1.nextSibling 下一个兄弟节点 包含节点或者 文本节点等等 console.l 阅读全文
posted @ 2022-04-18 11:21
罗砂
阅读(74)
评论(0)
推荐(0)
摘要：
<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> <script> let ul = document.querySelector("ul"); // 2.children 实际开发的写法 阅读全文
posted @ 2022-04-18 11:20
罗砂
阅读(46)
评论(0)
推荐(0)
摘要：
parentNode.children(非标准); parentNode.children是一个只读属性，返回所有的子元素节点。 它只返回子元素节点，其余节点不返回(重点掌握) 虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用 DOM提供的获取 (API)获取 <b 阅读全文
posted @ 2022-04-18 11:19
罗砂
阅读(56)
评论(0)
推荐(0)
摘要：
<style> * { padding: 0; margin: 0; } .box { width: 500px; height: 200px; border: 1px solid #ccc; margin: 50px auto; overflow: hidden; } ul { width: 60 阅读全文
posted @ 2022-04-18 11:18
罗砂
阅读(38)
评论(0)
推荐(0)
摘要：
<body> <div class="box"> <span class="erweima">**</span> </div> </body> <script> // 1.父节点 parentNode let erweima = document.querySelector(".erweima"); 阅读全文
posted @ 2022-04-18 11:18
罗砂
阅读(55)
评论(0)
推荐(0)
摘要：
1.获取 属性值 element ?属性 获取属性值 element.getAttribute('属性') 区别： element.属性 获取内置属性值(元素本身自带属性) element.getAttribute('属性');主要获得自定义的属性(标准)我们程序员自定义的属性 <body> <di 阅读全文
posted @ 2022-04-18 11:17
罗砂
阅读(420)
评论(0)
推荐(0)
摘要：
<style> * { margin: 0; padding: 0; } table { width: 500px; position: relative; margin: 100px auto; border-collapse: collapse; border: 1px solid #d7d7d 阅读全文
posted @ 2022-04-18 11:16
罗砂
阅读(152)
评论(0)
推荐(0)
摘要：
<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> </body> <script> // 获取所有按钮元素 let btns 阅读全文
posted @ 2022-04-18 11:15
罗砂
阅读(42)
评论(0)
推荐(0)
摘要：
<style> * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } img { border: 0px; vertical-align: middle; width: 192px; } div { 阅读全文
posted @ 2022-04-18 11:15
罗砂
阅读(39)
评论(0)
推荐(0)
摘要：
<style> input { color: #777777; } </style> </head> <body> <input type="text" value="手机" /> </body> <script> let ipt = document.querySelector("input"); 阅读全文
posted @ 2022-04-18 11:14
罗砂
阅读(68)
评论(0)
推荐(0)
摘要：
<style type="text/css"> #box { width: 250px; margin: 100px auto; } #box li { width: 24px; height: 24px; float: left; margin: 10px; background-color: p 阅读全文
posted @ 2022-04-18 11:13
罗砂
阅读(43)
评论(0)
推荐(0)
摘要：
<style> div { width: 50px; height: 50px; background-color: aquamarine; } </style> </head> <body> <div>1</div> </body> <script> let dv = document.query 阅读全文
posted @ 2022-04-18 11:12
罗砂
阅读(25)
评论(0)
推荐(0)
摘要：
<style> #dv1 { width: 100px; height: 100px; background-color: rgb(232, 121, 217); } #dv2 { width: 10px; height: 10px; background-color: black; float: 阅读全文
posted @ 2022-04-18 11:12
罗砂
阅读(28)
评论(0)
推荐(0)
摘要：
<body> <button>按钮</button> <input type="text" value="输入内容" /> </body> <script> // 1.获取元素 var btn = document.querySelector("button"); var input = docum 阅读全文
posted @ 2022-04-18 11:11
罗砂
阅读(41)
评论(0)
推荐(0)
摘要：
<body> 密码：<input type="password" /> <button>眼睛</button> </body> <script> let ipt = document.querySelector("input"); let btn = document.querySelector(" 阅读全文
posted @ 2022-04-18 11:11
罗砂
阅读(105)
评论(0)
推荐(0)
摘要：
根据系统不同时间来判断，所以需要用到日期内置对象 利用多分支语句来设置不同的图片 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性 需要一个div元素，显示不同问候语，修改元素内容即可 <script> // 1.获取元素 let img = document.querySelect 阅读全文
posted @ 2022-04-18 11:10
罗砂
阅读(54)
评论(0)
推荐(0)
摘要：
点击图片body就变成图片 修改元素属性 src 1.获取元素 var one = document.getElementById("one"); var tu = document.getElementById("tu"); var img = document.querySelector("im 阅读全文
posted @ 2022-04-18 11:07
罗砂
阅读(39)
评论(0)
推荐(0)
摘要：
element.innerText 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉 element.innerHTML 起始位置到终点位置的全部内容。包括HTML标签，同时保留空格和换行 innerText和innerHTML的区别 1. innerText 不认识html 阅读全文
posted @ 2022-04-18 11:05
罗砂
阅读(90)
评论(0)
推荐(0)
摘要：
<style> div { width: 300px; height: 30px; line-height: 30px; color: #fff; background-color: pink; } </style> <body> <button id="btn">显示当前时间</button> < 阅读全文
posted @ 2022-04-18 11:02
罗砂
阅读(42)
评论(0)
推荐(0)
摘要：
1.获取事件源2.注册事件(绑定事件)3.添加事件处理程序(采用函数赋值形式) <script> var dianji = document.getElementById("dianji"); dianji.onclick = function () { console.log("我被选中了"); 阅读全文
posted @ 2022-04-18 11:01
罗砂
阅读(46)
评论(0)
推荐(0)
摘要：
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为 简单理解：触发 响应机制 网页中的每个元素都可以产生每个元素都可以生产某些元素可以触发JavaScript 的事件，例如，我们可以在用户点击某个按钮时产生一个事件，然后去执行某些操作 点击一个按钮，弹出对话 阅读全文
posted @ 2022-04-18 11:00
罗砂
阅读(450)
评论(0)
推荐(0)
摘要：
<body> <div class="box">盒子1</div> <div class="box">盒子2</div> <div id="nav"> <ul> <li>首页</li> <li>产品</li> </ul> </div> </body> <script> // 1.getElement 阅读全文
posted @ 2022-04-18 10:59
罗砂
阅读(61)
评论(0)
推荐(0)
摘要：
<script> // 1.获取body 元素 var body1 = document.body; console.log(body1); // 2.获取html元素 var html1 = document.html; //这样是不能获取到html元素的 console.log(html1); 阅读全文
posted @ 2022-04-18 10:59
罗砂
阅读(78)
评论(0)
推荐(0)
摘要：
<body> <ul> <li>知否知否0</li> <li>知否知否1</li> <li>知否知否2</li> <li>知否知否3</li> <li>知否知否4</li> <li>知否知否5</li> </ul> <ol id="ol1"> <li>张三1</li> <li>李四2</li> <l 阅读全文
posted @ 2022-04-18 10:58
罗砂
阅读(87)
评论(0)
推荐(0)
摘要：
1.因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面 2.get 获得element 元素by通过 驼峰命名法 3.参数 id是大小写敏感的字符串 4.返回的是一个元素对象 <script> var itmer = document.getElementById("t 阅读全文
posted @ 2022-04-18 10:57
罗砂
阅读(158)
评论(0)
推荐(0)
摘要：
什么是DOM 文档对象模型，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口 W#C已经定义一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构样式 DOM 树 文档：一个页面就是文档，DOM中使用document表示 元素：页面中的所有标签都是元素，DOM中使用e 阅读全文
posted @ 2022-04-18 10:56
罗砂
阅读(53)
评论(0)
推荐(0)
浙公网安备 33010602011771号