笔记
前端老实人灬
吾尝终日而思矣,不如须臾之所学也;
展开
-
VideoJS播放.flv格式视频添加截图和录像功能
【代码】VideoJS播放.flv格式视频添加截图和录像功能。原创 2022-10-28 10:13:16 · 2643 阅读 · 2 评论 -
高德地图api 2.0截图canvas 地图截不上
高德地图api截图原创 2022-10-24 10:09:44 · 458 阅读 · 0 评论 -
生成唯一字符串
// 生成唯一字符串function getUuid() { var s = []; var hexDigits = "0123456789abcdef"; for (var i = 0; i < 25; i++) { s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); } s[14] = "4"; // bits 12-15 of the time_hi_and_ver原创 2022-05-24 17:02:53 · 257 阅读 · 0 评论 -
encodeURI和encodeURIComponent 加密,url乱码
encodeURI编码范围encodeURI()不编码字符有82个:! # $ & ’ ( ) * + , - . / : ; = ? @ _ ~ 0-9 a-z A-ZencodeURIComponent编码范围encodeURIComponent不编码字符有71个:! ’ ( ) * - . _ ~ 0-9 a-z A-Z所以encodeURIComponent比encodeURI编码的范围更大。举个例子虽然上面写了二者的编码范围的区别,但是还是不够直观,我们通过下面这里例子来看一下原创 2022-03-28 16:35:12 · 1515 阅读 · 0 评论 -
Vue脚手架中唯一id生成库nanoid
安装:npm i nanoid导入import { nanoid } from "nanoid";生成一个随机idconst id = nanoid();原创 2022-02-28 17:55:03 · 403 阅读 · 0 评论 -
mysql安装教程
下载地址链接: https://dev.mysql.com/downloads/windows/installer/.点击Next:点击Next:点击Execute :点击Yes :点击Execute:点击Next:点击Next:点击Next:点击Next:点击Next:输入用户名root和密码root后点击Next:点击Execute:点击Finish:若安装完连接不上数据库可再次点击安装程序重新配置点击第一个的Reconfigure:点击Next原创 2022-02-28 10:47:58 · 316 阅读 · 0 评论 -
canvas截图,html2canvas.js 截图整个div,canvas下载图片
html2canvas.js(下载地址)https://html2canvas.hertzen.com/saveFile.js(下载图片)var saveAs = saveAs || function (e) { "use strict"; if (typeof e === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) {原创 2022-02-22 10:55:02 · 663 阅读 · 0 评论 -
tinymce富文本编辑框使用
引用 <link rel="stylesheet" href="./tinymce/skins/ui/oxide/skin.min.css" /> <link rel="stylesheet" href="./tinymce/tinymce.min.js" /> <script src="/tinymce/jquery.tinymce.min.js"></script> <script src="./tinymce/tin原创 2022-02-22 10:42:49 · 1336 阅读 · 0 评论 -
echarts 数据自动滚动效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <div id="echBox" style="width: 800px; height: 400px"></div> <script src="../li原创 2022-01-19 17:39:29 · 4634 阅读 · 0 评论 -
js继承7中方式
// 定义一个动物类 父类 function Animal(name) { // 属性 this.name = name || "Animal"; // 实例方法 this.sleep = function () { console.log(this.name + "正在睡觉!"); }; } // 原型方法 Animal.prototype.eat = function (food) { console.log(this.name原创 2022-01-11 17:39:22 · 89 阅读 · 0 评论 -
解决element ui tree组件往组件外拖拽,鼠标样式显示禁止放置问题
在可以放置的div上绑定dragover方法<div class="map-con" id="mapDiv" @dragover="allowDrop"></div>allowDrop(ev){ ev.preventDefault();},参考链接:链接: https://www.w3school.com.cn/tiy/t.asp?f=eg_html5_global_draggable.示例代码:<!DOCTYPE HTML><html>原创 2022-01-11 15:58:15 · 2196 阅读 · 0 评论 -
vue中引入及使用wow.js
安装npm install animate.css --savenpm install wowjs --savemain.js全局引入import "animate.css"import "wowjs/css/libs/animate.css"// 巨坑... 此地方要引入两个cssimport wow from 'wowjs'Vue.prototype.$wow = wow在相应的组件中使用 <div class="container"> <.原创 2022-01-07 11:17:32 · 1904 阅读 · 0 评论 -
监听div宽高变化
//监听div大小变化(function($, h, c) { var a = $([]), e = $.resize = $.extend($.resize, {}), i, k = "setTimeout", j = "resize", d = j + "-special-event", b = "delay", f = "throttleWindow"; e[b] = 250; e[f] = true; $.e原创 2021-12-20 14:48:47 · 1185 阅读 · 0 评论 -
前端js压缩图片并上传
<input type="file" accept="image/*" class="filesBtn" id="addWgBtn" name="outPhotos"> var wgtArr = []; $("#addWgBtn").change(function (e) { var files = this.files if (files) { for (var i = 0; i < files.length; i++.原创 2021-12-01 09:02:27 · 501 阅读 · 0 评论 -
使用H5Stream实现rtsp流播放,并整合到web项目中
链接: https://blog.csdn.net/yanmuchen/article/details/98207002#comments_13039506.转载 2021-12-01 08:49:33 · 526 阅读 · 0 评论 -
前端实现录屏
<!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" /> <titl原创 2021-11-11 17:21:25 · 708 阅读 · 0 评论 -
element ui 遇到的问题
element ui 遇到的问题element-ui tree 树形控件复选框实现单选element-ui tree 树形控件折叠已经展开节点element-ui tree 树形控件打开指定节点element-ui tree 树形控件复选框实现单选<el-tree :data="treeData" :props="defaultProps" node-key="id" ref="treeRef" show-checkbox check-strictl原创 2021-11-10 15:19:03 · 570 阅读 · 0 评论 -
webpack性能优化
1.HMR热模块替换hot module replacement 热模块替换 / 模块热替换作用:一个模块发生变化,只会重新打包这一个模块(而不是打包所有模块)极大提升构建速度。样式文件:可以使用HMR功能:因为style-loader内部实现了~js文件:默认不能使用HMR功能 --> 需要修改js代码,添加支持HMR功能的代码注意:HMR功能对js的处理,只能处理非入口js文件的其他文件。html文件: 默认不能使用HMR功能.同时会导致问题:html文件不能热更新了~ (不用做HMR原创 2021-10-20 11:21:29 · 63 阅读 · 0 评论 -
监听文件下载进度
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style></style> <style> </style> </head> <body> <script> /*** 将url文件下原创 2021-10-13 09:15:51 · 704 阅读 · 1 评论 -
sass语法整理
sass语法整理1、变量(定义变量后,在选择器里可以直接引用)2、嵌套(父选择器里可以嵌套子选择器)3、mixin 混合 (相当于预先写好了一组样式,其它地方直接引用)4、 继承/扩展(一个选择器可以继承另一个选择器的全部样式)5、计算功能6、if判断(不常用)7、for循环(不常用)8、列表循环(不常用)9、 while循环,有判断条件更灵活。1、变量(定义变量后,在选择器里可以直接引用)$yanse: rgb(223, 148, 148);h1{ color: $yanse;原创 2021-09-30 09:40:27 · 52 阅读 · 0 评论 -
实现复制功能
<template> <div class="copy-content"> <input type="text" v-model="value"> <div v-for="item in list" > {{item}} <button type="primary" @click="copyHandle(item)">点击复制</button> </d原创 2021-09-29 16:44:37 · 83 阅读 · 0 评论 -
修改滚动条样式
&::-webkit-scrollbar { width: 6px !important; height: 6px !important; } &::-webkit-scrollbar-corner{ background-color: transparent; } &::-webkit-scroll原创 2021-09-26 11:13:31 · 45 阅读 · 0 评论 -
图片导出下载,转Base64
网络图片转base64// 将网络图片转成Base64 let imgUrl="https://fastmarket.oss-cn-shenzhen.aliyuncs.com/oss/static/other/1/images/baseMap_index.jpg"getBase64Image(imgUrl)function getBase64Image(imgUrl) { if(imgUrl != "") { let image = new Image(); im原创 2021-09-16 15:46:50 · 390 阅读 · 0 评论 -
数组 多字段排序
var list3= [ { name: "Dawson", totalScore: "197", Chinese: "100", math: "97" }, { name: "HanMeiMei", totalScore: "196", Chinese: "99", math: "97" }, { name: "HanMeiMei", totalScore: "196", Chinese: "99", math: "10" }, { name原创 2021-09-16 15:38:18 · 172 阅读 · 0 评论 -
纯css画饼状图
一、饼图<div class="pie"></div>.pie { width:100px; height:100px; border-radius:50%; background: yellowgreen; background-image: linear-gradient(toright,transparent 50%,#655 0);} .pie::before { content:''; display:b原创 2021-08-02 15:31:15 · 2188 阅读 · 0 评论 -
vuePress项目搭建及配置
参考链接1: https://www.cnblogs.com/softidea/p/10084946.html.参考链接2: https://www.jianshu.com/p/2ac5727947cd.demo代码地址:https://gitee.com/wk1255315430/vue-press-demo.git搭建创建项目文件夹mkdir vuepressBlogDemo全局安装 VuePress// An highlighted blocknpm install -g v原创 2021-07-31 18:44:38 · 920 阅读 · 0 评论 -
element-plus 问题整理
目录1.引入中文2.form表单验证1.引入中文1.修改vite.config.js配置,添加optimizeDepsconst path = require('path')export default function () { return { optimizeDeps: { include: ["element-plus/lib/locale/lang/zh-cn"], }, }}在main.js中引入impo原创 2021-07-28 10:10:39 · 839 阅读 · 0 评论 -
vite构建项目
链接: http://www.jspang.com/detailed?id=66.创建vue3npm init vite-app <project-name>cd <project-name>npm installnpm run dev创建reactnpm init vite-app --template reactnpm install安装sassnpm i -D sassvite+vue3配置文件创建vite.config.js文件const pa原创 2021-07-19 17:43:28 · 334 阅读 · 1 评论 -
uniapp地图自定义组件拖拽获取中心经纬度
<template> <view class="map-content flex-wrap"> <u-navbar :is-back="true" title="位置采集" back-icon-color="#ffffff" :background="{backgroundColor: '#2979ff'}" title-color="#ffffff"> <view class="slot-wrap"> <u-icon name原创 2021-07-09 14:27:15 · 874 阅读 · 0 评论 -
jquery动态修改:after:before伪元素content值
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jquery动态修改伪类:after:before</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style>原创 2021-07-09 14:18:48 · 1552 阅读 · 0 评论 -
js分类汇总
var arr = [ {"id":"1001","name":"值1","value":"111"}, {"id":"1001","name":"值1","value":"11111"}, {"id":"1002","name":"值2","value":"25462"}, {"id":"1002","name":"值2","value":"23131"}, {"id":"1002","name":"值2","value":"2315432"}, {"id"原创 2021-05-07 15:31:59 · 555 阅读 · 0 评论 -
无限自动滚动效果 +鼠标滚轮滚动效果
鼠标不无限滚动<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> li { list-style-type: none; background-color: rgba(0, 0, 0, 0.2); line-height: 40px原创 2021-04-16 19:52:52 · 707 阅读 · 3 评论 -
cookie
存 document.cookie = escape("cookie="+"123465abcabc");取 var ck = document.cookie; var str = unescape(ck); var cookies = str.split(";"); for(var i = 0; i < cookies.length; i++) { var c = cookies[i]; var arr = c.split("=");原创 2021-04-06 16:40:06 · 51 阅读 · 0 评论 -
JavaScript中字符串截取slice() substring() substr()区别
当接收的参数是负数时,slice会将它字符串的长度与对应的负数相加,结果作为参数;substr则仅仅是将第一个参数与字符串长度相加后的结果作为第一个参数;substring则干脆将负参数都直接转换为0。str.slice(start,stop)提取字符串的某个部分,并以新的字符串返回被提取的部分start 要抽取的片断的起始下标。如果是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符,-2 指倒数第二个字符,以此类推。end 紧接着要抽取的片段的结尾的下原创 2021-04-02 15:01:07 · 181 阅读 · 0 评论 -
div 拖拽
css.box { width: 100px; height: 100px; top: 100px; left: 100px; position: absolute; background-color: pink;}// An highlighted blockvar foo = 'bar';$(".box").on("mousedown",function (e) { var disX=e.offsetX; var disY=e.offsetY; var top=$(原创 2021-03-30 13:32:40 · 263 阅读 · 0 评论 -
Layui框架整理
Layui框架整理loading框laydate 日期选择 开始时间和结束时间弹窗打开关闭方式loading框var loading = layer.load(2, { shade: false, time: 2*1000});layer.close(loading);laydate 日期选择 开始时间和结束时间开始时间:var startLaydate = laydate.render({ elem: '#startTime', //指定元素 type: 'da原创 2021-03-24 08:58:38 · 291 阅读 · 0 评论 -
echarts.js整理
echarts.js整理保证每次重复渲染不显示,宽度为0 解决办法:调整echarts表格的位置echarts 随屏幕大小改变大小chart.resize()解决echarts图表 y轴名称,太长隐藏显示的问题解决提示框超出屏幕x轴名称太长,旋转或者竖着显示图表点击事件竖图表横图表保证每次重复渲染if(document.getElementById('hjczlEcharts4').getAttribute('_echarts_instance_')){ document.getElementB原创 2021-03-23 17:46:26 · 256 阅读 · 0 评论 -
JQuery长按事件
var timeout; $(".tr-photo").on({ touchstart: function(e) { var oSpan = e.currentTarget.lastElementChild // 长按事件触发 timeOutEvent = setTimeout(function() { timeOutEvent = 0; c原创 2021-03-23 11:09:49 · 1960 阅读 · 0 评论 -
图片格式转换,图片下载
相对路径图片转成base64格式function image(imgurl ) { //imgurl 本地图片路径 var img = imgurl ; function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = ca原创 2021-03-23 11:08:43 · 214 阅读 · 0 评论 -
表格thead固定 tbody滚动
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <style> table tbody { display: block; height: 195px;原创 2021-03-23 08:38:18 · 145 阅读 · 0 评论