![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
WebCsDn_TDCode
这个作者很懒,什么都没留下…
展开
-
定时器使用场景与解决方案
定时器使用场景与解决方案原创 2024-03-25 10:18:41 · 277 阅读 · 0 评论 -
async&await异步同步
等待每个异步操作的完成,并在操作完成后继续执行下一个操作原创 2024-03-12 15:28:18 · 439 阅读 · 0 评论 -
uni-app选择器( uni-data-picker)选择任意级别
uni-app选择器( uni-data-picker)选择任意级别原创 2023-08-02 15:51:58 · 5056 阅读 · 1 评论 -
CSS实现环状进度条
CSS实现环状进度条原创 2023-02-09 16:20:10 · 517 阅读 · 0 评论 -
正则验证表达式
正则验证表达式原创 2023-02-02 22:49:32 · 82 阅读 · 0 评论 -
去除数组存在的NaN,前后同步紧挨第一个非NaN值
去除数组存在的NaN前面一次递增,后面同步最后一个非NaN值原创 2022-09-07 08:57:49 · 172 阅读 · 0 评论 -
Element UI el-input 限制只能输入正数,小数点后输入两位
Element UI el-input 限制只能输入正数,小数点后输入两位。原创 2022-08-11 09:10:47 · 1969 阅读 · 0 评论 -
解决echarts警告提示:There is a chart instance already initialized on the dom.
There is a chart instance already initialized on the dom.原创 2022-06-28 14:47:27 · 7309 阅读 · 5 评论 -
Vue父组件向子组件传递子组件实时更新
Vue父组件向子组件传递子组件实时更新原创 2022-06-27 17:47:41 · 8077 阅读 · 0 评论 -
使用websocket-多人实时通讯
HTML<!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-scale=1.0"> <tit.原创 2022-04-25 17:55:47 · 709 阅读 · 0 评论 -
浅拷贝&深拷贝
深拷贝和浅拷贝主要是针对像Object 和 Array 这两种比较复杂的对象的。一、浅拷贝简单来说,就是一个变量赋值给另一个变量(内存地址相同),其中一个变量的值改变,两个变量的值都变了,这就叫做浅拷贝。let a = { age: 1}let b = a;b.age = 2;console.log(a)//age 2ES6语法 Object.assign(target, sources)target:拷贝的目标sources: 被拷贝的...原创 2021-12-09 22:01:57 · 420 阅读 · 1 评论 -
ElementUI之Tooltip 文字提示使用方式
常用于展示鼠标 hover 时的提示信息实现长度过程使用隐藏作用<el-tooltip placement="top-start" :content="description"> <el-button v-if="description && description.length > 6" >{{ description.slice(0, 6) }}...</el-button> <el-button v-else-if="de原创 2021-09-23 11:38:36 · 760 阅读 · 0 评论 -
高级前端工程师的自我修养
touch报这个错[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example becaus[Intervention] Unable to preventDefault inside passive event listener due to target bein...转载 2021-09-21 16:41:59 · 121 阅读 · 0 评论 -
webpack+vue中安装使用vue-layer弹窗插件
1、安装vue-layer插件npm install vue-layer --save-dev2、打包入口文件main.js中引入vue、vue-layer、并且将vue-layer添加到vue原型import Vue from 'vue';import layer from 'vue-layer'Vue.prototype.$layer = layer(Vue);2.1、...翻译 2021-08-19 14:23:03 · 403 阅读 · 0 评论 -
React技术总结
React技术总结1.关于框架-最新版20201.1配置:CSS模块化:相关网站:众说纷纭使用babel-plugin-react-css-modules简化CSS Modules的使用原创 2020-06-13 13:26:42 · 596 阅读 · 0 评论 -
Webpack相关总结
1.版本兼容问题 webpack编译报错 Couldn'tfindpreset"react"relativetodirectory: webpack配置没问题。报错应该是babelquery那里有问题。 第一种解决方法:presets:['es2015','react']map(require.resolve) 第一种没解决,就把query删掉,在根目录下新建.babelrc把query这个json对象放进去 第二种也没解决的话,升级一下babel...原创 2020-06-03 23:22:53 · 135 阅读 · 0 评论 -
Atom工具开发技术总结
1.Atom基本配置以及必备插件配置:React开发相关Atom插件配置 JS支持atom-ternjs 格式化atom- -beautify 直接打开浏览器open-in- browser 快速HTML代码emmet 文件图标fhle- icons 高亮当前行highlight-line 高亮所有选择highlight- selected其他插件: color-picker 颜色采集器 => ctrl-shift-c...原创 2020-06-02 15:44:52 · 304 阅读 · 0 评论 -
前端基本技术总结
可以多个原创 2020-05-17 13:23:13 · 664 阅读 · 0 评论 -
Js常用方法归纳
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性):https://www.cnblogs.com/chengxs/p/9000037.html原创 2020-05-17 12:13:16 · 161 阅读 · 0 评论 -
console.log中复制打印的对象
在使用console.log()打印我们的内容时,时常需要将打印的内容复制粘贴使用,然而控制台打印出来的对象是经过格式化处理且直接选择粘贴会有格式问题,此时我们可以通过控制台的copy()方法来进行打印结果的复制,如图所示:当复copy执行完,内容已经放在系统粘贴板中,ctrl+v 粘贴就好。...原创 2020-05-15 17:54:54 · 1812 阅读 · 0 评论 -
Node.js中package.json中^和~的区别
webpack 项目的package.json 文件列出了项目所依赖的插件和库,同时也给出了对应的版本说明,但是在版本说明前面还有个符号:'^'(插入符号)和'~'(波浪符号),总结了下他们之间的区别:例如:'~'(波浪符号):他会更新到当前minor version(也就是中间的那位数字)中最新的版本。放到我们的例子中就是:"exif-js": "~2.3.0",这个库会去匹配更新到2.3.x的最新版本,如果出了一个新的版本为2.4.0,则不会自动升级。波浪符号是曾经npm安装时候的默认符号,原创 2020-05-12 19:47:10 · 353 阅读 · 0 评论 -
GoJS
GoJS兼容所有主流浏览器:Chrome 3+Firefox 2+Safari 3.2+Opera 9+IE 5.5+理论上,GoJS可以运行在任何浏览器环境上。https://gitee.com/lanfei/GoJS原创 2020-05-09 19:09:26 · 329 阅读 · 1 评论 -
layui图标拓展-如何添加第三方矢量库
在前端开发过程中我们经常会遇到框架提供的图标不够用的情况,那就需要我们自己进行拓展了配置流程:1.下载矢量图标我们需要复制这二块 然后修改部分代码2.导入图标文件最好下载拿到稳定的导入--->带iconfont的文件3.修改csscontent:"\e636";4.使用引用iconfont.css--->组合值:ic...原创 2019-12-26 14:09:32 · 783 阅读 · 0 评论 -
node.js安装
1、node.js下载地址:https://nodejs.org/en/download/2、安装完成,打开cmd命令行,输入node -vnpm -v*可能出现的问题· 'npm' 不是内部或外部命令,也不是可运行的程序或批处理文件。解决方法:配置 系统 环境变量高级-环境变量添加 node.js位置-确认 - 成功...原创 2019-12-12 18:18:34 · 100 阅读 · 0 评论 -
OpenSeadragon
OpenSeadragon是一个可以显示多层图片(可放大缩小)的Web库,基于JavaScript,支持桌面和手机。由于我项目需要,却没有找到任何中文教程,因此在官网上一边学习,一边总结于此。相关网站方法:打开软件-图片拖入框中-点击Export-OutputType选择imags-起个名字name-Exportoptio...原创 2019-12-12 16:42:36 · 744 阅读 · 0 评论 -
Jquery浅克隆与深克隆
克隆节点是DOM的常见操作,jQuery提供一个clone方法,专门用于处理dom的克隆.clone()方法深度 复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点。clone方法比较简单就是克隆节点,但是需要注意,如果节点有事件或者数据之类的其他处理,我们需要通过clone(true)传递一个布尔值ture用来指定,这样不仅仅只是克隆单纯的节点结构,还要把附带的事件...原创 2019-12-11 18:30:46 · 307 阅读 · 0 评论 -
textarea设置默认文字换行
textarea设置默认文字换行 方式一:js方式(数组->每个元素添加+"\n") 方式二:静态写法(换位地方添加<xmp> </xmp>)HTML<textarea id="txt"></textarea><textarea>陕西电力&a...原创 2019-11-23 11:16:15 · 1220 阅读 · 0 评论 -
判断ie浏览器且给出ie版本
js判断是否是ie浏览器且给出ie版本怎么去看浏览器的内核等信息 ---- js的全局对象window子属性navigator.userAgent,这个属性是包含了浏览器信息的相关信息,包括我们需要的浏览器内核 navigator.userAgent这个值取出来是个字符串,可以通过string的 indexOf方法或者正则匹配来验证关键字符串 ie11和edge的判断方式有所不同fu...原创 2019-11-01 16:14:20 · 244 阅读 · 0 评论 -
jQuery常用插件总结
网站导航:没有树结构:http://www.jq22.com/yanshi20402 带树结构:http://www.jq22.com/yanshi15301原创 2019-09-04 17:45:22 · 128 阅读 · 0 评论 -
前端开发规范:命名规范、文件资源命名、html规范、css规范、js规范
命名驼峰式命名法介绍Pascal Case 大驼峰式命名法:首字母大写。eg:StudentInfo、UserInfo、ProductInfo(建议使用) Camel Case 小驼峰式命名法:首字母小写。eg:studentInfo、userInfo、productInfo命名规范: 类型+对象描述的方式,如果没有明确的类型,就可以使前缀为名词文件资源命名(indexName....原创 2019-09-06 11:06:12 · 1185 阅读 · 0 评论 -
SVN使用常见处理方法
1.提交文件时文件状态显示Missing(缺少)处理方式:每次用SVN上传代码的时候,由于一些不规范的操作,导致某些文件的statue(状态)变为Missing(缺少),遇到这种问题太棘手了,到处找方法,找百度都没解决掉。截图如下:针对这种顽固的missing(缺少),原来最终的解决方法会这么简单。听好了:这种missing(缺少)的文件全部选中点击右键,里面有个res...原创 2019-09-10 09:40:47 · 449 阅读 · 1 评论 -
HTML样式部署CSS
h1——h6标签内容对应像素在一个网页中可以适当使用h1 h2 h3 h4标签,有利于网页的重点部分突出,同时也利于搜索引擎排名,但切记滥用多用H1 H2 H3 H4标签,适当使用即可,一切从用户体验出发来使用。如果需要控制这些标题标签的大小、背景、宽度、高度、CSS加粗与否都可以通过DIV CSS来实现对其样式重新定义。<h1>最重要的标题H1</h1> &l...原创 2019-09-11 10:42:49 · 228 阅读 · 0 评论 -
Echarts横向柱状图:叠加、堆叠(stack)以及点击事件
html<div class="box" id="echartModel" style="background-color: #191e3e;"></div>js$(function(){ var myChart = echarts.init(document.getElementById('echartModel')); opti...原创 2019-10-10 17:58:40 · 15742 阅读 · 1 评论 -
vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件
vue-calendar-component基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库WhyGithub 上很多点击弹出日历选择某个时间的组件,却没有找到单纯展示日历并且能点击获取时间的组件 少部分日历组件的占用内存过于大,对于日历这样简单的功能来说显然不够合理 Installnpm ...转载 2019-01-03 11:04:13 · 6697 阅读 · 1 评论 -
This dependency was not found: * !!vue-style-loader!css-loader? 解决方案
但是当你新建一个vue项目时,需要重新安装stylus,否则报错:This dependency was not found:* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":tr...转载 2018-09-12 17:53:01 · 403 阅读 · 0 评论 -
echarts环形图的牵引线及文字位置
1.去掉边框和百分比2.文字上移至牵引线的上方3.自定义样式代码如下app.title = '环形图'; option = { tooltip: { trigger: 'item', formatter: " {b}:{c} " // ({d}%) 代表该模块所占圆环比例 // for...原创 2019-06-20 13:42:11 · 8699 阅读 · 0 评论 -
Iframe自适应高度以及相关
<iframe width="778" align="center" height="200" id="cwin" name="cwin" onload="Javascript:SetCwinHeight(this)" frameborder="0" scrolling="no"></iframe>function SetCwinHeight(obj){...原创 2019-06-01 18:37:37 · 165 阅读 · 0 评论 -
pc端通过拖放实现添加、删除功能
话不多说上完整代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon bookmark" type=&原创 2018-10-23 14:41:33 · 517 阅读 · 0 评论 -
jQuery提取图像的主色
图片主题色在图片所占比例较大的页面中,能够配合图片起到很好视觉效果,给人一种和谐、一致的感觉。同时也可用在图像分类,搜索识别等方面。通常主题色的提取都是在后端完成的,前端将需要处理的图片以链接或id的形式提供给后端,后端通过运行相应的算法来提取出主题色后,再返回相应的结果。但是过程麻烦所以今天分享个插件直接获取需要插件:1.jquery.js v1.10.2(高版本会报错)2.jq...原创 2018-10-25 18:03:13 · 1616 阅读 · 0 评论 -
Vue + Canvas 实现头像截图上传功能
首先,我们需要两张画布,一个展示选取图片的压缩图,一个展示截取后的图片。废话不多讲上代码如下:HTML<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,in原创 2018-10-19 10:15:39 · 4226 阅读 · 1 评论