![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML
文章平均质量分 66
carcarrot
这个作者很懒,什么都没留下…
展开
-
CodeMirror 在线代码编辑器 简介
CodeMirror 是一款 “Online Source Editor”,基于 Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库。转载 2024-05-09 15:13:28 · 254 阅读 · 0 评论 -
Vue网页中使用PDF.js弹窗显示pdf文档所有内容
本文中使用的PDF.js组件版本为3.11.174(最新版使用上会有所不同),引入文件如下:首先页面定义一个隐藏的弹窗块(此处用ElementUI的Dialog组件)原创 2023-11-20 14:02:37 · 1498 阅读 · 0 评论 -
点击iframe中的链接时,使用历史记录pushState更改父窗口的URL
我有一个页面,该页面的标题和侧边栏带有正确的内容面板(即iframe)。在加载到右侧内容面板的页面中,我试图单击链接将父窗口中的浏览器URL更新为加载到iframe中的新页面的URL。我不希望实际的父窗口重新加载URL,而只是更新地址栏中的URL。是否可以通过iframe使用?onmessage通过使用从子Iframe窗口向父级发送新URL并在侦听此事件的父窗口上,我可以使用history.pushState完成地址栏中的父窗口URL更新。当父级收到子级iframe。转载 2023-09-11 15:53:51 · 248 阅读 · 0 评论 -
Web集成Windows身份验证(NTLM、Kerberos、Basic)验证过程详解
原文标题:《IE接受Negotiate头,分别使用NTLM 或 Kerberos两种验证的情况说明》https://www.iteye.com/blog/cainiao-wuzhiqi-1565824转载 2022-04-12 17:56:52 · 708 阅读 · 0 评论 -
实现Ajax或Submit Form提交的将数据导出下载成csv文件,以及H5的button标签小坑
1. Web中实现以Ajax或Submit Form请求下载导出csv文件;2. HTML5的标签注意一定要指明type属性原创 2022-01-14 20:06:32 · 1166 阅读 · 0 评论 -
截图保存过的一些知识
导入CSS样式: @import url()DBTS means DB TimeStamp原创 2020-12-04 14:39:42 · 106 阅读 · 0 评论 -
CSS 添加上标(用CSS伪类解决js无法赋值实现诸如单位平方的2上标)
有些时候我们需要通过javascript给某个对象(比如elementUI表格列标题)赋值,这时无法按写像HTML代码一样直接用<sup>实现上标等效果,类似这种情况其实我们可以利用CSS伪类来实现我们的目的。添加上标有两种方式:(关于“伪类”的教程)一、添加上标元素1、使用<sup>元素 1.1、HTML代码:<span>好好学习,天天向上<sup>热</sup></span> ...转载 2020-11-20 11:01:00 · 1528 阅读 · 0 评论 -
js获取图片的base64编码、js压缩图片
案例1:js获取图片的base64编码<!DOCTYPE html><html> <head> <meta charset="gbk"> <title></title> </head> <body> <input accept="image/*" name="upimage" id="upload_file" type="fil转载 2020-11-17 11:32:24 · 582 阅读 · 0 评论 -
修改HTML Form required验证的样式与提示文字
先看下网上提供的方案:https://blog.csdn.net/web_xiaoling_notes/article/details/45920549如果只是最简单的非空验证,如下代码可以解决:<input type="text" name="user_name" required oninvalid="setCustomValidity('不能为空')" oninput="setCustomValidity('')" />如果想更为复杂,更多逻辑判断,js代码不写到html原创 2020-11-17 10:58:55 · 2163 阅读 · 0 评论 -
Ajax Post提交参数的值中带有html标签不能提交到后端的解决办法(ASP.NET)
我们在做Web开发的时候,在MVC中当前端通过Ajax提交数据到后端时,当数据的值中带有HTML标签时,可以是出于安全性方面,在后端的Controller的Action方法中是不会接收到这个Ajax请求的。解决方法:可以在前端提交数据时先将带有HTML标签的数据用encodeURI或Base64(比如atob函数)编码,提交后在后端进行HttpUtility.UrlDecode或Base64(比如Convert.FromBase64String函数)解码再处理。Load数据到页面的时候无需处理。.原创 2020-11-13 17:36:39 · 2081 阅读 · 1 评论 -
js将图片转为base64编码,以字符串传到后台存入数据库
(前台在中approve_edit.html中,后台不变)链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html该链接文中并没有用到easyUI的相关样式,也没有将图片的缩略图展示出来现用一个新建页面进行显示,先看一下效果图:HTML:<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type"转载 2020-11-10 16:43:18 · 2662 阅读 · 3 评论 -
累记HTML一些不常用的标签属性
<input> autocomplete 属性 <input autocomplete="on/off"> (HTML 5新特性)网页中不使用浏览器记住密码大部分浏览器都是根据表单域的type="password"来判断密码域的,所以针对这种情况可以采取“动态设置密码域”的方法:<input type="text" name="password" onfocus="this.type='password'" />解释:当这个文档框获取焦点时才将其...原创 2020-10-29 10:22:05 · 144 阅读 · 0 评论 -
Ajax上传文件并显示进度条
举例说明(主要使用$.ajax的xhr执行回调)xhr 用于创建 XMLHttpRequest 对象的函数。 前端框架:jQuery+Bootstrap+LayerHTML页面里的表单:<form class="form-horizontal" id="vform" action=""> <div class="form-group"> <label class="col-sm-3 control-label">资源名.转载 2020-10-21 09:52:09 · 606 阅读 · 0 评论 -
用js代码修改checkbox的checked属性值不会触发onchange事件
问题描述vue中,我用v-model将 checkbox 绑定到变量flag上,但是,当我用 js 去修改 flag 的值时,却没有触发 checkbox 的change事件。同样的,在angular中用ng-model将 checkbox 绑定到变量flag2上,用程序修改flag2的值也没有触发 checkbox 的change事件。事实上,这不是vue和angular的问题,而是在原生的js和html上。解决方法1. 在vue及angular框架中我们可以通过...原创 2020-10-16 10:28:00 · 3427 阅读 · 0 评论 -
H5中<img>的srcset、size属性及<picture>介绍
img标签srcset、size属性 (HTML 5.1规范)srcset用来声明一组图像源,浏览器根据我们使用描述符指定的条件来选择图像。描述符x表示图像的像素密度,描述符w表示图像的宽度;浏览器使用这些信息从列表中选择合适的图像。 sizes属性为浏览器提供将要显示图像的尺寸信息,srcset使用w描述符时必须包含此属性。srcset属性列出了浏览器可以选择加载的源图像池,是一个由逗号分隔的列表。x描述符表示图像的设备像素比。浏览器根据运行环境,利用这些信息来选择适当的图像。不理解srcset原创 2020-10-14 16:37:23 · 4922 阅读 · 0 评论 -
一款前端可编辑电子表格——Handsontable
Handsontable是一款像电子表格的JavaScript数据网格插件。可用于纯JavaScript、React、Angular和Vue。运行效果如下图:以下是官方样例图:原创 2020-09-09 16:31:17 · 2390 阅读 · 0 评论 -
IE11中Array的find()方法、String的repeat()方法 等兼容性问题
最近有个在Chrome浏览器正常运行的项目,客户需要用IE浏览,发现在IE11及以下版本浏览异常,有两个原因:1.IE11不支持箭头函式表达式=>,改成function匿名函数解决;2. IE11中Array没有此项目中使用到的find方法,也没有String.prototype.repeat方法,因此兼容的写一个【需放在引用的地方之前,比如在“$(document).ready(function(){})”中】原创 2020-09-08 17:08:28 · 994 阅读 · 0 评论 -
Web前端操作文件
在web应用程序中使用文件通过使用在 HTML5 中加入到 DOM 的 File API,使在web内容中让用户选择本地文件然后读取这些文件的内容成为可能。用户可以通过HTML中的<input type="file">元素或者是通过拖拽来选择本地文件。如果你想通过扩展或者其它的chrome源码浏览器(browser chrome code)使用DOM File API,是可行的;然而,需要注意有一些附加特性。详细请见Using the DOM File API in chrome ...转载 2020-08-25 10:40:39 · 1257 阅读 · 0 评论 -
Web开发时不要忽略的IE兼容性设置
我们在做Web开发时,有时页面在Chrome等非IE内核的运行正常的页面在IE打开则会出现各种加载出错(如下图),往往是页面忘了做IE兼容设置,要检查我们的页面中是否少了以下标签设置:<!DOCTYPE html> <!--使用HTML5--><meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--告诉IE使用最新的渲染器Edge渲染页面。-->案例:https:...原创 2020-08-20 10:11:07 · 305 阅读 · 0 评论 -
script标签中的async和defer属性
HTML <script> 标签的 defer 属性defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。(内部与外部脚本都适用)有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了。如果您的脚本不会改变文档的内容,可将 defer 属性加入到 <script> 标签中,以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。转载 2020-07-03 10:21:30 · 389 阅读 · 0 评论 -
div 加载 html页面的方法
div 加载 html页面的方法 做网页的单页面应用时,需要在一个HTML的Div元素中加载另一个HTML页面,以前有一种方法就是用iframe,举例如下:1 <div class="main-container" id="main" style="width:99%">2 <iframe src="diagrambuilder/dashboard/diagr...转载 2019-12-20 11:19:17 · 1747 阅读 · 0 评论 -
关于shortcut icon和icon代码的区别介绍(为网页标题设置小图标)
关于shortcut icon和icon代码的区别介绍语句一:<link rel="shortcut icon" href="favicon.ico" />语句二<link rel="icon" href="animated_favicon.gif" type="image/gif" />备注:语句一 Shortcut Icon 就是在网址列前面出现的Icon...转载 2019-12-13 16:14:07 · 662 阅读 · 0 评论 -
通过Vue绑定zoom样式值实现禁止页面放大缩小
思路:禁止浏览器通过CTRL+与CTRL-放大与缩小页面比例,我们可以通过当页面放大(会触发window.onresize事件)时控制样式属性zoom按相应比例缩小(同理缩小窗体时zoom放大)来实现。以下是示例代码:<div id="app" v-loading="loading" v-cloak :style="{ zoom: zoom + '%' }">………...原创 2019-11-21 16:58:12 · 2238 阅读 · 0 评论 -
编程求出每天时钟上时分秒三个指针重合的时间,精确到毫秒
分析:一天时钟重叠的时间,三个指针重合,即是说三个指针的角度度数一样,时钟上的刻度,秒针、分针一圈60个刻度每个刻度是6度(360/60),需要注意的是时针的每一刻度是30度(360/12,每60分钟时针跨越的1个时针刻度是5个小刻度),24小时中每12小时一个轮回。结果是:00:00:00,00012:00:00,000以下是通过简单的Javascript代码实现,完整代码如下...原创 2019-10-21 12:26:38 · 2314 阅读 · 0 评论 -
使用element封装动态配置表格
说明:最近几个月负责公司部门vue项目的前端架构任务,该组件的设计实现,主要考虑提高业务开发效率,实现表格的动态化配置,对项目中常见的业务页面,能以较少的代码量,通过简单的json配置实现表格和表单的渲染,实现代码的开发任务。要点有三:1、表格的动态化配置,动态展现表格内容、配置化显示操作按钮,可扩展操作按钮并提供表格中自定义列模板,使用vue的render原理实现。使用到组件BaseCrud...转载 2019-10-16 14:22:27 · 930 阅读 · 0 评论 -
js禁止页面放大缩小
转载:https://www.cnblogs.com/dearxinli/p/7645922.html众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但是pc端确实比较麻烦,用户可以通过如下几种方式来缩放:windows:ctrl + +/- ctrl + 滚轮 浏览器菜单...转载 2019-09-06 09:42:09 · 6395 阅读 · 0 评论 -
URL.createObjectURL(blob)和FileReader.readAsDataURL(file)的区别
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。URL.createObjectURL(blob)和FileReader.readAsDataURL(file)很相似:区别通过...转载 2019-09-05 15:28:20 · 4611 阅读 · 0 评论 -
上传文件时预览本地图片或者视频(window.URL.createObjectURL 的使用)
window.URL.createObjectURL 可以用于在浏览器上预览本地图片或者视频在预览视频时,我一直以为将window.URL.createObjectURL生成的URL,赋给video中的source标签是可以的,结果是不行的,得不到视频,如下图需要将其赋给video标签才行,如下图像腾讯,优酷都是这么做的,没有使用source标签,如下图(只不过不是本地视频)...转载 2019-09-05 14:49:31 · 3125 阅读 · 0 评论 -
CSS之px、em、rem三者的联系与区别
px、em、rem都是计量单位,都能表示尺寸,但是有有所不同,而且其各有各的优缺点。Px表示“绝对尺寸”(并非真正的绝对),实际上就是css中定义的像素(此像素与设备的物理像素有一定的区别,后续详细说明见文末说明1),利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化,因此一般不用于响应式网站。em表示相对尺寸,其相对于当前对象内文本的font-s...转载 2019-09-04 17:32:26 · 366 阅读 · 0 评论 -
为什么你写的height:100%不起作用?
1.百分比宽高的设定按照w3c中的width和height属性,可以明确%设定宽高是根据父元素的宽高来的:http://www.w3school.com.cn/cs...http://www.w3school.com.cn/cs...2.width:100%;我们写下这样一段代码,随意设置一个背景色便于观察元素<body> <div style="w...转载 2019-09-04 16:24:27 · 577 阅读 · 0 评论