offsetLeft值跟offsetTop值跟父级元素没关系，而是跟其上一级的定位元素(除position:static外的所有定位如fixed,relative,absolute元素)有关系。...若上一级定位元素都没有除position:staice外的定位，则这个偏移量是相对于body而言的。 需要理清移动端事件对象的几个属性，⏬ ?...生成PDF文档 html2canvas是一款将HTML代码转换成Canvas的插件，因此需要用一个div包裹住需要打印的内容区域，获得这个dom节点。...否则当页面内容只有一页的时候没有问题，但是若页面内容有很多页的时候，就会出现生成的图片只有一小部分有内容的现象。...PDF文档页数较少的情况 可以在开发测试的时候预先在将要分页的地方插入一个padding，就是提前预留分页位置 PDF文档页数较多 对于这种情况，笔者尝试遍历要打印的dom节点的子节点，将每一页所能打印的
); 说明： （1）第一个接收到事件的对象是 window（有人会说body，有人会说html，这都是错误的）。...事件冒泡 事件冒泡: 当一个元素上的事件被触发的时候（比如说鼠标点击了一个按钮），同样的事件将会在那个元素的所有祖先元素中被触发。...冒泡顺序： 一般的浏览器: （除IE6.0之外的浏览器） div -> body -> html -> document -> window IE6.0： div -> body -> html ->...说明 onclick 事件是可以冒泡的 } 阻止冒泡 大部分情况下，冒泡都是有益的。当然，如果你想阻止冒泡，也是可以的。可以按下面的方法阻止冒泡。...的偏移量（相对于整个页面） // 注意，如果想通过 style.left 来设置属性，一定要给 box1 开启绝对定位。
DOM 将文档解析为一个由节点和对象（包含属性和方法的对象） 组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。...里面添加p的内容 p.appendChild(word);//在界面的p标签最后加上新的p标签 DOM的事件：也就是点击某一个内容触发事件 为 元素添加点击事件。...当用户点击按钮时，在 id="demo" 的 元素上输出 "Hello World" : document.getElementById("myBtn").addEventListener("click...location.pathname返回当前页面的路径和文件名 location.protocol 返回所使用的web协议（http://或者https://) kk返回（当前页面的整个URL) window.history...history.go(-1)上一页，history.go(-2)上两页
它的实现与上面的 Broadcast Channel 非常类似，我们来看一看实际的代码： div class="g-container" id="j-main"> /...上面，为了方便演示，每次传输数据时，只传输动画需要的数据。而实际应用，我们可以需要细化整个传输数据，设定合理的协议。...譬如这个： 多标签页数据同步：当用户在一个标签页上进行了操作，希望其他标签页上的数据也能实时更新时，可以使用跨 Tab 通信来实现数据同步，保持用户在不同标签页上看到的数据一致性。...跨标签页通知：在某些场景下，需要向用户发送通知或提醒，即使用户不在当前标签页上也能及时收到。通过跨 Tab 通信，可以实现跨页面的消息传递，向用户发送通知或提醒。...，则打开一个新的播放详情页。
它的实现与上面的 Broadcast Channel 非常类似，我们来看一看实际的代码： div class="g-container" id="j-main"> /...上面，为了方便演示，每次传输数据时，只传输动画需要的数据。而实际应用，我们可以需要细化整个传输数据，设定合理的协议。...跨标签页通知：在某些场景下，需要向用户发送通知或提醒，即使用户不在当前标签页上也能及时收到。通过跨 Tab 通信，可以实现跨页面的消息传递，向用户发送通知或提醒。...，则打开一个新的播放详情页。...但是，如果页面已经存在一个音乐播放详情页，则不会打开新的音乐播放详情页，而是直接使用已经存在的播放详情页面； 系统有与列表页与内容页，在内容页点击已阅，如果用户同时打开了上级列表页，要取消列表页关于该内容页的未读的提示
我使用的方法可能较为被动，如果百度MP3一些规则一旦改动，下面的代码就跑不起来了（在保持现在规则不变的情况下，看上去还是很完美的） ?...，请求资源时它会请求当前根目录下的crossdomain.xml文件，不符合规则将报安全沙箱错误） 下面测试一下，到底下面的方法得到的真实的URL是否正确： ?...： if (/div(?...获取音乐列表的请求页的字符--网页源代码>： ? 请求网络音乐的真实URL时，网页内有一个javascript解码函数： ?...除nginx外，其它源码(html、css、flash)都将上传打包。不一定非得用nginx，你也可以使用apache，只是我的开发环境中经常用。 ↓下载示例
innerHeight 返回窗口的网页显示区域高度 open（） 格式：[url,name,features,replace] 参数 说明 url 打开指定页面的 url，如果没有则打开空白页 name...它允许运行在浏览器中的代码访问文档节点并与之交互，了解并掌握 DOM 操 作是 Web 开发中的必经之路 DOM结构及节点 整个 HTML 的结构都可以由类似上图的树结构表示，整个树结构由节点组成...节点 说明 文档节点(document对象) 代表整个文档节点 元素节点(element对象) 代表一个元素(标签) 文本节点(text对象) 代表元素(标签)中的文本 属性节点(attribute对象...) 代表一个属性，元素(标签)才有属性 注释节点(comment对象) 注释 document对象指代整个文档节点，他是文档内其他节点的访问入口，提供操作其他节点的方法 节点的分类：元素节点、...父节点拥有子节点，同级的子节点被称为同胞（兄弟或姐妹） 常用节点获取方法和属性 要进行 DOM 操作，首先要获取到需要操作的节点或节点集合，接下来以下面的示例代码为基础，介绍常用的 DOM 获取方法和属性
('click',function(){ alert(5); }); 每一个节点对象都提供了 addEventListener 方法，这个方法可以给选中的节点添加指定类型的事件及事件处理程序...addEventListener方法的参数完全一致， 而且必须在同一个元素节点，否则无效。...动态绑定，其事件处理程序内部的this指向了当前正在操作的dom对象。 需求：同一个元素的同一个事件，绑定多个处理函数： 的 this 指向的选中的对象； 第三种：addEventListener方法可以针对同一个元素的同一个事件，添加多个监听处理函数。..., CapsLock 外任意键被按住.
主要有两种方法：基于哈希路由、基于history 1.哈希路由 #后面的内容是网页位置标识符，一般是锚点或id属性div id='xx'>。...这对于ajax应用程序特别有用，可以用不同的#值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。但是IE 6和IE 7不会有历史记录。#后面的内容不会提交到服务器。...而我们也知道a标签有一个href属性，如果是哈希路由就不会引发页面的刷新。所以平时也有一种常规操作，返回顶部，就是a标签的href=“#”，就是直接跳转到页面顶部。...如果我们给dom一个id，#就跳转到那个dom的位置。 对于前端路由，我们有一个事件可以利用的，onhashchange，监听哈希的变化然后执行相应的回调函数。...> div> 这是第三页 动态改变组件，模拟类似于前端路由的效果
________('div#container') 答案：querySelector “div#container”属于CSS选择器字符串，且id名不可重复，选择的只能是一个元素，所以需要获取指定选择器或选择器组匹配的第一个节点...() { alert('已点击'); } 答案：click addEventListener方法第一个参数为事件名称，此处应为对应的点击事件名称。...七、窗口事件 常用鼠标事件： 名称 描述 load 当整个页面及所有依赖资源（如样式表和图片）都已完成加载时，将触发load事件 beforeunload window、document 和它们的资源即将卸载时触发...八、BOM window 对象 1. window对象： 名称 描述 open() 打开一个新浏览器窗口 open(url, name, features, replace) url: 打开指定页面的...（相对于当前位置） innerWidth 返回窗口的网页显示区域宽度 innerHeight 返回窗口的网页显示区域高度 url: 打开指定页面的url，如果没有则打开空白页 name: 指定
如果公司内有好几个域名想共用一个统一登录，除了中转页跳转外，还有一种就是当前页弹窗。如何不同域传登录数据就是本文可以了解到的了。 很多情况下，我们受到浏览器的安全策略限制。...通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为 https），端口号（443 为 https 的默认值），以及主机 (两个页面的模数 Document.domain 设置为相同的值...window.postMessage() 方法时调用页面的当前状态；4.source 属性记录调用 window.postMessage() 方法的窗口信息。...caniuse 通过上面的图片，我们可以看出来，几乎所有的浏览器都支持了 postMessage，所以放心大胆的去使用吧。...如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的 targetOrigin，而不是 *。 需要注意：不提供确切的目标将导致数据泄露到恶意站点。
("innerDiv"); outerDiv.addEventListener("click", function() { alert("外部DIV被点击"); });...window：代表浏览器窗口，是 BOM 的顶级对象。 navigator：提供浏览器的信息，如用户代理、是否在线等。 location：提供当前页面的 URL 信息，允许操作页面的地址。...以下是 JavaScript 对 BOM 的详细操作介绍： window 对象 window 是 BOM 的核心对象，表示整个浏览器窗口。...常用方法 history.back()：跳转到历史记录中的上一页（相当于浏览器的“后退”按钮）。 history.forward()：跳转到历史记录中的下一页（相当于浏览器的“前进”按钮）。...示例： // 后退到上一页 history.back(); // 前进到下一页 history.forward(); // 跳转到历史记录中的第 2 页 history.go(2); screen
2、 hash模式 URL的hash属性是一个可读可写的字符串，该字符串是URL的锚部分(即#后面的部分)。...'#'是用来指导浏览器动作的，对服务器完全无用，其值的改变不会导致浏览器发起http请求，也不会引起页面的重载。...但每次hash值的改变，都会在浏览器的访问历史栈里增加一个记录，使用'后退'键便能返回上一个位置。在H5的history模式出现之前，hash是前端路由的实现方式。...核心功能的简单实现： 首先要实现一个router对象来管理页面的回调， class HashRouter{ constructor(routeArr = [...在H5之前其实存在history接口了，但只是用于页面的跳转，比如： history.go(-1); // 后退一页history.go(2); // 前进两页history.forward
html5的video已经出来很久了。在ios上使用基本上没什么毛病，但是安卓下就是一个重灾区了，各种体验差。这几天搞了安卓的兼容，简直是要吐血。所以特意总结了一些强势的坑点。.../ 是否暂停 video.ended // 是否结束 video.autoPlay // 是否自动播放 loadstart // 客户端开始请求数据 error // 请求数据时遇到错误（可以通过上一页的属性...> div> vi.addEventListener('playing',function(){ $('.guide').hide(); }) 全屏播放 若页面中没有其他内容，只是播放一个视频的话...那么问题来了，如果页面上不只有视频，还有其他内容呢，例如视频是在一个弹出层中。这样设置的话，页面原有内容会有一个1s左右的非常明显拉伸过程，这个拉伸过程就是为全屏播放视频做准备的。...诡异的坑 安卓下，若是摇一摇在弹出层播放视频，若弹出层中有外链，点击了跳转，再返回，这个时候 video 会有一个诡异的bug，具体表现为返回后第一次能正常触发，第二次之后触发都直接播到视频最后一帧，设置
在慕课网上看到的课程，webapp图片滑动组件 ，讲师mark,讲的非常好，跟着老师的代码自己抄写了一遍，也算增加些印象 <!...body{ height:100%; margin: 0; padding: 0; background: #333; overflow: hidden; } /* 隐藏画布外的内容...-- 外层画布 --> div id="canvas"> div> //所有的数据 var list =...不能省略 if(item){ if(item.height/item.width>this.radio){ //根据图片的长宽比来创建li里面的图片 li.innerHTML...//留在本页 self.go('0'); } } }; outer.addEventListener('touchstart',startHander); outer.addEventListener
序 目前MoePlayer/cPlayer 可以达到想要的效果。 做法 在需要的位置用 ，然后其余都放在底部Script里。...DIV ID要和Script的element: document.getElementById(‘app’)中相互对应 div id="app">div> ### Script下 ### <...}, ##第二首歌 { ... }, ...... ] }) 完成 本文标题：如何给网页添加好看的HTML...https://blog.withkr.xyz/2020/04/23/2020-04-23-Web-HTML-Music-Player/ 版权声明：本博客所有文章除特别声明外...clearTimeout(loadTwikooTimeout); }, 1000); } else { window.addEventListener
滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条 div::-webkit-scrollbar-track 滚动条的轨道（里面装有 Thumb div::-webkit-scrollbar-button...边角，即两个滚动条的交汇处 div::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件注意此方案有兼容性问题，一般需要隐藏滚动条时我都是用一个色块通过定位盖上去，或者将子级元素调大...9.前端工程化 一提到前端工程化很多人想到的都是 webpack，这是不对的，webpack 仅仅是前端工程化中的一环。在整个工程化过程中他帮我们解决了绝大多数的问题，但并没有解决所有问题。...近些年被广泛的关注和探讨，究其原因主要是因为现代化前端应用功能要求不断提高，业务逻辑日益复杂，作为当下互联网时代唯一不可或缺的技术，前端可以说是占据了整个开发行业的半壁江山。...Object.defineProperty 只能监听到属性的读写，而 Proxy 除读写外还可以监听属性的删除，方法的调用等。
编写网页 首先我们需要编写一个网页。...Web3.providers.HttpProvider("http://127.0.0.1:7545")); App.init(); }); 前面的篇幅中，我们提到过 web3模块是以太坊提供的工具包...从上面的代码中，我们可以看到，通过Hello合约的ABI文件获取到合约对象之后，再配合web3工具，就可以与Hello合约进行通信了。...至此，一个简单的Dapp应用示例就此完成了。我们也熟练掌握了通过truffle开发框架编写合约代码、快速编译部署、构建Dapp的整个过程。...invite_code=1fbblhhti09y1 本站文章除注明转载外，均为本站原创 欢迎任何形式的转载，但请务必注明出处，尊重他人劳动 转载请注明：文章转载自
LRU 算法实现代码如下:// 一个Map对象在迭代时会根据对象中元素的插入顺序来进行// 新添加的元素会被插入到map的末尾，整个栈倒序查看class LRUCache { constructor...冒泡和捕获是事件流在DOM中两种不同的传播方法事件流有三个阶段事件捕获阶段处于目标阶段事件冒泡阶段事件捕获事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播...() console.log('冒泡')},false);// 点击 node 只会执行上面的函数，该函数不会执行node.addEventListener('click',(event) =>...它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。...把用户信息存到Vuex然后再存储到LocalStroage中,然后跳转到下一个页面，根据后端接口的要求，只要不登录就不能访问的页面需要在前端每次跳转页面师判断Cookies中是否有token，没有就跳转到登录页
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
实时音视频
