- 博客(86)
- 收藏
- 关注
RSS订阅原创 切换el-from表单不触发验证
开发时遇到一个问题，复用element表单，通过v-if控制显示的表单项，一个状态是非必填输入框，另一个是必填输入框。从非必填的表单项切换为必填表单项后，去验证表单会出现验证通过的情况，但是必填项其实为空。<!-- 电话上报 && 其他--><template v-if="formData.reportingMethod === 1 || formData.reportingMethod === 4"> <el-form-item
2021-11-16 09:58:31
1417
原创 jQuery获取节点本身及内容$(“#el“).prop(“outerHTML“)
原生JS DOM里有一个内置属性 outerHTML，用来获取当前节点的html代码(包含当前节点),而jQuery可以通过prop(“outerHTML”)拿到。 var max59 = $(".table-dark #max_59").prop("outerHTML") $(".table-dark #max_59").remove() $(".table-dark #max_51").before(max59)jQuery设置outerHTML$('ul').pr
2021-07-09 14:09:22
339
转载 继承封装示例
继承创建一个或多个类的专门版本类方式称为继承（Javascript只支持单继承）。 创建的专门版本的类通常叫做子类，另外的类通常叫做父类。 在Javascript中，继承通过赋予子类一个父类的实例并专门化子类来实现。在现代浏览器中你可以使用 Object.create 实现继承.JavaScript 并不检测子类的 prototype.constructor (见 Object.prototype), 所以我们必须手动申明它.在下面的例子中, 我们定义了 Student类作为 Person类的子类
2021-03-24 16:04:03
141
转载 闭包由浅入深
function init() { var name = 'Mozilla'; // name is a local variable created by init function displayName() { // displayName() is the inner function, a closure alert(name); // use variable declared in the parent function } displayNam
2021-03-19 17:45:17
222
原创 ES5/ES6/ES7 特性
var已经被弃用，使用const和let大多数时间如果变量不会被重新分配使用const。 变量会改变的情况下使用let。使用for(elem of collection)而不是for(elem in collection)for of是新的，for in是旧的。 for of解决了for in的问题。举个例子，你可以像这样迭代一个对象的所以键/值对for (const [key, value] of Object.entries(someObject)) { console.log(k
2021-03-19 10:18:04
340
原创 美化滚动条
<!DOCTYPE html><html lang="zh-CN"><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"> <title>.
2021-03-16 14:45:09
66
原创 使用链式 setTimeout() 模拟播放器
<!DOCTYPE html><html lang="zh-CN"><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"> <title>.
2021-03-09 21:19:21
153
原创 重复的定时器 setInterval 存在的问题
使用 setInterval() 创建的定时器确保了定时器代码规则地插入队列中。这个方式的问题在于，定时器代码可能在代码再次被添加到队列之前还没有完成执行，结果导致定时器代码连续运行好几次，而之间没有任何停顿。幸好，Javascript 引擎够聪明，能够避免这个问题。当使用setInterval() 时，仅当没有该定时器的任何其他代码实例时，才将定时器代码添加到队列中。这确保了定时器代码加入到队列中的最小时间间隔为指定间隔。...
2021-03-08 10:46:11
1895
原创 视频监控hls.js用法
<div class="x-flex-item"> <div class="video-item success"> <video id="live" rtmpPath="http://spjk.xrwhcm.cn/live/44020000001320000093.m3u8?auth_key=1645764049-0-0-107386e412fb4467aed32ef4b779b556yes" type="application/x-mpegURL" muted&g..
2021-03-04 13:26:56
5372
4
原创 CSS字体渐变
<h1 class="txt">字体渐变</h1>.txt { background: linear-gradient(to bottom, #ffffff,#ffffff, #08b9f0); background-clip: text; -webkit-background-clip: text; color: transparent;}
2021-03-03 09:59:12
119
原创 canvas 截图
<!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> body{ margin: 0; }
2021-03-02 11:11:19
246
1
转载 commit之后，想撤销commit
写完代码后，我们一般这样git add . //添加所有文件git commit -m “本功能全部完成”执行完commit后，想撤回commit，怎么办？这样凉拌：git reset --soft HEAD^这样就成功的撤销了你的commit注意，仅仅是撤回commit操作，您写的代码仍然保留。说一下个人理解：HEAD^的意思是上一个版本，也可以写成HEAD~1如果你进行了2次commit，想都撤回，可以使用HEAD~2至于这几个参数：–mixed 意思是：不删除工作空
2021-03-01 09:02:48
126
原创 CSS各种选择器用法
选择器 例子 例子描述 CSS element+element div+p 选择紧接在 div 元素之后的所有 p 元素。 2 element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。 3 [attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2 [attribute|=va...
2021-02-26 13:53:06
113
原创 apply()用法
apply() 方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。注意：call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组。语法：func.apply(thisArg, [argsArray])用 apply 将数组各项添加到另一个数组我们可以使用push将元素追加到数组中。由于push接受可变数量的参数，所以也可以一次追加多个元素。但是，如果push的参数是数组，它会将该数
2021-02-24 15:11:24
12897
原创 Math.max.apply/Math.min.apply获取数组最大最小值
用Math.max/Math.min求得数组中的最大/小值/* 找出数组中最大/小的数字 */var numbers = [5, 6, 2, 3, 7];/* 使用Math.min/Math.max以及apply 函数时的代码 */var max = Math.max.apply(null, numbers); /* 基本等同于 Math.max(numbers[0], ...) 或 Math.max(5, 6, ..) */var min = Math.min.apply(null, numb
2021-02-24 11:31:32
394
原创 call()用法
call() 用法function.call(thisArg, arg1, arg2, …)如果没有传递第一个参数，this 的值将会被绑定为全局对象。使用 call 方法调用父构造函数在一个子构造函数中，你可以通过调用父构造函数的 call 方法来实现继承。下例中，使用 Food 和 Toy 构造函数创建的对象实例都会拥有在 Product 构造函数中添加的 name 属性和 price 属性,但 category 属性是在各自的构造函数中定义的。function Product(name,
2021-02-23 17:31:41
3111
原创 页面全屏与内容全屏
默认状态内容全屏页面全屏styleshtml{background-color:seagreen}body{position:absolute;width:100%;height:100%;margin:0;background-color:salmon;overflow:hidden}.wrap{position:absolute;width:500px;height:500px;left:50%;top:50%;transform:translate(-50%,-50%)}#box{
2021-02-23 16:13:02
184
原创 queryselector和getElementby区别
getElementsBy 包含动态添加的内容querySelector 不包含动态添加内容<ul> <li></li> <li></li> <li></li> <li></li> <li></li></ul><script>var ul = document.getElementsByTagName('ul')[0];var li
2021-02-23 13:09:54
154
原创 canvas 取色器
CanvasRenderingContext2D.getImageData() 返回一个ImageData对象，用来描述canvas区域隐含的像素数据，这个区域通过矩形表示，起始点为(sx, sy)、宽为sw、高为sh。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
2021-02-05 14:27:19
378
原创 两个不同来源数据合并的图表
一个图表中显示两个不同来源的数据思路两份数据转成统一结构（如果两份数值类型不一样还需要单独转成统一类型，我的项目excel返回的数值，需要自己算百分比）合并数据补齐日期：比较数据日期取出最大值最小值，并计算出相差天数，补全缺失日期；补齐数据日期function fnFillTheDataDate(){ // 补充日期 var oData= { "桩基":{"data":[5,10,15],"date":["2020-01-01","2020-01-10","2020-01-5"
2021-02-04 15:07:44
470
转载 max-age 用法
https://mp.weixin.qq.com/s?__biz=MzU5MzAzMTc2OQ==&mid=2247484300&idx=1&sn=7622b3ffd487fede1962d4a02e2d2e8e&chksm=fe17e4bac9606dac
2021-01-08 10:53:09
871
原创 改变浏览器URL不跳转 history.pushState
if(location.search){history.pushState(’’,’’,location.href.split(location.search)[0]+’?xpage=’+currentmenu); // change url and don’t jump}else{history.pushState(’’,’’,location.href+’?xpage=’+currentmenu); // change url and don’t jump}...
2020-10-20 14:59:08
737
转载 利用jQuery.prop(“outerHTML“)获取包含自身在内的HTML元素的HTML代码
JQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码，然而我们有时候的确需要，可以通过jQuery.prop(“outerHTML”)的方式设置。很多jQuery的使用者都对这一问题深感疑惑。为什么在众多方便的各种获取属性和设置属性的方法中就不能像DOM中一样直接设置html元素的outerHTML呢？因为原生JS DOM里有一个内置属性 outerHTML （看清大小写哦，JS是区分大小写的）用来获取当前节点的html代码(包含当前节点)，所以用jQuery的prop
2020-10-15 15:23:17
352
转载 Ajax请求中的async:false/true的作用
AJAX 同步/异步区别async. 默认是 true，即为异步方式，$.ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发$.ajax里的success方法，这时候执行的是两个线程。async 设置为 false，则所有的请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。var temp;$.ajax({ asyn...
2020-02-21 14:16:47
109
原创 数组的队列方法
队列数据结构的访问规则是FIFO(Fist-In-Fist-Out，先进先出)。队列在列表的末端添加项，从列表的前端移除项。shift();移除数组中的第一项并返回该项，同时将数组长度减 1。结合使用shift()和push() 方法，可以像使用队列一样使用数组。//先进先出var colors = new Array(); //创建一个数组var count = colors.push(...
2020-02-03 00:26:22
213
原创 数组栈方法
栈是一种 LIFO(Last-In-First-Out,后进先出) 的数据结构，也就是最新添加的项最早被移除。而栈中项的插入（推入）和移除（弹出），只发生在一个位置——栈的顶部。ES为数组专门提供了push() 和 pop() 方法，以便实现类似栈的行为。push();逐个添加到数组末尾，并返回修改后数组的长度。pop(); 从数组末尾移除最后一项，减少数组的length值，让后返回移除的项。...
2020-02-02 23:55:31
187
原创 JS重排序方法
数组中已经存在两个可以直接用来重排序的方法：sort()和reverse()。这种方式在很多情况下不是最佳方案。因此sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值之前；比较函数接收两个参数，如果第一个参数应该位于第二个参数之前则返回一个负数，如果两个参数相等则返回0，如果第一个参数应该位于第二个参数之后则返回一个正数。下面使用比较函数：//升序functio...
2020-02-02 23:38:20
283
原创 break和continue
continue:满足条件后会在递增之前退出循环，但接下来执行的是下一次训循环；var num = 0;for (var i = 1; i < 10; i++) { if(i%5 == 0){ continue; } num++; console.log(num); //12345678}alert(num) //8break:满足...
2020-01-29 20:54:40
79
转载 SEO网站标题title中用什么标点符号好？
关于“SEO网站标题title中用什么标点符号好”几乎是每个想要做好网站优化的站长们，在初次建站时必定遇到的问题，也就是我们要使用什么样的标点符号来写网站的title和meta信息？用什么样的分隔符来分隔关键词？既能做到词与词之间的关联度，又能让搜索引擎区分开来。这里就来说一下各种符号的使用区别和功能。一、逗号“,” 注意，这里的逗号有两种，一种是中文状态下的,一种是英文状态下的。不要以为都是逗...
2019-12-10 14:53:56
869
原创 判断设备的不同显示不同页面
var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 ...
2019-12-02 11:00:47
349
原创 ES5-03 事件监听 - 委托(捕获与冒泡)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #wrapDiv, #innerP, #textSpan{ ...
2019-11-25 16:04:22
149
原创 ES5-03 事件监听 - 委托（事件委托）
事件委托1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
2019-11-25 15:36:25
159
原创 ES5-03 事件监听 - 委托
事件绑定在dom元素上绑定 ,不推荐js代码中绑定（多个绑定只执行最后一个）绑定事件监听 （多个监听逐条执行）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi...
2019-11-25 15:26:18
173
原创 vue监听浏览器窗口的变化，随着窗口变化调整滚动容器高度
组件<template><div class="scroll-bar-box" :style="{height:styles.height,padding:styles.padding}"><slot></slot></div> </template><script>export default...
2019-10-18 11:01:21
814
原创 ES5-01创建对象、数据类型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
2019-10-17 15:10:13
122
原创 自动化构建一 requirejs
模块化可维护性和复用AMD/CMD是什么以及区别？commonJS是一种规范 Nodejs 是这种规范的实现AMD/CMD是从commonjs中诞生的seajs 遵循CMD的规范requirejs 遵循AMD的规范AMD 异步模块定义 提前执行 依赖前置CMD 通用模块定义 延迟执行 依赖就近（按需加载）优点：不浪费资源 缺点：等待时间长AMD 用法<!----&g...
2019-09-24 23:49:20
143
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人