javascript
爱吃排骨
这个作者很懒,什么都没留下…
展开
-
JS 业务常用正则
JS 业务常用正则原创 2022-07-22 14:18:47 · 150 阅读 · 0 评论 -
可编辑的div黏贴图片
黏贴图片主要分为2个情况,第一个是直接截图或者打开图片后点击复制,第二个是直接使用ctrl+c复制电脑本地图片,今天主要是写一下ctrl+c复制电脑本地图片的方法通过使用ctrl+c复制电脑本地图片 在粘贴板里面是保存的file文件类型 所以直接ctrl+v 是无法复制出来,这就需要我们将file类型的img 转化成blob类型,具体方法如下。将此函数绑定到onPaste 黏贴事件 const getItem = async (event) => { let items =.原创 2021-08-26 16:10:36 · 467 阅读 · 0 评论 -
JS切换扬声器设备
最近有做到检测音视频的功能,记录一下获取扬声器设备也是使用的navigator.mediaDevices.enumerateDevices() 方法1.获取到扬声器设备列表,代码如下 其中audiooutput 就是代表的扬声器设备。 const [audioList, setAudioList] = useState([]); //获取音频列表 const getSpeakerList = () => { navigator.mediaDevices ...原创 2021-07-13 14:29:32 · 4697 阅读 · 5 评论 -
JS输出音频根据分贝波浪显示
效果图如下,这里取巧使用了antd的 Rate组件,只需要传入数值即可自动变化这里使用的API是navigator.mediaDevices.getUserMedia({audio:true}) const [audioNum, setAudiotNum] = useState(0); //获取音频分贝 const getAudio=()=>{ navigator.mediaDevices .getUserMedia({ audio: t...原创 2021-07-06 19:35:27 · 2567 阅读 · 1 评论 -
在react 中使用tinyMce富文本编辑器
1.加载缓慢,白屏问题。最开始使用tinyMce的时候发现第一次加载巨慢,查了一下资料后发现一句话,tinyMce在首次加载的时候会在全局查找tinyMce这个变量,如果没有找到就会请求云服务器的tinyMce资源,个人认为应该是这个原因导致的,而导致这个问题的原因是因为开始没有导入import tinyMce from 'tinymce/tinymce';,最开始只导入了import { Editor } from '@tinymce/tinymce-react';在知道这个问题后原创 2021-02-19 11:30:50 · 4969 阅读 · 10 评论 -
leaflet 覆盖物与点位重合获取点击的元素
再使用 leaflet-canvas-marker 加载海量点位后,继续加载polygon多边形会产生一个问题,就是polygon绘出来的遮罩物的层级是比海量点位加载的层级高的(使用L.makrer 生成的点位没有此问题)。当我们要点击遮罩物覆盖的点位时候就会点击到遮罩物,如何解决了,这里提供一个思路。1.定义一个变量clickType let clickType = "";2.在海量点位点击的方法中设置clickType的值,这样当点击覆盖物下的点位的时候就会设置clickType就发..原创 2020-06-12 19:43:22 · 1763 阅读 · 0 评论 -
leaflet 实现多种类型点位聚合,多种类型图标显示隐藏功能
使用到的点位聚合插件是leaflet.markercluster-src git 地址:https://github.com/Leaflet/Leaflet.markercluster#customising-the-clustered-markers使用方法1.把相关css/js 引入项目文件夹后 使用import导入import "./css/screen.css"import "./css/MarkerCluster.css"import "./css/MarkerC...原创 2020-06-11 13:41:32 · 5643 阅读 · 5 评论 -
react map 循环 带条件输出
在平时开发中经常会使用map 来遍历后台的数据,在return 里面如果使用呢<ul className="box-clounm"> { warningData.poepleData.map((item,index)=>( item.id!=""? <li> <Link to={`${peopleUlr}原创 2020-06-10 10:56:09 · 1686 阅读 · 0 评论 -
JS获取今天日期之前的任意指定时间
getBeforeDate(n) { var n = n var d = new Date() var year = d.getFullYear() var mon = d.getMonth() + 1 var day = d.getDate() if (day <= n) { if (mon > 1) { mon = mon - 1 } else { year = year - 1 ...原创 2020-05-11 18:16:13 · 931 阅读 · 0 评论 -
JS获取周一到周日的时间
weekMonth(currentTime){ var currentDate = new Date(currentTime) var timesStamp = currentDate.getTime(); var currenDay = currentDate.getDay(); var dates = []; var tabTime=[] for (var i = 0; i < 7; i++) { dates.push(ne...原创 2020-05-11 16:40:40 · 1321 阅读 · 0 评论 -
echarts 柱状图展示数据
carEcharts(time,data,data2){ let Ehcarts=echarts.init(document.getElementById("carEcharts")) let option={ color:["#1FC9E2","#F6D51D"], "title": { "text": "外地车环路分布状态", x: "4%", textStyle: { ...原创 2020-05-10 15:47:23 · 2852 阅读 · 0 评论 -
JS左右切换图标功能,不改变样式版本
1.先拿到所有图标总数/每页需要存放的个数,向上取整let iconPn=Math.ceil(modelPicList.length/9)2.拷贝一份初始图标数据,使用splice进行切割,来切割数据 iconTemplate(count){ const newArr =[...t.iconList] const val = newArr.splice((...原创 2020-04-10 19:56:16 · 897 阅读 · 0 评论 -
react 阻止事件冒泡
当我们在一个div 父级盒子有点击事件,子级也有点击事件时,不想点击子级事件触发父级事件就需要做阻止冒泡处理。import React, { useState} from 'react'function Model(){ const clickShowModel=(event,props)=>{ event.stopPropagation(); } ...原创 2020-03-02 20:55:14 · 1153 阅读 · 0 评论 -
react ul li 点击哪个高亮哪个
这个功能通过比对li的下标来实现功能,通过设置isShow 比对index,来实现动态的className 渲染import React, { useState} from 'react'function Model(){ const [isShow, setIshow] = useState(0) const listStatus = (item, index) ...原创 2020-03-02 20:27:16 · 1517 阅读 · 0 评论 -
react 子组件使用 props.history.push 无法跳转或者显示"push"underfind 问题
出现这个问题的主要原因是在父组件里面没有给子组件传history在我们的父组件里面传递一个history function MyModel(props) { return( <> <ResultCard history={props.history}></R...原创 2020-03-02 15:16:44 · 2216 阅读 · 0 评论 -
解决git在配置ssh 秘钥后 每次pull commit 都需要输入账号密码问题
git config --global credential.helper store原创 2020-02-20 14:14:36 · 1146 阅读 · 0 评论 -
element ui 获取checkbox 选中的表格数据
1.定义一个储存ID变量 multipID:[],2. 使用element ui 表格方法@selection-change="changeFun"<el-table :data="tableData" border style="width: 100%" align="center" @cell-mouse-enter="enter" ref="multipleTa...原创 2020-02-19 16:37:17 · 4784 阅读 · 0 评论 -
eacharts 饼图 嵌套联动
eacharts 饼图嵌套联动,点击内环数据时候,外圈数据跟随变动主要是用到了点击事件方法 Eacharts.on('click', function (params) { if(params.data.id){ axios.get(ajaxURL.menaDetails,{ params:{ id:...原创 2020-01-02 20:00:17 · 624 阅读 · 0 评论 -
eacharts 饼图 label formatter 自定义样式和数据拼接
series 中的labelformatter 无法使用html 模板 ,当官方定义的{a}:系列名。{b}:数据名。{c}:数据值。{d}:百分比。{@xxx}:数据中名为'xxx'的维度的值,如{@product}表示名为'product'` 的维度的值。{@[n]}:数据中维度n的值,如{@[3]}` 表示维度 3 的值,从 0 开始计数。这些属性无法满足我们对...原创 2020-01-02 19:38:31 · 7061 阅读 · 0 评论 -
ajax 提交表单 增加自定义字段 传参
在form 表单提交中,我们有时候需要提交一些自定义的字段,又懒得在form 里面 写<input type='hidden'>的时候,可以使用下面这这种方法直接在ajax里面增加参数 data:$.param({'pn':pn,'regions':regions})+'&'+$("#formData").serialize()...原创 2019-11-22 14:49:23 · 1042 阅读 · 0 评论 -
element ui 弹框点击 显示tree组件,点击空白区域隐藏tree
在做用户管理中,部门很有可能是一个tree树状图,那就需要点击 input显示 tree组件,点击空白区域隐藏tree图一 是点击输入框的时候,组件显示了出来,图二是点击空白区域组件隐藏.下面看看代码实现吧1. 需要 给 弹框 el-dialog 一个ID值 <el-dialog :title="messages" :visible.sync="dialogVisibl...原创 2019-10-24 16:21:00 · 5158 阅读 · 0 评论 -
element ui 时间控件 今天之后的日期禁用
主要用到了这个 属性picker-optionshtml <el-date-picker v-model="timeData" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm" value-form...原创 2019-10-23 15:23:29 · 5594 阅读 · 0 评论 -
element ui dialog 表单点击编辑,再点击添加,数据无法清空问题 解决办法
vue element ui在做编辑和添加时候通常使用一个dialog 弹框,这样就会出现一个问题,点击编辑 再点击添加,这时候数据已经赋值了, 所以this.$refs[formName].resetFields(),无法把数据重置为空[] 这肯定不是我们想要的结果,后面是这样解决的,在点击添加按钮的时候/添加用户addBtn(){ this.dialogVisible=true...原创 2019-10-21 16:03:30 · 3126 阅读 · 0 评论 -
一个例子看懂call,apply
在使用函数调用call方法时候,需要注意要将函数的参数全部列举出来,不然就会得到NAN,看例子吧 <script> function add(a,b){ return this.c+this.d+a+b; } var e={c:3,d:4} console.log(add.call(e,3,5)); /*3+4+3+5=15*/ &...原创 2018-07-27 16:35:47 · 816 阅读 · 0 评论 -
数组求和,删除,去重
求和 1.常规for循环方法 function summing(arr){ let a=0; for(let i=0;i<arr.length;i++){ a+=arr[i];}console.log(a)/*10*/return a;}summing([1,2,3,4]);2.使用eval. function summing(...原创 2018-07-31 10:42:54 · 498 阅读 · 0 评论 -
JS获取url参数(超简单)
Location 对象包含有关当前 URL 的信息。Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。hash 设置或返回从井号 (#) 开始的 URL(锚)。 host 设置或返回主机名和当前 URL 的端口号。 hostname 设置或返回当前 URL 的主机名。 href 设置或返回完整的 ...原创 2017-11-21 16:57:52 · 101243 阅读 · 7 评论 -
JS获取屏幕宽高
Javascript:网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scro...原创 2019-01-17 12:42:30 · 4511 阅读 · 0 评论 -
my97datePick基础用法
1.显示年月日<input type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss')">2.限制今天以后的日期不能选择<input type="text" onClick="WdatePicker({maxDate:'%y-%M-%d')">3.选择时间段<inp原创 2019-01-08 11:29:40 · 531 阅读 · 1 评论 -
echarts line动态刷新数据
function menyMonitor(){ var memory=echarts.init(document.getElementById('memoryUsage')); var date = []; var randomData = []; for(var i = 0; i<30; i++){ date.push('...原创 2019-01-09 18:32:00 · 7239 阅读 · 0 评论 -
echarts map地图自动高亮显示提示框轮播
function mapGeo(data) { var chart = echarts.init(document.getElementById('mapGeo')); var mapUrl = staticsUrl + '/js/echart-map/beijing.json'; $.get(mapUrl, function (mapJs...原创 2019-06-05 11:29:16 · 8946 阅读 · 2 评论 -
JQ JS分页序号连续
在做表格分页时候,连续序号是在实际中会用到的。其中比较注意的是使用parseInt()来让 i 返回一个数字例如:let data=res.data; //数据let index=""; //序号let pno=1; //pno 相当于当前的分页,这个值是获取分页的pn for(var i in data){ index=(pno-1)*data.lengt...原创 2019-05-24 09:44:53 · 1751 阅读 · 0 评论 -
JQ树状图
html 部分 <link rel="stylesheet" type="text/css" href="{{staticsUrl}}/js/ztree/zTreeStyle/zTreeStyle.css"> <input type="text" name="" value="请选择搜索点位" id="locationName" class="form-cont...原创 2019-05-24 10:36:22 · 1841 阅读 · 0 评论 -
video.js 对接实时视频 rtmp/flv 格式
在用video.js 做实时视频对接rtmp格式时候发现只有5.8版本的JS才支持,更高的 7.1 就不支持了,所以在做时候要看好vode.js版本,一般在这个网址里面下http://www.jq22.com/jquery-info404。1.在页面中引用video-js.cs样式文件和video.js<link href="video-js.css" rel="styleshee...原创 2019-05-24 11:04:18 · 19885 阅读 · 10 评论 -
js setInterval多次计时器后,使用clearInterval 删除计时器
在使用setInterval 时候,如果调动了多次,那么每次调用都会产生一个ID,如果直接使用clearInterval()是清除不掉计时器的,<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head>...原创 2019-09-17 10:04:46 · 3025 阅读 · 0 评论 -
javascript实现时间器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="tdd">&原创 2018-07-27 15:03:43 · 330 阅读 · 0 评论