前端
文章平均质量分 56
子燕若水
子燕若水
展开
-
vw 和 vh 单位
These units allow you to specify sizes in terms of percentages of the viewport width and viewport height. See also the test page with a meta viewport.The allowed units are:Here are some examples. means 50% of the viewport width.Don’t forget to resize your原创 2022-10-05 11:36:55 · 597 阅读 · 0 评论 -
聊聊 pointer events
但是如今,有很多新的设备,比如智能手机,平板电脑,他们包含了其他的输入方式,比如触摸,手写笔,官方也为这些输入形式都提供了新的事件。但是对于开发者来说,这是件很麻烦的事,因为这意味着你需要为你的网页适配各种事件,比如你要根据用户的移动来画图,你需要兼容 PC 和手机,你的代码可能就会是下面这样。pressure:接触的压力值,范围是0-1,对于不支持压力的硬件,比如鼠标,按压时该值必须为 0.5,否则为 0。等等,还提供了一些用于其他输入设备的属性,比如压力,接触面,倾斜角度等等,这样开发者就可以利用。..转载 2022-08-26 18:32:43 · 964 阅读 · 0 评论 -
js 中 load和DOMContentLoaded事件区别
在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。它与 DOMContentLoaded 不同,后者只要页面 DOM 加载完成就触发,无需等待依赖资源的加载。当初始的 HTML 文档被完全加载和解析完成之后,**DOMContentLoaded **事件被触发,而无需等待样式表、图像和子框架的完全加载。DOMContentLoaded 事件。该事件不可取消,也不会冒泡。...原创 2022-08-26 09:33:51 · 253 阅读 · 0 评论 -
Window.innerHeight
接口的只读innerHeight属性 Window返回窗口的内部高度(以像素为单位),包括水平滚动条的高度(如果存在)。值innerHeight取自窗口 布局视口的高度。可以使用该 innerWidth属性获得宽度。一个整数值,指示窗口的布局视口高度(以像素为单位)。该属性是只读的,没有默认值。...原创 2022-08-25 23:43:46 · 4945 阅读 · 0 评论 -
JavaScript call 函数是个啥?
指的是函数的“所有者”或它所属的对象。javascript中的所有函数都被视为对象方法。所以我们可以使用'call()'将一个函数绑定到一个特定的对象。如果函数不被视为 JavaScript 对象的方法,则该函数将是全局对象。是一个预定义的javascript方法,用于为不同的对象编写方法。它调用该方法,将所有者对象作为参数。它调用并返回一个以所有者对象为参数的方法。原创 2022-08-21 20:12:06 · 241 阅读 · 0 评论 -
getElementsByClassName 修改className 失败了?
The return value from is a live node list. That it's "live" means that it changes automatically when the DOM changes.Your loop is removing the class "active" from the elements of the list. As soon as that happens, element by element, each element vanishes转载 2022-06-08 12:48:29 · 318 阅读 · 0 评论 -
Window.localStorage
简介该localStorages是window的只读属性window,允许您访问Storage对象,存取跨浏览器会话的数据。localStorage与 类似sessionStorage,只是localStorage数据没有过期时间,sessionStorage当页面会话结束时,即页面关闭时,数据会被清除。值一个Storage可以用来访问当前源的本地存储空间的对象。异常SecurityError该请求违反了策略决定,或者源不是有效的方案/主机/端口元组(..原创 2022-01-09 10:58:03 · 2610 阅读 · 0 评论 -
SVG 图标和sketch 模版免费网站
在您开始制作您自己的 SVG 图标之前,您应该先看看http://iconmonstr.comIconmonstr.com 有越来越多的 SVG 图标集合,您可以免费下载和使用!当我第一次发现 Iconmonstr.com 时,该集合包含大约 1.100 个图标。在撰写本教程时,Iconmonstr.com 包含 2.800 多个图标。...原创 2021-12-29 22:02:38 · 389 阅读 · 0 评论 -
SVG使用CSS层叠样式表
英文链接:SVG and CSS - Cascading Style Sheets可以使用 CSS 设置 SVG 形状的样式。造型是为了改变形状的外观。这可以是笔触颜色和宽度、填充颜色、不透明度和形状的许多其他属性。有 6 种方法可以为 SVG 图像中的形状设置样式。每一个都将在本文中介绍。在本文的末尾,您将找到可用于 SVG 的 CSS 属性列表。本文假设您熟悉 CSS。如果你不是,我也有一个CSS 教程,它解释了 HTML 上下文中的 CSS(也使用了 CSS)。SVG 元素的 CS翻译 2021-12-26 13:03:01 · 1081 阅读 · 0 评论 -
svg Path 命令详解
原文链接SVG path elementThis tutorial explains how to draw advanced paths (lines, arcs and curves) in your SVG diagrams with the SVG path element.http://tutorials.jenkov.com/svg/path-element.htmlPath CommandsBelow is a list of possible pen commands for t原创 2021-12-25 22:48:39 · 698 阅读 · 0 评论 -
ES6 里面的 Promise
一、概念所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。APromise 有三种状态:pending: initial state, neither fulfilled nor rejected. fulfilled: meaning that the operation was ...原创 2021-12-23 12:28:04 · 304 阅读 · 0 评论 -
async/await实现同步
async/await的作用就是使异步操作以同步的方式去执行异步操作同步化?可以使用Promise中的then()来实现,那么async/await与它之间有什么区别呢1.async函数返回的是一个Promise对象如果一个函数加了async关键词,这个函数又有返回值,在调用这个函数时,如果函数执行成功,内部会调用Promise.solve()方法返回一个Promise对象,如果函数执行出现异常,就会调用Promise.reject()方法返回一个promise 对象要想获取到async原创 2021-12-21 21:16:15 · 4580 阅读 · 0 评论 -
Error [ERR_INSPECTOR_ALREADY_ACTIVATED]解决方案
已成功进入断点,效果如下:解决方案:原创 2021-12-21 19:14:48 · 2595 阅读 · 0 评论 -
node npm 更新到最新(Ubuntu系统)
注意下面每行前要加sudoFirst update npm,npm install -g npm stableThen update node,npm install -g node or npm install -g ncheck after version installation,node --version or node -v原创 2021-12-21 18:50:13 · 1545 阅读 · 0 评论 -
Cannot find module ‘https-proxy-agent‘
成功解决:Cannot find module 'https-proxy-agent'解决之后:解决方案:原创 2021-12-21 18:42:33 · 2076 阅读 · 0 评论 -
如何设置锚点?
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>基础教程(nhooo.com),锚点设置</title></head><body> <a href="#bottom" name="top">去底部</a> <div style="height: 5000px; width: 300.转载 2021-12-21 18:20:55 · 3108 阅读 · 0 评论 -
用Markdown记笔记后转换成html
富文本编辑器用起来太累了,书写过程还要主要各种调格式、样式。作为一个软件专业且经常记笔记的人,使用编辑器的要求就是:不需要多么丰富的富文本格式 需要目录结构清晰 有代码片段高亮显示 可以进行版本控制 写起来要快Markdown编辑器,语法简单,书写时不需要考虑样式,只关心内容。写完md文件后,用Markdown软件 parse、渲染即可得到样式简洁、格式清晰的展示效果。发布的web网站md文件对于浏览器来说就是普通的文本,浏览器并不能解析Markdown语法,如果想把md文原创 2021-12-21 14:05:11 · 424 阅读 · 0 评论 -
CKEditor、UEditor富文本编辑器原理(CSDN编辑器原理)
CKEditor 4 是什么CKEditor 4 是一个在线 WYSIWYG 编辑器,用于在浏览器中编辑 HTML 文档(或其片段)。其中,在“在线”意味着CKEditor4works in a web browser(如Firefox,Chrome浏览器,Internet Explorer或Safari)。The“WYSIWYG”part means that when you use CKEditor 4, you canstyle the text and add rich...原创 2021-12-21 11:52:22 · 534 阅读 · 0 评论 -
0框架前端-如何写垂侧边栏(Vertical Tabs)
垂直Tabs主要用于单页应用展示不同子主题。要实现上图的效果,代码设计构思如下:左边tabs明显是一组垂直布局的buttons,可以用div或a实现每个button,外边套一个 flex div实现buttons的垂直布局;右边看上去是一个Paris content(div实现),实际上是三个content,另两个London content和Tokyo content只是在当前的状态下被隐藏了;点击左边三个按钮所关联的事件正是对右边content的显示或隐藏。...原创 2021-12-20 17:28:14 · 417 阅读 · 0 评论 -
防盗链及图片加密系统
开发用途目前EFV高级版有多种防盗系统,图片/封面的加密,基于hls的双重加密,时间戳防盗+请求次数限制,方便开发人员对接自己的系统。基于hls的双重加密该系统参考保利威视的防盗链策略,通过修改hls.js文件来达到自己的解密逻辑,做到双向对称加密和解密,然后将加密和解密的逻辑都通过JS混淆加密的方式保护。采用和保利威视类似的魔改HLS.JS版,实现了绑定域名调用,和EFV后台对称加密和解密,防盗链防下载防合并防破解并且绑定指定域名调用等功能。一、通过魔改HLS.JS的方式,实现了自己的..原创 2021-12-19 20:59:51 · 2691 阅读 · 0 评论 -
SVG 坐标和 viewBox
SVG用viewBox设置任意大小的绘图区域。SVG 图形的视口由 viewBox 属性以及 svg 标签中的宽度和高度属性指定。如果不指定 width和height,SVG 元素会占用可用的空间(就像 HTML 元素一样)。如果没有给出测量单位,则显示系统的单位适用 - 像素适用于显示器上的浏览器。<svg 宽度 = "1000" 高度 = "500"> ...</svg>SVG宽度和高度也可以 - 类似于 CSS - 以 em、ex、pt、c...原创 2021-12-12 19:43:02 · 989 阅读 · 0 评论 -
div内文本(text)居中对齐
.drop_list_item { height: 24px; line-height: 24px; width: 80px; background-color: aliceblue; cursor: pointer; text-align: center; }注: height , line-hei...原创 2021-12-11 10:12:01 · 1621 阅读 · 0 评论 -
关于css中“点“,“井号“,“逗号“,“空格“,“冒号“的用法
详解css中"点","井号","逗号","空格","冒号"的用法_三级小野怪的专栏-CSDN博客body{ font-family:Arial,sans-serif; color:#333333; line-height:1.166; margin:0px; padding:0px;}#masthead{ margin:0; padding:10px 0px; border-botton:https://blog.csdn.net/zhengzhb/article/details/7241642里面提到原创 2021-12-09 19:38:34 · 4787 阅读 · 0 评论 -
0框架前端-如何写一个下拉菜单(Dropdowns)
实现效果:可以发现这个待实现效果,是我们之前实现的button下面加了一个button list而已,点击上面的Click Me按钮,这个button list要toggleable显示和隐藏。之后再通过一个div wrap这两个组件为一个组件即可。button list 可以是一组竖着的<div> list ,也可以是一组竖着的<a>。简单起见,我们选<a> list用<div> 来包住,display选flex以方便布局。.原创 2021-12-09 12:26:38 · 748 阅读 · 1 评论 -
0框架前端-如何写一个按钮(button)
0框架前端的理念:杜绝前端复杂化,回归html,js,css这三个前端的本源.原创 2021-12-09 10:35:47 · 2924 阅读 · 0 评论 -
html js 处理元素的数据属性(data)
HTML5的设计考虑了可扩展性,用于与特定元素相关联的数据。data-*属性允许我们在标准的、语义的 HTML 元素上存储额外的信息,而无需其他黑科技.HTML 语法语法很简单。属性名称以任何元素开头的任何属性data-都是数据属性。假设您有一篇文章,并且想要存储一些没有任何视觉展示的额外信息。只需使用data属性:<article id="electric-cars" data-columns="3" data-index-number="12314" data-.原创 2021-12-08 20:36:34 · 623 阅读 · 0 评论 -
html中的svg,symbol和use标签
<svg>Thesvgelement is a container that defines a new coordinate system andviewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.svg 元素是一个容器,它定义了一个新的坐标系和视口。...原创 2021-12-08 18:35:55 · 10335 阅读 · 0 评论 -
js实现网页中元素缩放(zoom vs scale)
You might be able to use the CSSzoomproperty - supported in IE 5.5+, Opera, and Safari 4, and ChromeCan I use: css Zoomdocument.body.style.zoom = 2原创 2021-12-08 12:04:33 · 8505 阅读 · 0 评论 -
js各种for循环及性能比较
使用:afor-ofloop (ES2015+ only;spec|MDN) - simple andasync-friendly for (const element of theArray) { // ...use `element`...} forEach(ES5+ only;spec|MDN) (or its relativessomeand such) -notasync-friendly (but see details) theAr...原创 2021-12-08 11:41:16 · 1075 阅读 · 0 评论 -
js事件的冒泡(bubble)机制说明
Thebubblesread-only property of theEventinterface indicates whether the event bubbles up through the DOM tree or not.bubble是事件的一个重要属性,如果为true则事件在某一子结点产生后,会一直向上穿透,直到dom树的根结点.例子:<!DOCTYPE html><html><body><p id="myP" onmou...原创 2021-12-07 21:52:26 · 950 阅读 · 0 评论 -
js代码检测html中某元素是否可以滑动
const isScrollable = function (ele) { // Compare the height to see if the element has scrollable content const hasScrollableContent = ele.scrollHeight > ele.clientHeight; // It's not enough because the element's `overflow-y` style can be .原创 2021-12-04 12:14:49 · 355 阅读 · 0 评论 -
关于iframe或document监听滑动(scroll)失败的问题
出现了这个问题我们总是把时间花在分析为什么iframe这个element不能滑动?该怎么设置?其实iframe监听滑动如果出了问题,首先该分析的是里面的document到底能不能滑动.--------------------------------------------------------------------------------------------------------------------------iframe监听滑动本身其实很简单,只需要iframe的contentW原创 2021-12-04 11:41:34 · 2721 阅读 · 0 评论 -
如何用搜索引擎搜js css源码例子
iframe scroll site:codepen.io原创 2021-12-03 18:21:29 · 353 阅读 · 0 评论 -
js滑动操作之-pageYOffset,scrollTop,offsetHeight,scrollHeight
读取1)window.pageYOffset==window.scrollYit returns the number of pixels the document is currently scrolled along the vertical axis2)letscrollElm=leta reference to theElementthat scrolls the document. In standards mode, this is the root elem...原创 2021-12-03 13:44:23 · 1219 阅读 · 0 评论 -
js addEventListener 鼠标事件类型汇总
Event Name Fired When auxclick A pointing device button (ANY non-primary button) has been pressed and released on an element. click (en-US) 在元素上按下并释放任意鼠标按键。 contextmenu (en-US) 右键点击(在右键菜单显示前触发)。 dblclick (en-US) 在元素上双击鼠标按钮。 mousedo原创 2021-12-02 21:33:02 · 6911 阅读 · 0 评论 -
html中id和name的异同
解释:API:The getElementsByName() method returns a collection of all elements in the document with the specified name (thevalueof the name attribute), as anHTMLCollectionobject.TheHTMLCollectionobject represents a collection of nodes. The nodes...原创 2021-12-02 18:48:16 · 123 阅读 · 0 评论 -
YAML快速入门教程(附带YAML、JSON互相转换程序)
原文转载自:(保存到这里mark一下)YAML 入门教程 | 菜鸟教程YAML 是 'YAML Ain't a Markup Language'(YAML 不是一种标记语言)的递归缩写。在开发的这种语言时,YAML 的意思其实是:'Yet Another Markup Language'(仍是一种标记语言)。 YAML 的语法和其他高级语言类似,并且可以简单表达清单、散列表,标量等数据形态。它使用空白符号缩进和大量依赖外观的特色,特别适合用来表达或编辑数..https://www.runoob.com/原创 2021-11-07 18:30:08 · 1094 阅读 · 0 评论 -
Github Pages + jekyll 全面介绍极简搭建个人网站和博客
作者: scott.cgiy原文链接:Github Pages + jekyll 全面介绍极简搭建个人网站和博客 - 知乎本文,将会全面介绍一下如何使用Github Pages + jekyll搭建个人站点。所谓 极简的意思,就是不用使用git和本地构建jekll服务,直接在Github网站上编辑设置即可,但会涉及到jekll的一些配置和编程控制。可以参看我…https://zhuanlan.zhihu.com/p/51240503本文,将会全面介绍一下如何使用Github Pages + j.转载 2021-11-06 22:46:18 · 634 阅读 · 0 评论 -
前端构建工具gulpjs的使用介绍及技巧
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快。如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧。本文导航:gulp的安装 开始使用gulp gulp的API介绍 一些常用的gulp插件1、gulp的安装首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp:new..转载 2021-10-26 19:02:10 · 225 阅读 · 0 评论 -
用nodejs框架Ghost快速搭建自己的网站
搭建前提:Before getting started, you’ll need these global packages to be installed:Asupported versionofNode.js- Ideally installed vianvm Yarn- to manage all the packagesThen install these global packagesyarn global add knex-migrator ember-cli...转载 2021-10-26 13:10:39 · 514 阅读 · 0 评论