html
关注
分享
扫一扫
文章平均质量分 67
崽崽的谷雨
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
展开
-
前端实现浏览器自定义滚动条
前端实现浏览器自定义滚动条原创 2024-03-27 10:30:00 · 8396 阅读 · 0 评论 -
前端实现 input 回车搜索（html,vue,react实现）
前端实现 input 回车搜索（html,vue,react实现）form表单实现keyup监听实现原创 2023-04-17 10:00:00 · 7004 阅读 · 0 评论 -
js 实现隐藏表格列
js 实现隐藏表格列。动态 渲染列原创 2022-10-19 10:15:00 · 5694 阅读 · 2 评论 -
js 实现 输入 行数和列数动态生成一个表格
你可以 绘制的时候根据x,y再设置个宽高比如，你想让一个格子是10x10那就 动态计算表格的 width,height.要求时 输入 x 和 y ，x是行 y是列 ，然后 输入 一个数 x1,y1对其 上色。2.上色 的话 根据x1找到 tr在 根据 y1找到 所在td 然后给其加个背景色。其实 表格的宽高 也可以动态，要不然 你生成的多了会很密集。自己传一个 x,y就行。tables.style.height=y*你要的每格高度。tables.style.width=x*你要的每格宽度。原创 2022-10-01 10:30:00 · 2205 阅读 · 0 评论 -
js 利用window.getSelection() 实现简单的文字标注（鼠标选中文本，给其加下滑线、背景色）
js 利用window.getSelection() 实现简单的文字标注（鼠标选中文本，给其加下滑线、背景色）window.getSelection()原创 2022-08-25 09:00:00 · 15973 阅读 · 10 评论 -
vue、html 实现头尾固定，中间滚动的布局(移动端常见的布局)
vue、html 实现头尾固定，中间滚动的布局(移动端常见的布局)头尾固定，中间滚动的布局，这种布局很常见，移动端、pc端都常见。不过移动端居多。原创 2022-08-04 08:45:00 · 5058 阅读 · 0 评论 -
vue、js onSelect事件 获取选中的值
onselect属性可用于,,,,和.主要是借用event获取其值和selectionStart选中下标起始selectionEnd选中的下标结束。然后字符串截取出来。作用当文本被选中时，执行一段Javascript代码。onselect事件会在文本框中的文本被选中时发生。vue、js onSelect事件 获取选中的值......原创 2022-07-26 08:30:00 · 6143 阅读 · 0 评论 -
HTML contenteditable 属性
HTML contenteditable 属性原创 2022-07-20 15:30:33 · 695 阅读 · 0 评论 -
搜索框和按钮缩放时会有缝隙的bug
做一个类似于 百度的搜索框时，浏览器 100% 没什么问题，但是缩放到175% 时按钮和input会出现缝隙。 100%效果图 175%效果图 如上图：明显能看出 有空白的缝隙 产生这个的原因是：当缩放到175%时，应该1.75格代表1像素，但由于硬件层次限制，比如一格用四个物理像素点绘制，0.25格就不绘制，故1.75格中的0.75，只能用三格绘制，未绘制的一格产生了空隙（css 页面缩放边框产生空隙相关）如果是 按钮和 input 之间有缝隙 可以参考：input输入框和bu原创 2022-06-30 17:19:01 · 922 阅读 · 0 评论 -
js 限制鼠标移动范围
js 限制鼠标移动范围（js隐藏鼠标）js 鼠标 禁用功能js 拖拽原创 2022-06-23 17:44:18 · 5633 阅读 · 0 评论 -
css flex 布局 space-around 和 space-evenly 之间的区别css flex布局）
css flex 布局 space-around 和 space-evenly 之间的区别css flex布局）flex布局原创 2022-06-20 08:30:00 · 19498 阅读 · 0 评论 -
html canvas 烟花 特效代码
html canvas 烟花特效原创 2022-01-05 09:29:03 · 9011 阅读 · 1 评论 -
html字符串只匹配，标签里的内容，不匹配标签属性
场景有的时候，返回html字符串，前端需要检索出需要的值。如果是英文，并且标签上有style属性、class。匹配时也会匹配上，正确的是应该只匹配内容。例如：我匹配r就会匹配到style里的color和red里的r也会匹配明显不对。 let sText = '<span style="color: red;">aA7<a style="color: red;"></a></span>'; var rHtml = new RegExp(.原创 2021-07-02 17:33:55 · 1016 阅读 · 1 评论 -
js+html实现点击按钮列标滚动（scrollTop）
效果图实现点击上下按钮，滚动条滚动。代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s..原创 2021-07-02 13:33:00 · 1543 阅读 · 0 评论 -
html+js实现切换图片（点击按钮切换）
效果图实现点击按钮切换图片的效果具体代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca..原创 2021-07-02 13:27:11 · 19462 阅读 · 3 评论 -
判断浏览器是否支持某个CSS属性以及获取浏览器信息
前言：css属性兼容性很重要，有的时候必须兼容其他浏览器比如ie和其他各种浏览器。所以我们要知道浏览器是否支持某个属性，可以用下面的方法试试。if( attr in document.documentElement.style){ return true;}else{ return false;} 例如：判断是否支持flex属性<pre name="code" class="javascript">if( 'flex' in document.d.转载 2021-05-19 14:27:19 · 1619 阅读 · 0 评论 -
BFC和IFC以及双边距bug和边距塌陷（折叠）问题
BFCBFC（Block Formatting Context）叫做“块级格式化上下文"布局规则如下：1.内部的盒子会在垂直方向，一个个地放置；2.盒子垂直方向的距离由margin决定， 属于同一个BFC的两个相邻Box的上下margin会发生重叠；（边距折叠margin collapsing 解决和HTML:margin塌陷现象的解决，面试经常问到）3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；4.BFC的区域不会与float重叠；5.BFC就是页面上的一个隔离的独转载 2021-04-01 09:56:45 · 395 阅读 · 0 评论 -
js实现px与rem的换算（移动端）vue/react
1.简单的方法：functionrem(){ document.getElement.style.fontSize=document.getElement.clientWidth/7.5+'px'}window.onload=rem()//文档加载完成执行window.onresize=rem()//当浏览器被重置大小时执行Javascript代码可参考on...原创 2019-12-11 17:39:04 · 2943 阅读 · 0 评论 -
React中使用react-file-viewer，实现预览office文件（pdf,word,xlsx等文件）前端实现，在浏览器打开文件
前言：最近做一个项目要求在前端浏览器可以直接打开office文件（pdf,doc,xlsx等文件）。pdf浏览器可以直接打开（可以直接用a标签href="文件地址"或者iframe标签src="文件地址"再或者使用pdf.js）。但是word,xlsl等文件很难实现，网上的实现方式有微软的方法实现但是访问的文件地址必须是公共文件，所有人都能访问到才可以使用，显然是不行的，所以我就找到了reac...原创 2019-12-11 17:23:01 · 44078 阅读 · 44 评论 -
css优先级及加载顺序/权重值以及css继承
1.css的加载方式CSS的引入样式总共有三种：行内样式（内联样式表）、内部样式表、外部样式表。下面分别来介绍这三种样式。1.内联式（行内样式）内联式就是直接在标签里写样式。行内样式只对应用了此样式的标签有效，如果有多个相同的标签要使用相同的样式，那么每一个标签都要引入该样式，会造成很多重复的代码，所以，在实际的应用当中，不建议使用行内样式。（行内样式不容易被浏览器缓存，每次刷新都重新...原创 2019-12-09 17:51:32 · 2516 阅读 · 0 评论 -
css overflow属性及使用方法（场景）
overflow这个属性还是挺实用的比如，一个div展示文字，想让超出部分隐藏就可以使用overflow:hidden,想让显示的画就用overflow:scroll;1.overflow的属性值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览...原创 2019-12-02 11:20:12 · 32768 阅读 · 0 评论 -
css calc函数
我最近看别人写的样式发现一个函数calc,于是我查了一下用法。.div { height: calc(100vh - 60px);//用来动态计算div的高度 width: 100%; background: #eaebef; padding: 6px 40px; margin-top: 60px; padding-top: 30px; ...原创 2019-12-02 10:33:25 · 792 阅读 · 0 评论 -
CSS Modules 用法教程（css global）
学过网页开发就会知道，CSS 不能算编程语言，只是网页样式的一种描述方法。为了让 CSS 也能适用软件工程方法，程序员想了各种办法，让它变得像一门编程语言。从最早的Less、SASS，到后来的 PostCSS，再到最近的 CSS in JS，都是为了解决这个问题。本文介绍的CSS Modules有所不同。它不是将 CSS 改造成编程语言，而是功能很单纯，只加入了局部作用域和模块依赖...转载 2019-11-29 16:18:43 · 3374 阅读 · 0 评论 -
css ::before和:befor的用法和区别以及伪元素和伪类的区别
前言：css是前端不可缺少的一部分，也很重要。厉害的前端可以用最简洁的css，实现美观的布局。下面我们来说一下::befor和:befor的用法及区别？在css中，::before 是一个伪类元素，代表生成的内容元素，表示相应元素的可抽象样式的第一个子元素，即：所选元素的第一个子元素。利用::before可以把需插入的内容插入到元素的其他内容之前，并且默认内联显示。::before需要...原创 2019-11-29 16:01:23 · 3761 阅读 · 0 评论 -
js 判断类型的方法（type/instanceof/constructor/Object.prototype.toString）
js判断数据类型的四种方法1.typeof typeof是一个操作符，其右侧跟一个一元表达式，并返回这个表达式的数据类型。返回的结果用该类型的字符串(全小写字母)形式表示，包括number,string,boolean,undefined,object,function,symbol等。typeof ""; //stringtypeof 1; //numbertyp...转载 2019-11-25 14:58:49 · 394 阅读 · 0 评论 -
css flex布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box............转载 2019-11-25 14:49:22 · 364 阅读 · 0 评论 -
css display属性及使用方法
1.display的取值浏览器支持IE Firefox Chrome Safari Opera 支持 支持 支持 支持 支持 所有主流浏览器都支持 display 属性。注释：如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 "inline-table"、"run-in"、"ta...原创 2019-11-25 14:45:26 · 3016 阅读 · 0 评论 -
css postion属性详解及用法
前言：css是前端的必要及能之一，今天总结一下css中postion属性。1.postion是什么及取值；position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。static（默认） relative（相对定位） fixed（固定定位） absolute（绝对定位） sticky（动态效果）2.使用方法及场景1.stat...转载 2019-11-25 14:26:20 · 10423 阅读 · 0 评论