![](https://img-blog.csdnimg.cn/20190927151101105.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Html5
html
草字
点点关注点点赞,私信问答先回复。
展开
-
css 修改table边框的样式,修改单元格样式、间距
我们在调table的边框样式时,经常会出现单元格和表格的样式重叠,而造成某条边框的的异常粗,或者异常细。修改单元格间距:cellspacing="0"修改table标签的样式:<tableborder="1"style="width:100%;text-align:center;border:1pxsolid#ccc;"cellspacing="0"><tr><td...原创 2022-05-11 16:38:23 · 2170 阅读 · 0 评论 -
js 关于如何动态设置css的hover样式最佳方式,设置hover样式
网上很多方式都是采用js监听dom的鼠标移入(onmouseover)移出(onmouseout)事件,进行控制这个dom的hover样式。消耗性能先不说,代码也很庞大,再加上如果是自定义主题(修改后能立马看到效果的,不是需要刷新)的功能可能就更麻烦了,要给所有的dom都绑定这样的事件。原创 2022-11-16 17:31:18 · 5431 阅读 · 4 评论 -
css 实现马赛克背景,ps透明背景,未选颜色的展示方式
效果图: 方式二:效果图:代码:原创 2022-03-01 16:06:26 · 720 阅读 · 0 评论 -
js 监听a标签跳转页面,并携带自定义参数
【代码】js 监听a标签跳转页面,并携带自定义参数。原创 2022-11-09 17:07:50 · 2600 阅读 · 0 评论 -
js 监听a标签跳转页面,并携带自定义参数
【代码】js 监听a标签跳转页面,并携带自定义参数。原创 2022-11-09 16:50:49 · 1565 阅读 · 0 评论 -
css 任意背景色前景色依旧看得见。图层混合模式:差值、排除模式;mix-blend-mode: difference;
【代码】css 任意背景色前景色依旧看得见。图层混合模式:差值模式;原创 2022-10-12 21:14:36 · 176 阅读 · 0 评论 -
js播放音频 Uncaught (in promise) DOMException: play() failed because the user didn‘t interact with
google浏览器必须在用户与页面进行交互后,才能进行播放音频。原创 2022-10-07 15:20:58 · 2825 阅读 · 0 评论 -
html iphone手机显示数字或手机号为白色超链接(兼容性问题),手机号颜色变成白色,iPhone 13 pro max
其他方法:将数字用input框进行包裹,就不会被iphone手机转换了。或者在数字里面添加其他符号。iphone手机对纯数字内容做了二次处理,将他替换成了点击跳转到拨打电话界面的超链接。禁止iphone手机自动做相关处理。在html中的head头部添加如下。原创 2022-09-24 14:23:55 · 462 阅读 · 0 评论 -
APP端webview嵌套h5页面,h5的返回按钮点击没有效果?
比如第三方客服,在h5页面中提供了返回按钮,而在app端并没有提供返回按钮,让用户用物理返回键返回。关于app端嵌套h5的页面,原创 2022-08-29 14:56:44 · 3066 阅读 · 0 评论 -
前端针对不同技术的常用UI框架和图表
Element一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。基于Vue.js3的企业级UI组件库和前端解决方案,为数万开发者服务。Vant轻量、可靠的移动端Vue组件库。原创 2022-07-21 16:13:55 · 1074 阅读 · 0 评论 -
vue iframe中的根页面点击返回,如何使外层页面返回。
使用原生返回页面的方法,无论是在浏览器,还是在移动端app上,都会返回。window.history.back();原创 2022-05-12 10:16:46 · 682 阅读 · 0 评论 -
canvas 原生实现圆滑的曲线图
效果图:使用了jquery和mock.js。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <st原创 2022-04-13 20:03:00 · 606 阅读 · 0 评论 -
js 所有事件类型
事件 浏览器支持 解说 一般事件 onclick IE3、N2 鼠标点击时触发此事件 ondblclick IE4、N4 鼠标双击时触发此事件 onmousedown IE4、N4 按下鼠标时触发此事件 onmouseup IE4、N4 鼠标按下后松开鼠标时触发此事件 onmouseover IE3、N2 当鼠标移动到某对象范围的上方时触发此事件 onmousemove IE4、N4 鼠标移..原创 2022-04-12 17:03:24 · 194 阅读 · 0 评论 -
css 弹性盒子和grid网格布局实现九宫格布局,每个格子的宽高一致(跟随页面宽度平分)。
效果图:高度设置为0,使用内间距100%,就可以将容器宽高的大小设置为一致。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl原创 2022-04-07 11:46:02 · 2852 阅读 · 0 评论 -
js 将文本中的链接转成可跳转的a标签链接
方法一:function translateHtml(msg){ var reg = /((http|https):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|])/g; var textR = msg.replace(reg, "<a href='$1' target='_blank' style='color: #00a0e9;width: 360px;display: inline;...原创 2022-03-17 15:20:41 · 1587 阅读 · 0 评论 -
js input[type=file]选择重复的文件,无法触发change事件
选择文件的时候,浏览器会判断是否跟之前一致,如果一致他就不会重新加载这个文件,避免无谓的加载消耗。所以我们在不一样的需求的时候,比如裁剪图片,无论他是不是相同图片,都必须让他触发change事件,这样才能进行下一步处理。解决方法:给input添加原生事件onblur进行清空,onblur="this.value=''",blur比change事件的优先级要高一点。代码:<inputtype="file"accept="image/*"onblur="this.value=''"...原创 2022-03-01 15:00:31 · 2134 阅读 · 1 评论 -
js 获取元素相对于页面(可视窗口)的位置,不考虑页面滚动后
有时候,我们处理节点旋转的时候,旋转的角度计算是通过当前点击的位置和被旋转的节点中心点计算出来的。点击的位置是相对于可视窗口的,那么被旋转节点的中心点肯定是相对于可视窗口的(不然当出现滚动条的时候),不然计算的结果就会出现很多问题。代码:// 获取元素相对于页面文档的位置----------------------------------------------function getElementPos(el) { if(el.parentNode === null || el.sty原创 2022-02-24 21:46:33 · 2213 阅读 · 0 评论 -
html 禁止移动端默认双指拖动缩放事件
禁止缩放可以使用如下比较方便的写法。当然你也可以绑定body身上的拖动事件,通过e.preventDefault();阻止他的默认行为,不过这种方法会把一些功能给屏蔽掉,不推荐:<metaname="viewport"content="width=device-width,initial-scale=1.0,user-scalable=0">...原创 2022-02-24 15:39:29 · 1565 阅读 · 0 评论 -
js IntersectionObserver监听元素的显示与隐藏,图片懒加载
代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ ..原创 2022-02-23 10:49:28 · 1356 阅读 · 0 评论 -
js 获取dom的高度和宽度,可滚动宽高距离,当前滚动位置
dom节点属性:clientWidth(不推荐):dom节点可视区域的宽度。(可滚动距离不算在内哈。)clientHeight(不推荐):dom节点可视区域的高度。(可滚动距离不算在内哈。)offsetWidth:dom节点可视区域的宽度,包含边框、内边距。(可滚动距离不算在内哈。)offsetHeight:dom节点可视区域的宽度,包含边框、内边距。(可滚动距离不算在内哈。)scrollWidth:dom节点的内容可滚动距离,横向滚动距离。(注意:overflow:hidden时也能获原创 2022-02-22 16:43:08 · 5978 阅读 · 0 评论 -
css mix-blend-mode图层混合模式(跟ps的功能图层混合模式类似)
mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。很多时候,我们使用的网站主题背景和图片的主色反差太大的时候,可以使用图层混合模式进行调整,当然又是也拿来裁剪黑白图片。语法:mix-blend-mode:normal; //默认值属性:Photoshop图层 CSS混合模式 中文名称 功能描述 normal normal 正常模式 混合色的像素会透过所用的颜色显示出来 mu...原创 2022-02-15 14:35:07 · 480 阅读 · 0 评论 -
js WOW.js滚动动画,跟随滚动条位置执行动画
效果图:如上所示,每滚动到一个区域,执行动画如:淡入,浮入,从右移入等等。滚动动画其实就跟PPT的效果差不多,用户能看到什么区域再执行这个区域的动画,默认情况下整个页面,以及滚动条下面内容的动画是直接执行的。动画的功能是通过animate.css实现的,监听dom滚动并开始执行动画由wow.js实现。一、安装及引入依赖。animate.css:animate官方地址npm install animate.css --saveimport 'animate.css原创 2022-02-14 16:37:47 · 1375 阅读 · 2 评论 -
html 压缩字体文件(字蛛)
场景:很多时候,我们在制作网站的官网,用到了UI设计给我们的字体,但发现用到这个字体的地方非常少,而文件却占用很大,比如2M以上。如果我们明确的知道了使用这个字体的文字不是很多,那么我们就可以通过字蛛这个工具来对字体文件进行压缩。字蛛工作原理:获取整个dom上所有的文字,将出现过的文字并对应着字体文件进行压缩,用到的就参与压缩,没有用到的就删除了。如果是js操作dom添加的文字,字蛛是获取不到的,也就无法进行压缩,所以vue项目的压缩需要单独写个原生demo来进行压缩,为了方便操作。原创 2022-02-14 11:40:22 · 730 阅读 · 0 评论 -
vue 使用animate.css动画库
vue和最新版的animate动画库不兼容,所以不能安装最新版的animate动画库。一、引入:在public文件夹中的index.html加入以下代码:<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">二、使用:在需要设置的地方添加类样式,默认类样式“animated”必须添加:三、示例:<input type="button" valu原创 2020-08-03 14:37:57 · 482 阅读 · 0 评论 -
css transition学习以及应用技巧
在css中,一共有两种方式实现css动画效果,一种transitio过渡,一种animation帧动画。transitio过渡的效果相对简单,往往都是一些大小、颜色和形状(圆角)的改变,以及元素的位置,显隐等等。animation帧动画能实现的效果就更多了,除了transitio能实现的,还有比如:不同帧显示不同的图片,由我们自己来控制每一帧是一个什么样的效果...等等。不过呢,在我们日常开发中,应用animation的场景并不是特别多,再加上使用animation相比较transitio要复杂原创 2022-02-10 15:44:59 · 570 阅读 · 0 评论 -
css img标签如何拥有background的相关属性,object-fit,object-position
场景:很多时候用户上传的图片跟我们显示的时候是不一致的,我们显示图片时是200*200(宽高比一致)。但用户的图片却是长宽比不一致的,有的时候长了,有的时候宽了。解决方案:这个时候background标签的优势就提现出来了,可以使用background-position:center将图片的显示位置居于正中心,也可以使用background-size:contain将图片完整的显示出来等等。但回过头来看img标签,他就没有这个功能了,他只能设置图片的宽高。如果图片真实宽高跟显示的宽高不一致,原创 2022-02-08 10:50:15 · 656 阅读 · 0 评论 -
html <input type=file>上传文件时,accept属性值汇总,支持文件格式,限制文件格式,限制上传图片的格式
一、示例标签1:<input type="file" accept="image/*" /> accept属性说明:image表示图片,*表示支持所有格式的图片文件。二、示例标签2:<inputtype="file"accept="audio/mp4,video/mp4" class="uploadVideo"/>多种格式,以逗号分隔。前缀说明:text:文本文件。如格式:txt、csv、css、html,能直接使用记事本打开的......原创 2022-01-14 16:36:33 · 17201 阅读 · 0 评论 -
js px转rem,简单版,注意不能修改ui框架的px
需要你手动修改一下设计的分辨率尺寸,setRem函数会自动根据当前屏幕大小和设计分辨率大小的比例进行rem转换。代码:const baseSize = 50// 设置 rem 函数function setRem() { // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。 const scale = document.documentElement.clientWidth / 750 // const scale = document.documentElement原创 2022-01-07 17:39:28 · 1368 阅读 · 0 评论 -
html svg设置边框,底边框不显示,或者四周的边框不一致问题
问题代码:<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><rectx="0"y="0"width="150"height="150"style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/></svg>解决方法给svg添加宽高,就能解决这个...原创 2022-01-06 17:19:46 · 856 阅读 · 0 评论 -
css background和animation精灵图实现帧动画,如何控制暂停和播放
效果图:示例代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .fis原创 2021-12-15 18:03:32 · 726 阅读 · 0 评论 -
js PC端桌面系统通知功能,系统通知
示例:new Notification('网易有道词典', { body: '程序已启动', icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549464117983&di=286ad42d05b9ea9720daa1d62cd18ee5&imgtype=0&src=http%3A%2F%2Fimgsrc原创 2021-12-01 13:50:27 · 1372 阅读 · 0 评论 -
html 如何完美的显示图片,不拉伸图片,完整显示等等。
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> i.原创 2021-11-22 14:18:01 · 12408 阅读 · 2 评论 -
js 实现拖动元素(是否限制在某个容器中拖动)
效果图:fixed定位,针对弹窗的移动:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <styl...原创 2021-11-19 16:36:11 · 1104 阅读 · 0 评论 -
js mouseout和mouseleave事件,到底用哪个比较好,哪个不会出现问题。
注意:与mouseout事件不同,mouseleave事件只有在鼠标指针离开被选元素时被触发,mouseout事件在鼠标指针离开任意子元素时也会被触发。参见页面底部演示实例。所以:如果mouseout的子元素存在溢出,并添加了超出加滚动,那么刚进入也会触发该事件,所以这里就不能使用。最后:不过我们平时的需求根本用不到mouseout,mouseout还容易出现一些问题,所以推荐大家用mouseleave。...原创 2021-11-19 15:42:00 · 410 阅读 · 0 评论 -
js实现下载图片
函数代码:// 下载图片地址和保存的图片名称const downloadImage = (imgsrc, name) => { var image = new Image() image.setAttribute('crossOrigin', 'anonymous') image.onload = function() { var canvas = document.createElement('canvas') canvas.width = image.widt原创 2021-11-19 14:51:52 · 2442 阅读 · 0 评论 -
js,html 上传预览本地图片(无需上传服务器)
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>.原创 2021-11-18 11:40:47 · 494 阅读 · 0 评论 -
js 监听网络断开(网络异常)和连接成功
代码:window.addEventListener("online",function(){ alert("网络连接了") }) window.addEventListener("offline",function(){ alert('网络断开了') })首次进入不会触发网络连接成功,只有断开后,再重连才会触发。...原创 2021-11-09 11:35:50 · 1603 阅读 · 0 评论 -
vue a标签实现下载本地文件
<a class="active_t" href="./开店1(1).xlsx" download="开店的excel模板" style="margin-left:10px;line-height:35px;color:blue;"> 下载开店的excel模板 </a>存放在public目录下就行了:原创 2021-11-03 17:06:52 · 823 阅读 · 2 评论 -
js,vue 如何在手机上看到调试信息?vConsole.js前端开发者调试面板
官方说明:一个轻量、可拓展、针对手机网页的前端开发者调试面板。特性查看 console 日志 查看网络请求 查看页面 element 结构 查看 Cookies、localStorage 和 SessionStorage 手动执行 JS 命令行 自定义插件一、CDN使用方法。<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script><script> // V原创 2021-10-26 12:00:38 · 550 阅读 · 0 评论 -
vue,js 格式化两位小数(多位),不四舍五入,不会出现精度问题,及兼容问题
有的时候,比如说做交易所的项目,界面上出现很多小数,那么这个时候最容易出现精度问题,像我们常用的toFixed保留小数,遇到比5大的,他就会四舍五入,这肯定是不行的涩。网上有不四舍五入的方法,可是出现了一些精度问题:Math.floor(15.7784514000 * 100) / 100 // 输出结果为 15.77如:4120.9格式化3位小数后,变成了4120.899。最后,解决的代码:// 两个浮点数求和function accAdd(num1,num2){ va原创 2021-10-25 16:36:03 · 1670 阅读 · 0 评论