- 博客(53)
- 收藏
- 关注
RSS订阅原创 vue flv.js实时播放监控视频 .flv 格式
vue实现 .flv 视频流播放一、安装 flv.jsnpm install flv.js -S二、引入项目import flvjs from 'flv.js/dist/flv.js'三、使用var self;export default { data() { return { flvPlayer: null, }; }, props: { videoSrc: { type: String } },
2021-01-26 17:38:47
3138
2
原创 vue 导出excel文件
vue 导出excel文件一、安装 xlsxnpm install xlsx -S二、创建 excel.jsimport XLSX from 'xlsx'function autoWidthFunc (ws, data) { // set worksheet max width per col const colWidth = data.map(row => row.map(val => { // if null/undefined if (val == n
2021-01-26 13:47:27
435
原创 es5类的特性——继承
es5类的特性关于javascript类的特性，我们都知道有封装、继承、多态；这些特性也许不会经常使用到，但当看到它们时，要能认识；在面试过程中，也是很多面试人员经常提到的；在此，通过 es5 例子的形式来描述类的特性 —— 继承。一、基本类写法//一般方法名首字母大写function Person(){ this.name = '张三'; this.age = 20;}var p = new Person();console.log(p.name+'--'+p.age);二、在
2021-01-24 17:20:39
337
原创 es6 类的继承 super() 例子简述
es6 类的继承 super() 例子简述es6提供了类 —— class：class：可理解为一函数（function），由于它本质还是一个function，拥有一个的prototype属性，当实例化类时，会把它的 porototype 属性赋值给实例化对象的__proto__ 属性。关于 class 有几个关键词，下面讲述一下：1、constructor 方法是默认的构造方法，在实例化对象时会自动调用该方法；constructor 里面定义属性。2、通过 extends 和 super 继
2021-01-24 16:44:48
602
原创 echarts折线图各段设置不同颜色
echarts折线图各段设置不同颜色可以通过设置 visualMap 属性，来控制不同线段的颜色；文档连接： https://echarts.apache.org/zh/option.html#visualMap；下面我们选择 分段型 讲述：1、设置 visualMap 属性：type: ‘piecewise’,2、设置 是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在。show: ‘false’,3、设置 指定用数据的『
2021-01-24 15:34:47
12330
原创 经纬度wgs84 转 gcj02
高德地图默认的坐标系为 火星坐标系；当我们拿到的是 wgs84 坐标时，可通过下面的方式批量转换。//wgs84 转 gcj02let transLng = [];let defaultArr = [ [118.857173323590020,28.932497799733710], [118.853702543937290,28.932487070821708], [118.854378461796610,28.934088349697618], [118.8559609664255
2021-01-04 10:45:39
1566
原创 js数字前补0或数字间隔
固定数字框补0或者间隔描述：数字前面补零；用于固定位数的数字，不满个数，前面补0的操作；另外可以通过此方法修改可作为数字不同的间隔let res_count = 1536;let numberStr = res_count.toString();let resultStrArr = null;if(numberStr.length < 5){ let numb = numberStr.length, addZore = '', newVal = '';
2021-01-03 11:05:13
634
原创 js字符串方法汇总
js 字符串方法汇总大家都知道，js关于字符串的方法有很多，有些字符串的方法与数组的方法用法相似，只是名称不同，从而会导致，使用不太熟练而混淆。当然，笔者也会有这样的情况，故将这些方法使用详情都汇总，便于查阅。一、charAt() 返回指定索引位置处的字符表达式strObj.charAt(index)参数strObj 必选项。任意 String 对象或文字。index 必选项。想得到的字符的基于零的索引。有效值是 0 与字符串长度减 1 之间的值。说明charAt 方法返回一个字符值，
2020-07-05 18:32:33
549
原创 uniapp通过webview调用H5页面
tip：网页内 iframe 的域名也需要配置到域名白名单。tip：开发者工具上，可以在 web-view 组件上通过右键 - 调试，打开 web-view 组件的调试。tip：每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件。tip：web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。tip：在 iOS 中，若存在JSSDK接口调用无响应的情况，可在 web-view 的 src 后面加个#wechat_redirect解决。t
2020-06-20 16:16:05
15155
4
原创 TortoiseGit可能遇到Permission denied (publickey).
TortoiseGit可能遇到Permission denied (publickey).一、默认情况下github使用https访问的时候使用tortoistgit可以直接使用，但是如果在git Bash上使用或者命令行使用的时候就会报下面错误；Warning: Permanently added the RSA host key for IP address 'xx.xx.xx.xx' to the list of known hosts.git@github.com: Permission de
2020-05-25 09:14:10
1912
原创 vue hls.js 循环多个实时监控视频(m3u8格式)列表
工作当中难免会遇到使用 .m3u8 格式的视频，也就是视频流；项目中要怎么展示这种视频流呢？多个视频同时显示时，怎么能使视频流都能正常播放呢？接下来在 vue 中使用 hls.js 来实现视频流播放功能。一、安装 hls.js```npm i hls.js -S```二、html 中渲染video节点<video ref="videoContain" :src="videoSrc" controls ></video>三、初始化并加载 hls.jsimport H
2020-05-11 21:36:51
4104
原创 pm2 安装及指令介绍
pm2 安装及指令介绍一、pm2 使用node安装使用node环境进行安装，直接输入下面指令：npm install -g pm2二、pm2 使用指令介绍启动进程/应用pm2 start bin/www 或 pm2 start app.js重命名进程/应用 pm2 start app.js --name wb123添加进程/应用watch pm2...
2020-01-15 16:33:34
210
原创 vue-cli 配置及项目创建
vue-cli 配置及项目创建一、vue-cli 配置nodejs 版本要求Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。nodejs官网地址：https://nodejs.org/en/卸载 vue-cli 旧版本，（如果之前未安装过旧版本，可忽略此步）；npm uninstall vue-cli -g 或 yarn glob...
2019-11-29 16:01:06
225
原创 vue cli3 参数配置
vue cli3 配置module.exports = { // 部署应用包时的基本URL。 // https://www.app.com/ => '/' // https://www.app.com/my-app/ => '/my-app/' // 如果值为空字符串 '' 或者是相对路径 './', 都会被链接为相对路径 baseUrl: process.en...
2019-11-29 15:16:17
633
原创 typescript配置 —— vs code上运行
typescript配置 —— vs code上运行一、全局安装 typescript1.npm 安装 typescriptnpm install -g typescript2.测试是否安装成功a.新建 index.ts 文件b.运行index.ts文件tsc index.ts二、配置 vs code 编辑器1. 进入项目目录，输入下面命令tsc --init2.打开 ...
2019-11-29 15:01:35
295
原创 js 浅拷贝和深拷贝原理
js 浅拷贝和深拷贝原理拷贝，从字面意思上解释即为将原有的东西，复制一份出来；在代码中，我们如何解释呢？在代码中，拷贝分为了两种形式：一种是浅拷贝，一种是深拷贝。什么是浅拷贝通俗的讲：就是把父对象的内容，全部拷贝给子对象。然而，实际上是，子对象只获得了父对象的一个内存地址。那么，子对象改变值，父对象的值也会被篡改。浅拷贝 ---- 此拷贝会改变原有值1.赋值拷贝 var p = ...
2019-08-03 10:47:07
492
原创 javascript sort()排序用法
javascript sort()排序用法sort() 方法用于对数组的元素进行排序，并返回数组。默认排序顺序是根据字符串UniCode码。因为排序是按照字符串UniCode码的顺序进行排序的，所以首先应该把数组元素都转化成字符串（如有必要），以便进行比较。语法：arrayObject.sort(sortFunction);参数arrayObj 必选项。任意 Array 对象。...
2019-07-07 19:33:00
3193
原创 javascript 不同数据类型判断
js 类型检测在开始接触js时，我们会先了解js的类型。js中有以下几种类型：主要（基本）数据类型是：字符串 —— string数值 —— number布尔 —— boolean复合（引用）数据类型是：对象 —— object数组 —— array特殊数据类型是：NullUndefined对于以上几种类型，用什么方式来进行检测呢？一、typof var obj = ...
2019-07-04 11:25:13
221
原创 css3 图形绘制集合
css3 图形绘制集合根据 css3 的强大功能，灵活运用各种属性，绘制不同的图形便于使用，下面为各种不同图片的代码，使用时可直接引入类名。正方形#square { width: 100px; height: 100px; background: red;}长方形#rectangle { width: 200px; height: 100px; b...
2019-07-02 10:52:32
180
原创 CSS3 transition 过渡
CSS3 transition 过渡CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击，获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。transition:[<transition-property> || <transition-duration> || <transition-t...
2019-07-02 09:29:33
638
原创 jquery extend用法
jquery extend用法jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。jQuery 的扩展方法 extend 是我们在写插件的过程中常用的方法，当然，如果你没有用到，至少也见过了；通常我们使用 jQuery 的 extend 时，大都是为了实现默认字段的覆盖，即传入某个字段的值，则使用传入值，否则使用默认值。下面来看看详细的介绍吧。一、合并$.exte...
2019-06-06 12:08:38
482
原创 js call、apply使用总结
js call、apply使用总结一、call、apply 语法介绍apply() ：调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。语法：apply([thisObj [,argArray] ]);说明：如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 ...
2019-06-04 08:25:23
219
原创 js 各种正则表达式一览表
js 常用正则表达式一、关于数字的正则表达式数字：^[0-9]*$n位的数字：^\d{n}$至少n位的数字：^\d{n,}$m-n位的数字：^\d{m,n}$零和非零开头的数字：^(0|[1-9][0-9]*)$非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$正数、...
2019-05-24 19:52:39
374
原创 css cursor用法
css cursor用法css 属性 cursor 的用法，是改变元素内光标样式；想必各位都很熟悉，关于它的值，你能知道几个呢？下面将 cursor 用法总结如下：cursor: pointer; /* 手*/cursor: crosshair; /* 十字准心 */cursor: auto; /* 自动 */cursor: default; /* 默认*/cursor:...
2019-05-23 19:41:59
6148
原创 vue 请求数据方式
vue 请求数据方式Vue 请求数据方式有：vue-resource、axios、fetchJsonp三种。其中，vue-resource 是 Vue官方提供的插件，axios 与 fetchJsonp 是第三方插件。一、vue-resource 请求数据npm 安装 vue-resourcenpm install vue-resource --save说明：使用 --save 是...
2019-05-20 22:15:46
6055
原创 Vue 安装与项目搭建
Vue 安装与项目搭建一、Vue 安装项目选择 Vue 框架开发，需要搭建 vue 依赖环境；前面介绍了关于 nodejs 环境搭建与配置 ，那么接下来在安装 vue 就很容易了。一个 Vue 项目也许不一定会用到 Vue 全家桶，但为了方便，可以先全部安装。打开命令行，依次输入下面指令npm install -g vuenpm install -g vue-routernp...
2019-05-20 20:41:24
507
原创 Nodejs 环境搭建及基本配置（二）
nodejs 环境搭建及基本配置（二）前面一章节讲述了 nodejs 的安装 ，本节继续讲述 nodejs 如何配置。一、nodejs 设置全局安装路径在上一章节讲到，将 nodejs 安装在 D 盘目录下，然而在安装全局软件包的时候，node 会将这些安装包默认安装在 ：C:\Users\Administrator 路径下，当然，这也不是我们所希望的；此时，我们需要手动配置安装路径。...
2019-05-20 19:02:18
368
原创 ajax异步请求——form表单提交 及 表单序列化提交
ajax异步请求AJAX介绍AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML），它不是一种新的编程语言，而是一种使用现有标准的新方法。AJAX 基于 JavaScript 和 HTTP 请求（HTTP requests）的，因为AJAX 通过在后台与服务器交换少量数据的方式，允许网页进行异步更新。即在不重载整个页面的情况下，对...
2019-05-19 22:21:56
1753
原创 Ajax 异步请求几种方式—— load、get、post、getJSON
Ajax 异步请求几种方式—— load、get、post、ajax、getJSONAjax 异步请求的方式有很多，当前这里所介绍的都是建立在 Jquery 库的基础上使用的请求方式；每种请求方式都有它的可取之处，下面通过实例来一一介绍。Ajax 请求 —— load定义：.load() 方法从服务器加载数据，并把返回的数据放置到指定的元素中。<!DOCTYPE html&g...
2019-05-19 18:58:46
838
原创 js 原生异步请求 XMLHttpRequest请求
js 原生异步请求 XMLHttpRequest请求XMLHttpRequest 用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行数据更新。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）；故在使用上请注意浏览器的兼容。关于 XMLHttpRequest 对象的说明，在此不做详细叙述，所有的解释，...
2019-05-19 16:37:20
1486
原创 css3 animation动画使用
css3 animation动画本篇仅介绍 animation 的语法，兼容性；以及动画使用例子，便于入门；在底部有提供 动画 深度剖析的博客链接。animation 语法animation 有八个属性：animation: name duration timing-function delay iteration-count direction fill-mode play-state;...
2019-05-19 15:34:39
747
原创 document.compatMode 属性 获取浏览器宽高、滚动条宽高等
document.compatMode属性document.compatMode用来判断当前浏览器采用的渲染方式。官方解释：BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启。当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；当document.compatMode等于C...
2019-05-19 12:58:26
206
原创 jquery on 与 bind 事件绑定区别
jquery on 与 bind 事件绑定区别语法说明：on().on(events [,selector][,data],handler)bind().bind(events [,eventsData],handler)区别说明：on() 比 bind() 多了一个参数： selectorselector 参数存在意义：事件冒泡进行事件委托子元素过多，给每...
2019-05-19 12:29:16
302
原创 CSS3 @font-face使用详解，字体引入
CSS3 @font-face使用@font-face是CSS3中的一个模块，可以把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，在Web的开发中使用字体不怕只能使用Web安全字体。字体下载地址http://www.dafont.comhttp://www.google.com/webfonts@font-face 兼容性Firefox、Chrome、Sa...
2019-05-19 11:49:21
2481
原创 css 三角形画法
css 三角形项目中，会有一些边角的位置使用的三角形的地方，这时候如果没有刻意改变，可使用 css 来实现。使用 border 实现三角形的画法：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>triangle 实现</title&...
2019-05-19 11:26:36
277
转载 js 内存泄漏及解决方案
Js内存泄漏及解决方案说明：如果你对苦燥的文字很讨厌，没有耐心看下去，请先收藏，等你哪个时间段有兴致了再来看这篇文档；不确定一定能解决你所面临的问题，但相信一定会对你有帮助！对于Js内存泄漏是让人很无意就疏忽的，在使用 js 编程中，我们不得不注意这个问题，否则运行在终端上会让设备出现异常，严重影响客户体验。在IE下的JS编程中，以下的编程方式都会造成即使关闭IE也无法释放内存的问题，下面...
2019-05-18 21:10:42
2982
原创 程序员会用到的对照表
程序员常用对照表一、HTTP Content-type 对照表链接：https://github.com/Yashona/comparison-table/blob/master/HTTP Content-type 对照表.png二、HTML转义字符https://github.com/Yashona/comparison-table/blob/master/HTML转义字符对照表.pn...
2019-05-18 20:37:42
240
原创 rem.js 使用
rem.js 介绍rem.js 笔者已经用此封装好的 js 开发了N个项目，用起来还是很方便的，能适用所有移动端h5页面的自适应需求。rem.js 下载路径： https://github.com/Yashona/shiwanzhushou/blob/master/js/lib/rem.jsrem.js 用法直接在文件中引入 rem.js 即可<script src="./js...
2019-05-18 18:54:52
4867
转载 移动 web 适配 rem.js 使用
移动 web 适配 rem.js 使用前言提到rem，大家首先会想到的是em，px，pt这类的词语，大多数人眼中这些单位是用于设置字体的大小的，没错这的确是用来设置字体大小的，但是对于rem来说它可以用来做移动端的响应式适配哦。兼容性先看看兼容性，关于移动端ios：6.1系统以上都支持android：2.1系统以上都支持大部分主流浏览器都支持，可以安心的往下看了。rem设置字体大小...
2019-05-18 18:32:23
340
原创 iscroll 用法
iscroll 用法iscroll.js 插件iScroll 5参考文档 http://www.mamicode.com/info-detail-331827.htmlgithub 下载地址 https://github.com/cubiq/iscrolliScroll 5 有参考文档，如何使用请参看文档！iscroll.js使用 直接上代码：var pageI...
2019-05-18 18:14:05
341
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人