第3步 - 配置Certbot 您拥有告诉Certbot如何使用Cloudflare的所有必要信息，但是让我们将其写入配置文件，以便Сertbot可以自动使用它。...首先运行不带任何参数的certbot命令来创建初始配置文件： sudo certbot 接下来在/etc/letsencrypt目录中创建一个包含CloudFlare电子邮件和API密钥的配置文件： sudo...第4步 - 获取证书 要获取证书，我们将使用该certbot命令并指定我们想要的插件，我们要使用的凭证文件以及我们应该用来处理请求的服务器。...从这里，您可以使用通配符证书配置服务器。您通常只需要其中两个文件：fullchain.pem和privkey.pem。 例如，您可以配置多个基于Web的服务： WWWW。...第5步 - 续订证书 让我们加密发布有效期为90天的短期证书。我们需要设置一个cron任务来检查即将到期的证书并自动更新它们。 让我们创建一个cron任务 ，每天运行续订检查。
第3步 - 配置Certbot 您拥有告诉Certbot如何使用Cloudflare的所有必要信息，但是让我们将其写入配置文件，以便Сertbot可以自动使用它。...首先运行不带任何参数的certbot命令来创建初始配置文件： sudo certbot 接下来在/etc/letsencrypt目录中创建一个包含CloudFlare电子邮件和API密钥的配置文件： sudo...从这里，您可以使用通配符证书配置服务器。您通常只需要其中两个文件：fullchain.pem和privkey.pem。 例如，您可以配置多个基于Web的服务： WWWW。...Tomcat8 如何在CentOS 7上通过Yum安装Apache Tomcat 7 如何在CentOS 7上通过Let's Encrypt 来加密Apache 现在让我们看看自动续订证书。...第5步 - 续订证书 让我们加密发布有效期为90天的短期证书。我们需要设置一个cron任务来检查即将到期的证书并自动更新它们。 让我们创建一个cron任务 ，每天运行续订检查。
# Screen Orientation API（页面方向） 我们可以通过以下代码来演示如何使用Screen Orientation API来控制页面的方向： // 获取屏幕方向对象 const orientation...'正在充电' : '未充电'; } 这个例子展示了如何使用Web Battery API来获取电池的状态信息，并在页面上显示当前电量和电池状态。...在这个例子中，我们使用了navigator.getBattery()方法来获取电池信息，并使用battery.addEventListener()方法来监听电池信息变化。...我们还使用了 getEntriesByName() 方法来检索资源的网络时间信息。...# Intersection Observer API（元素监听） 以下是一个示例，演示了如何使用 Intersection Observer API 在元素进入视口时进行检测： <!
hide(document.querySelectorAll('img')) 2.如何检查元素是否具有指定的类？...页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。...el.classList.contains(className) // 事例 hasClass(document.querySelector('p.special'), 'special') // true 3.如何切换一个元素的类...类 toggleClass(document.querySelector('p.special'), 'special') 4.如何检查父元素是否包含子元素？...2秒计时器 19.如何获取当前页面的滚动位置？
通过使用此模块，只需将鼠标悬停在浏览器中，即可快速查看DOM元素的属性。基本上它是一个即时检查器。 ? 将鼠标悬停在 DOM 元素上会显示其属性！...将 div 插入到文档的正文中，并在正文上启用鼠标事件侦听器。从目标元素中检索属性，将其简化为单个字符串，最后在工具提示中显示。...用例 帮助解决UI错误 确保你所应用的 DOM 元素能够按预期工作（比如点击获得正确的类，等等） 了解一个 Web 应用的结构 你可以从这段代码中学到什么 如何使用 Vanilla JS 实现工具提示模块...如何解析 DOM 对象的属性 如何找到鼠标 X 和 Y 的位置 如何获取文档的滚动位置 了解不同浏览器的行为方式 —— Edge vs....也许你不希望将其作为 IIFE 来实现，或者是去显示其他数据。
; padding-left: 20px; display: none; cursor: pointer; } js我使用了构造函数进行封装...那么该如何解决这个问题呢？...event.target event.target可以指出当前鼠标所指的元素，我们可以利用这一点写一个函数： function findIndex(target,list){...=zicaidan.length) throw '父类菜单和子类菜单长度不匹配'; //检索与父菜单索引相同子菜单 function findIndex...=zicaidan.length) throw '父类菜单和子类菜单长度不匹配'; //设置菜单样式 function addStyle(a){
现在，来看看我在开发中最常用的 5 个自定义钩子，并头开始重新创建它们，这样你就能够真正理解它们的工作方式，并确切地了解如何使用它们来提高生产率和加快开发过程。...一旦 Promise 被解决，我们就通过解析响应体来检索数据。为此，我们使用json()方法。 然后，我们只需要将它存储在一个React state 变量中。...我们只需要传递我们想要检索的资源的URL。从那里，我们得到一个对象，我们可以使用它来渲染我们的应用程序。 import useFetch from '....使用这个数组通过匹配媒体查询来获得相应的值。...handler)); }, [getValue, mediaQueryList]); return value; }; export default useMediaQuery; 我最近使用的一个简单的例子是添加一个媒体查询来检查设备是否允许用户悬停在元素上
您可以根据需要自己创建这些元素，把它们放置在地图区域内或者区域外均可。调用工具类的open和close可控制工具的开启和关闭。...拉框放大工具 一些工具类提供了可修改的配置参数，您可参考API文档来修改它们以便符合您的要求。 本示例为区域缩放工具添加提示文字。...本地搜索 BMap.LocalSearch提供本地搜索服务，在使用本地搜索时需要为其设置一个检索区域，检索区域可以是BMap.Map对象、BMap.Point对象或者是省市名称（比如："北京市"）的字符串...BMap.RenderOptions类提供了若干控制呈现的属性，其中map指定了结果所展现的地图实例，panel指定了结果列表的容器元素。 下面这个示例展示了在北京市检索天安门。...当回调函数被执行时，您可以使用BMap.LocalSearch.getStatus()方法来确认搜索是否成功或者得到错误的详细信息。
HTML canvas标签是一个HTML元素，它提供了一个空白的绘图表面，可以使用JavaScript来渲染图形、形状和图像。...您可以指定所需的宽度和高度属性来定义画布的尺寸。 在 元素下面，您可以添加任何其他的HTML元素，以便在您的绘图应用程序中使用，比如按钮、颜色选择器或工具栏。...以下是如何使用JavaScript来改进绘图应用程序的示例： const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext...当您点击“保存”按钮时，它会触发一个函数，该函数使用 toDataURL() 来检索画布的数据URL。...如何以不同格式保存绘图 该方法支持不同的图像格式，如PNG、JPEG和GIF。您可以通过修改所需文件的类型（例如JPEG格式的'image/jpeg'）来更改格式。
在本教程中，我们将介绍如何使用 HTML、CSS 和 JavaScript 创建功能齐全的待办事项应用程序。...代表任务的每个 li 元素都有一个作为数据属性值添加的唯一 id ( data-id = ${taskId})：这将允许我们在编辑或删除任务时检索 id。...由于所有删除按钮都具有相同的类，因此我们使用该querySelectorAll属性来选择所有按钮。...如果没有找到元素，则返回-1 如果taskIndex不是-1，我们使用该taskIndex值来获取当前任务，代码如下allTasks[taskIndex].task const newTask = prompt...将删除线 CSS 类添加到当前 li 元素的范围 使用该findIndex()方法从数组中获取当前任务的索引allTasks，然后将按钮的状态更新为选中。
作者：Terrence Lu https://juejin.cn/post/6906398702269628424 这篇文章基于实际使用场景总结了24个ES6代码片段，可用来解决项目中遇到的一系列问题...2、如何确认元素是否具有指定的类？...el.classList.contains(className); // Example hasClass(document.querySelector("p.special"), "special"); // true 3、如何切换元素的类...4、如何获取当前页面的滚动位置？...formToObject(document.querySelector("#form")); // { email: "test@email.com", name: "Test Name" } 13、如何从对象检索给定选择器指示的一组属性
madza.hashnode.dev/24-modern-es6-code-snippets-to-solve-practical-js-problems 作者 | Madza 译者 | 王强 策划 | 李俊辰 这篇文章基于实际使用场景总结了...2、如何确认元素是否具有指定的类？...el.classList.contains(className); // Example hasClass(document.querySelector("p.special"), "special"); // true 3、如何切换元素的类...4、如何获取当前页面的滚动位置？...formToObject(document.querySelector("#form")); // { email: "test@email.com", name: "Test Name" } 13、如何从对象检索给定选择器指示的一组属性
这篇文章基于实际使用场景总结了 24 个 ES6 代码段，可用来解决项目中可能遇到的一系列问题。 1、如何隐藏所有指定元素？...元素 2、 如何确认元素是否具有指定的类？...className); // Example hasClass(document.querySelector('p.special'), 'special'); // true 3、 如何切换元素的类...4、如何获取当前页面的滚动位置？...formToObject(document.querySelector('#form')); // { email: 'test@email.com', name: 'Test Name' } 13、 如何从对象中检索给定选择器指示的一组属性
可以实现拖动元素 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY 移动端拖动的原理： 手指移动中，计算出手指移动的距离。...属性 classList属性是HTML5新增的一个属性，返回元素的类名。...案例分析 小圆点跟随变化效果 把ol里面li带有current类名的选出来去掉类名 remove 让当前索引号的小li 加上 current add 但是，是等着过渡结束之后变化，所以这个写到 transitionend...这个时候我们可以使用插件方式来制作。 我们可以通过 JS 修改元素的大小、颜色、位置等样式。 1.6. 移动端常用开发框架 1.6.1....移动端视频插件 zy.media.js 框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。
本文章将介绍，如何制作一个简单的视频播放器。用少量关键的代码来实现视频播放器核心功能。 点击这个链接，在线预览最终视频播放器 https://nplayer.js.org/ 。...它的格式为 #t=[start_time][,end_time]，需要确保服务器支持 Range Requests。 track track 元素使用 WebVTT 格式来显示字幕。...kind 定义 text track 应该如何使用。...返回视频的宽高（width/height 属性可能被 css 影响） video 元素上还有 readyState 属性，表示视频当前的状态，它的值 0 到 4 的数字，video 上有相关描述的常量属性...mode 属性控制显示哪个 textTrack，通过 ::cue 伪类设置字幕样式，但是如果要更精准的控制字幕，我们就需要自己使用 DOM 元素来显示字幕。
JavaScript事件处理程序的最新功能是事件监听。事件监听监视元素上的事件。...一、addEventListener()方法 addEventListener()方法将事件处理程序附加到指定的元素。 可以重写随机颜色，如下所示： 例： <!...将事件监听添加到元素 将所有代码放入addEventListener()方法中的匿名函数中是非常合适的，如下所示： let para = document.querySelector(...当前，事件监听是处理JavaScript中事件的最常见和首选方式。...三、总结 本文基于JavaScript基础，介绍了如何进行JavaScript事件监听 ，从最基本的语法开始，如何将事件监听添加到元素，如何进行参数传递，如何添加到Window对象等等，都做了详细的讲解
事件流 源头 在早期的浏览器厂商都认为页面中的元素事件都不仅仅是当前元素上，而是相关的其他元素甚至整个页面都应该相关的机制。...事件处理对象 html事件处理函数 这一类在我们原生开发的时候很常见，直接用标签的事件属性绑定函数，在vue的框架写法中也是类似的写法，至于其底层是html事件处理还是下面的dom0级，后面我会在查看对应的源码...，给大家分析下vue的@click 底层是是如何处理事件的。...其中，处理函数中的this指的是当前元素对象。...通过addEventListener添加的函数只能通过removeEnentListener来移除，这意味着如果你添加的是匿名函数，是无法移除的，因为匿名函数没有对应的名称和指引找到，在移除具名函数的时候
touch相关的事件跟普通的其他dom事件一样使用，可以直接用addEventListener来监听和处理。...如何用户的手指从触屏设备的边缘移出了触屏设备，也会触发 touchend 事件。 touchend 事件的 target 也是与 touchstart 的 target 一致，即使已经移出了元素。...touchcancel 事件，则应该把游戏当前状态相关的一些数据保存起来。 3. 触摸事件对象 TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。...都是基于原生的touchstart、touchmove、touchend事件，封装成不同的手势类型自定义事件。...注意：zepto并没有阻止click事件，所以使用zepto的tap事件依然会导致点击穿透问题，你需要手动添加 e.preventDefault() 来阻止click事件。
，且页面上的链接可以被查询；none：文件将不被检索，且页面上的链接不可以被查询；index：文件将被检索；follow：页面上的链接可以被查询；noindex：文件将不被检索；nofollow：页面上的链接不可以被查询...U3 内核，但好像还是基于 Webkit 和 Trident ，还有说是基于火狐内核。...直播传送：直播本质上是使用流媒体进行传送，CDN也是支持流媒体传送的，所以直播完全可以使用CDN来提高访问速度。...我了解的预加载的最常用的方式是使用 js 中的 image 对象，通过为 image 对象来设置 scr 属性，来实现图片的预加载。事件是什么？事件模型？...这种事件模型，事件绑定的函数是addEventListener，其中第三个参数可以指定事件是否在捕获阶段执行。如何优化动画？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
