- 博客(41)
- 收藏
- 关注
RSS订阅原创 视频上传前获取视频源信息（时长，分辨率等）
视频上传前获取视频源信息（时长，分辨率等）因为视频与图片不同，没有 new video 这种创建方法，所以使用document.createElement(‘video’)，其他方式与获取图片源信息的方法一致，在这里使用了vue+element ui，在el-upload标签中的beforeupload方法，在文件上传前进行信息获取，进行校验并拦截videoSize(file) { return new Promise((resolve, reject) => { co
2021-05-27 11:44:23
1708
原创 图片上传获取图片基本信息（原始分辨率等）
// beforeUpload(file) {// console.log(file)// return new Promise((resolve, reject) => {// const url = window.URL || window.webkitURL// const img = new Image()// img.onload = function() {// file.width = img.width// file
2021-05-27 11:36:26
1725
原创 input去除前后空格和表情
input去除前后空格和表情inputTrim($event) { $event.target.value = $event.target.value.replace(/(^\s*)|(\s*$)/g, '') const reg = /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac
2021-05-27 11:33:06
360
原创 vue+element-ui 在form表单中动态验证v-for循环遍历出来的表单元素
vue+element-ui 在form表单中动态验证v-for循环遍历出来的表单元素在form表单中做url验证，但是input框是动态数组可添加的，渲染时使用v-for遍历数组生成对应数量的input输入框，此时使用表单验证，他只会绑定在第一个渲染的input上，此时就需要使用到from的动态验证要渲染的表单input结构如下 <el-form-item label="标签"> <div v-for="(item, index) in form.input"
2021-04-29 18:26:19
4194
1
原创 react 生命周期钩子详解（1）
react 生命周期钩子详解（1）本文章使用react环境版本为17.0.1，文章中出现的 （已废弃）等标识皆对react 17+版本而言React中组件也有生命周期，也就是说也有很多钩子函数供我们使用1、早期的react生命周期钩子根据下图我们可以将react的生命周期钩子分为四个阶段：初始化、挂载阶段、更新阶段，销毁阶段(1)初始化初始化时期的生命周期钩子是constructor只要这个组件被实例化，被挂载的时候，这个钩子就会被优先调用，他有一个参数 pros 可以调用 super(pr
2021-04-15 09:22:10
1477
原创 vue+element-ui点击按钮实现图片全屏预览
vue+element-ui点击按钮实现图片全屏预览点击随便一个自定义按钮实现图片全屏遮罩预览效果如下按钮代码<el-button icon="el-icon-full-screen" class="clicktobig" type="primary" @click="openViewer" />利用element-ui中的el-image组件，使用el-image-viewer组件实现，组件代码如下<el-image-viewer v-if="payVou
2021-04-14 18:49:48
4186
2
原创 Vue.js 实现ToDoList 待办事项列表（详细注释）
Vue.js 实现ToDoList 待办事项列表（详细注释）实现目标1、添加删除事件2、点击多选框将事件移到已完成事件或未完成事件中3、双击未完成事件可以修改该事件名称（已完成事件不可修改名称）4、点击clear清空全部事件5、点击每个事件后的a标签删除该事件6、利用LocalStorage本地存储实现将数据保存在客户端中7、实现数量统计变化效果实现工具Vue.js实现代码：<!DOCTYPE html><html lang="en"> <head&
2020-12-19 22:55:19
3504
2
原创 ES6面向对象 观察者模式实现video视频的弹幕功能与基础组件
ES6面向对象实现 video 视频的弹幕功能与基础组件实现目标1、打开网页自动播放视频（因为谷歌不支持video标签在有声音的情况下自动播放，所以要设置muted）2、使用观察者模式，监视每一条弹幕3、将每一条弹幕元素加入Set列表中，给每一条弹幕添加定时器，使他运动，当文字尾部移出视频时，将该弹幕元素从Set列表中删除，同时删除该元素的定时器4、实现重写controls组件，暂停，上一个视频，下一个视频5、实现当前视频结束时，播放列表中下一个视频6、实现视频网页开关灯7、ES6面向对象
2020-11-21 19:59:13
1536
4
原创 ES6面向对象三级级联省、市、区菜单
ES6面向对象三级级联省、市、区菜单实现目标：nodejs加ES6面向对象实现省市县的三级级联菜单接口文档项目列表接口index.html:http://10.9.72.220:4001URL :http://10.9.72.220:4001Method :GETDataType : 请求消息: QueryString 响应消息: JSON接口名称1、?type=province ?type=city?type=district2、http://10.9.72.22
2020-11-16 08:04:54
402
原创 node.js+MySql数据库+HTML实现内部查重系统
node.js+MySql数据库+HTML实现内部查重系统实现目标：1、将每个人的项目登记，存入MySql数据库2、在填写时进行实时正则判断，判断每项输入格式是否正确，方便之后进行查重对比3、设置查询按钮，可以在填写提交自己的项目之前看到大家的提交详情4、提交时，在数据库中进行姓名对比，每人只能提交一次，不能重复提交5、提交时，项目网址与项目中文名会在MySql数据库中进行查询对比，双重保险，避免只查询一项造成漏网之鱼6、提交完成后自动跳转到查询页面7、提交填写页面与服务端使用form表单通
2020-11-14 20:53:07
971
1
原创 JavaScript+HTML5+CSS3完美实现ToDoList（详细注释）
JavaScript+HTML5+CSS3完美实现ToDoList实现目标：实现在todolist中添加未完成事件，事件完成后点击checkbox多选框可以将该事件移入donelist列表中，双击事件名称可更改事件名称，点击“-”实现删除该事件，点击清空可清除全部事件，利用localStorsge实现本地长期存储，关闭浏览器再次打开浏览器可直接显示上次对该页面最后操作所显示的样式。整体思路1、title中输入事件，点击回车后添加到未完成事件todolist列表中2、点击todolist列表中未完成
2020-11-03 20:06:54
1938
原创 cookie实现京东五星好评组件评分数据存储
cookie实现京东五星好评组件评分数据存储实现目标：实现京东五星好评部分的组件，实现鼠标经过星星时星星变红色，星星上方出现对应星级的笑脸，同时在评价n星后显示分数为n分，使用cookie缓存使用户在刷新页面后或者重新打开该页面时自动显示上次点击的星星评分，可重新评价，清除浏览器数据缓存后才会显示初始未评价页面。html代码部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&
2020-11-01 17:45:20
2999
7
原创 JavaScript正则表达式基础详解
JavaScript正则表达式基础正则表达式基础正则表达式是一种微型语言正则对于字符串的验证，替换，修改，切换数组等功能写法：var reg=/ 正则内容 /修饰符var reg=new RegExp(“正则内容”,“修饰符”)修饰符是针对正则的一种功能增强g 全局匹配i 不区分大小写m 执行多行匹配正则表达式表示方法：var reg=/a/gi;//查找全局字符串中不分大小写所有的Aavar str=“defAbgac”;var reg=/a/g;//查找是否含有aconso
2020-10-21 08:03:50
538
原创 JavaScript事件基础、事件原理、事件区别与兼容
JavaScript事件基础、事件原理、事件区别与兼容事件基础//侦听事件（侦听的类型,事件回调函数） 侦听类型必须字符串document.addEventListener(“abc”,abcHandler);//创建事件var evt=new Event(“abc”);//把事件向document抛发document.dispatchEvent(evt);//抛发的对象必须和侦听对象是同一个对象//所有继承了EventTarget的对象都可以进行事件侦听和抛发function ab
2020-10-20 21:14:47
277
原创 Event对象、MouseEvent对象、inputEvent对象和focusEvent对象
Event对象、MouseEvent对象、inputEvent对象和focusEvent对象Event事件change事件：多用于表单元素1、用于文本框时，当输入内容被修改并且失去焦点时触发2、select下拉菜单切换选项时触发，不用失去焦点，this.value就是下拉菜单的选项，仅限于下拉菜单，列表不可用3、用select.selectedOptions就是选中的所有选项组成的列表4、checked单选多选时也可以被激活var values=Array.from(select.select
2020-10-20 21:14:25
1821
原创 BOM对象：Location对象、history对象、screen对象、navigator对象解析
BOM对象：Location对象、history对象、screen对象、navigator对象解析BOM浏览器对象模型BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。DOM与BOM的区别BOM是Browser Object Model的缩写，即浏览器对象模型。BOM没有相关标准。不同浏览器定义有差别,实现方式不同。BOM的最根本对象是window。DOMDOM是Document Object Model的缩写，即文档对象模型。D
2020-10-20 21:03:43
298
原创 DOM常见属性
DOM常见属性以下属性必须保证DOM已经添加在页面中，如果没有添加则无法调用client(客户) offset(偏移) scroll(滚动条)宽 clientWidth offsetWidth scrollWidth高 clientHeight offsetHeight scrollHeight client(客户) offset(偏移 scroll(滚动条)位 clientLeft offsetLeft scrollLeft置 clien
2020-10-20 21:01:27
966
原创 DOM的属性与DOM的样式
标题DOM的属性与DOM的样式DOM的属性相同的标签属性：id style className src title checked type placeholder disable value action method完全没有相同的标签属性：rowspan colspan对于部分属性名，标签属性和对象属性是共通的style 可以设置两种值，一种是字符串，一种是对象div.class=“abc”//不能使用classdiv.className="abc"等同于在标签中添加了class属性
2020-10-20 20:58:37
255
原创 DOM节点，DOM属性与DOM对象的样式
DOM节点，DOM属性与DOM对象的样式Document Object Model 文档对象模型DOM是针对HTML和XML文档的一个APIDOM描绘了一个层次化的节点树定义了访问和操作HTML文档的标准方法回流当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建过程叫做回流(reflow)。重绘当render tree中的一些元素发生变化，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
2020-10-20 20:55:26
192
原创 JavaScript时间日期转中文显示与测试代码运行效率案例
JavaScript时间日期转中文显示与测试代码运行效率案例案例：计算i从0到1000000再到6000000的时间 var time = new Date().getTime(); var timeList = []; timeStart(); function timeStart() { timeList.length = 0; timeList[0] = new Date().getTime(); } var sum = 0; for (var i =
2020-10-20 20:49:44
338
原创 JavaScript日期时间详解
JavaScript日期时间详解日期与时间获取时间对象var date=new Date()时间的获取方法date.toString()date.toLocaleString()date.toLocaleDateString()date.toLocaleTimeString()date.toUTCString()Date() 返回当日的日期和时间。getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。getDay() 从 Date 对象返回一周中的某一天 (0
2020-10-20 20:46:36
520
原创 JavaScript内建对象Math数学方法
JavaScript内建对象Math数学方法Math数学运算方法Math的属性：E 返回算术常量 e，即自然对数的底数（约等于2.718）。LN2 返回 2 的自然对数（约等于0.693）。LN10 返回 10 的自然对数（约等于2.302）。LOG2E 返回以 2 为底的 e 的对数（约等于 1.414）。LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。PI 返回圆周率（约等于3.14159）。SQRT1_2 返回返回 2 的平方根的倒数（约等于 0.707）。SQ
2020-10-20 20:43:40
110
原创 JavaScript内建对象Number，String
JavaScript内建对象Number，String一、Numbervar a=3//是栈中的3，number类型var b=new Number (3)// 内建对象Number，是堆中的3，通过对象创建数值型对象，可以对它进行扩展方法，Number类型b既能接受堆中的数据类型也能接受栈中的a只能接受栈中的这两个不相同 console.log(a===b)//falseNumber的属性：1、MAX_VALUE 可表示的最大的数。2、MIN_VALUE 可表示的最小的数。3、NaN
2020-10-20 20:40:31
127
原创 JavaScript循环结构控制语句（while，for，do...while）的解析
JavaScript循环结构控制语句（while，for，do…while）的解析循环语句判断条件，只要满足条件，就会不断的从头到尾重复执行，直到不满足条件时，跳出循环while （表达式）{当表达式 为true 时，执行语句，为false 不执行}循环次数由初始值，条件和变化量来决定死循环出现的两种情况，1、条件不对，2、没有向条件外运行的过程while循环有3个重要的部分，1、起始值，2、条件，3、向条件外允许的过程条件 隐式转换为布尔值，进入循环必须依靠条件，跳出循环时，不一定依
2020-10-12 22:36:36
187
原创 选择结构控制语句（if，switch）的解析
选择结构控制语句（if，switch）的解析if使用三目运算符不能判断一次，解决多个问题，但是 if 语句可以实现if（条件）{满足条件后执行的内容；}else{不满足条件时执行的内容}条件会自动隐式转换成布尔值当一个条件不能包含所有需求时，可以用 || 增加条件范围当一个条件包含内容超出需求时，可以用 && 缩减条件范围如果条件后执行的语句块仅有一句，可以省略{}if(a>5){b=6;}可以写成if(a>5) b=6;因为执行语句块不只一句，
2020-10-12 22:33:02
228
原创 利用JavaScript数组方法reduce实现every，some，concat，filter效果
利用reduce实现 concatvar arr=[6,9,7,4,5]; var str=arr.reduce(function(value,item,index,arr){ return value+"$"+item; }); console.log(str);利用reduce实现 everyvar arr=[6,9,7,4,5];var bool=arr.reduce(function(value,item){
2020-10-12 22:18:42
188
原创 JavaScript中数组的冒泡排序，快排，选择排序示例与sort方法的排序与乱序
JavaScript中数组的冒泡排序，快排，选择排序示例与sort方法的排序与乱序排序排序算法中最基础的算法类型数据驱动显示：根据数据重构页面冒泡排序 var arr=[3,38,5,44,15,36,26,27,47,2,46,4,19,50,48]; for(var i=0;i<arr.length-1;i++){ for(var j=i+1;j<arr.length;j++){ if(arr[i]>arr[j
2020-10-12 22:16:12
123
原创 新增的ES6数组方法 every，some，filter，reduce，flapMap，reverse解析与重构
新增的ES6数组方法 every，some，filter，reduce，flapMap，reverse解析与重构everyevery判断数组中所有元素是否都满足条件，返回一个布尔值（有一个不是就false） var arr=[2,4,6,8,10]; var bool=arr.every(function(item,index,arr){ return item>3; }); console.log(bool);重构every var arr=[
2020-10-12 22:11:30
273
原创 JavaScript数组join，forEach，map方法解析与重构
JavaScript数组join，forEach，map方法解析与重构joinvar str=arr.join();将数组转换为字符串，并且返回字符串join括号中是连接符，默认是逗号。（“-”），数字，true都会隐式转换为字符串，undefined不会显示，null转换为字符串空字符串，会将数组元素直接首尾相连，没有连接符("")重构joinvar arr=[1,2,3,4,5];function join(arr,separator){ if(separator=
2020-10-12 22:04:51
493
原创 JavaScript中数组去重的多种方法
JavaScript数组去重方法改变原数组去重：var arr=[1,4,2,3,1,4,2,1,2,3,4,1,1,2,3,2,1]; function removeDuplication(arr){ for(var i=0 ;i<arr.length;i++){ for(var j=i+1 ;j<arr.length;j++){ if (arr[i]===arr[j]
2020-10-12 22:02:00
101
原创 JavaScript数组isArray，from，slice，concat，indexOf，lastIndexOf 的解析及重构
JavaScript数组isArray，from，slice，concat，indexOf，lastIndexOf 的解析及重构数组的静态方法根据数组的类型创建了一个新的数组对象（数组的实例化对象）var arr=new Array(1,2,3);用数组的实例对象调用的方法，就叫做实例化对象方法arr.push();Array.from();这种方法没有使用实例化数组对象调用，而是直接使用数组类型调用方法，这种方法叫静态方法，类属判断，不是单独个体判断Array.isArray();判断
2020-10-12 21:59:40
294
原创 JavaScript数组中splice方法解析与重构
JavaScript数组中splice方法解析与重构splicesplice包括 开始，删除数量，添加的元素们，会返回被删除元素所组成的新数组arr.splice();不填时，创建一个空数组返回arr1=arr.splice(3);代表从下标是三开始删除到数组尾部，并将删除的元素放在新数组中返回arr1=arr.splice(-1);可以有负整数，从后往前，从倒数第一位删除到尾部arr1=arr.splice(3,1);从下标3开始删除一个元素，并且返回这个被删除的元素组成的新数组arr1=a
2020-10-11 20:05:12
958
原创 JavaScript数组与数组方法push，shift，unshift，pop重构
JavaScript数组与数组方法push，shift，unshift，pop重构对象类型的衍生体，是个对象,如果内容数据类型种类多会造成效率低只有值，没有key，可以出现重复值；按位置排列的，从零开始的数据顺序，相当于object中的key数组中的key默认隐式转换为数值类型作为下标，而对象为字符类型var arr1=[1,2,3,5,6];//123undefined56var arr2=[1,2,3,null,5,6];//123null56var arr3=[1,2,3,undefine
2020-10-11 20:01:30
202
原创 JavaScript自动轮播图
JavaScript自动轮播图1、布局2、定义当前第几张图片和应该向什么方向运动3、将需要放置的图片根据方向放在前面或者后面4、将整个容器向左或者向右移动，5、完成后将上一次的图片删除 // imgCon 放置所有图片的容器 // dotList 放置小圆点列表 // bnList 放置左右按钮的数组 // imgList 放置所有图片的数组 // pos是确定当前是第几个图片 // direction 图片
2020-10-06 20:42:19
374
原创 JavaScript函数基础详解
JavaScript函数基础详解将代码变成语句块的形式，通过调用函数名，可以完成该语句块所有语句函数名 命名规则和变量命名规则一样，都是驼峰式命名，见名思意，函数名表达函数执行的作用当执行到当前script标签时，预先将当前script标签中所有的命名函数先存储在堆中，并且在栈中给他定义函数名引用该函数地址script标签中的函数一旦创建成功，后面的所有script标签中都可以使用该函数，但是再当前script标签前的script标签不能使用，所以最好把装有函数的script写在最前面三种函数的
2020-10-06 20:03:18
134
原创 JavaScript对象与其复制清除方法简析
标题JavaScript对象详解var obj{属性1：属性值1， // 属性名=>key 不能重复属性2：属性值2， // 属性值=>value 是该属性的唯一值 (键值对数据 键=>key 值=>value 有键必有值)}var obj{a:1,b:2,c:3,}console.log(obj.a); //打印对象obj下属性a的value值obj.d=obj.a + obj.b; // 创建并给obj的d属性赋值，不需要vardocument.writ
2020-10-06 19:43:55
386
原创 利用原生JS写简单计算器
利用原生JS写简单计算器利用原生JS来写一个简单的计算器，其中主要是对利用JS新建标签和鼠标事件的应用<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document
2020-10-05 21:04:00
2258
2
原创 JavaScript运算符类型及用法
标题JavaScript运算符算数运算符 + - * / %1、 数值的+ ， - ，* ， / , %(取模)和数学运算完全相同2、 小数点运算时会产生误差3、 - * / % 都是隐式转换成数值，不论有没有字符+ 运算1、 如果是字符和非字符相加，则会自动将非字符隐式转换成字符 String（） 此时+为拼接符首尾相连2、 数值 + NaN = NaN3、 true + false = 14、 如果一侧是布尔值，重要是另一侧值，会根据另一侧转换5、 如果两测都没有字符或者数值，就会
2020-09-29 10:20:57
1817
2
原创 简单的理解冒泡排序
冒泡排序冒泡排序，是一种较简单的排序算法。冒泡排序就是把小的元素往前调或者把大的元素往后调。比较是相邻的两个元素比较，交换也发生在这两个元素之间。所以，如果两个元素相等，是不会再交换的；如果两个相等的元素没有相邻，那么即使通过前面的两两交换把两个相邻起来，这时候也不会交换，所以相同元素的前后顺序并没有改变。它重复地走访过要排序的元素列，依次比较两个相邻的元素，如果顺序（如从大到小、首字母从Z到A）错误就把他们交换过来。走访元素的工作是重复地进行直到没有相邻元素需要交换，也就是说该元素列已经排序完成。
2020-09-29 09:49:17
302
原创 关于CSS3中动画属性的基本知识
关于CSS3中动画属性的基本知识animation顾名思义为动画的意思。Animation应用在页面DOM上 使其产生动画的效果。在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Key s",我们把他叫做“关键帧”，玩过flash的朋友可能对这个东西并不会陌生。 animation vs transition 相同点：都是随着时间改变元素的属性值。 不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css
2020-09-29 09:47:21
619
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人