![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
_小郑有点困了
我的月亮永悬不落。
展开
-
工作笔记-滚动列表中指定项到可视区域范围内
比如给你区域区划的列表,但是固定容器高度,会出现滚动条,如果此时存在一个默认选中项,恰巧他不在可是区域内,但是想要一点进来就要在可视区域内看到这个选中项。使用了vant的picker组件,选中项目默认也并不在选中位置。还是关于这个vant的picker组件,当时没有仔细看文档,淦!实际上是有这个属性的。自己做的列表,注意看这个选中项在最后一行,那么就把他默认滚动到视口范围内。,自己操作dom的简直是多次一举。那么就可以手动计算选中项的位置。原理就是,获取dom,然后调用。查看dom可知,是通过。原创 2022-11-16 11:00:26 · 704 阅读 · 0 评论 -
js图片url反转file文件
场景由于项目需求,需要将图片 url 转成文件格式上传到服务器封装jstransferFile.jsfunction setInitImg(url,callback){ let img = url;//这里是淘宝上随便找的一张图片 let _ = this let imgRes getBase64(img, (dataURL) => { imgRes = dataURLtoFile(dataURL,img); console.log(imgRes)原创 2022-03-01 17:35:30 · 4754 阅读 · 4 评论 -
前端vue导出Excel(多sheet)
场景:当导出文件的时候遇到结构复杂的表格(如:表头合并);或者数据分页的时候,后端就很难操作了,难以保持表格原有结构。所以就需要前端导出。步骤如下:1.组装数据2.标记表头合并项,计算合并项3.添加样式4.转buffer,file-saver导出文件组装数据所谓组装数据的意义在于,手动决定他的结构举个例子表格外观是这样的打印一下导出的数据结构是这样的分别查看这个!cols数组是每一列的宽度(第一行每一格的宽度)这个!merges是表格所有的合并项自行组装原创 2022-01-13 10:34:53 · 4166 阅读 · 3 评论 -
h5使用aws s3上传图片到oss
tips操作和流程同于之前的vue上传图片到oss,不在赘述,直接上代码。代码实现:html:引入js: <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1046.0.min.js"></script> <script src="./js/aws_s3.js"></script><div class="imgUpload"> <div class="tips原创 2021-12-16 13:31:40 · 1607 阅读 · 3 评论 -
js保留两位小数,转百分比(记录遇到的问题)
项目中总有计算xx率这样的情况,计算出来的是小数,需要进行保留两位小数再转换成百分比格式。问题就来了。js的这个*100操作就让我懵逼了。如图:代码如下:0.5492957746478874.toFixed(2)*100我不理解,命名两位小数等于0.55,乘100就变成了这个????换个写法吧:var num = 0.5492957746478874;var percent = (Math.round(num*10000))/100+'%';...原创 2021-10-13 14:04:59 · 532 阅读 · 1 评论 -
nodejs搭建websocket(前后端交互小demo)
效果:服务端代码:var ws = require("nodejs-websocket");ws.createServer(function(conn){ conn.on("text",function(str){ //服务端接收到的数据 console.log("服务端收到:" + str); //接收到的数据再发送回客户端 conn.sendText("服务端发回-来自前端的"+str); let input = {原创 2021-07-12 17:53:31 · 752 阅读 · 1 评论 -
使用raphael.js画车道线(泊位线)
使用raphael.js画车道线(泊位线)效果图场景设备拍照上传,但是仅仅有图片,不够明显的显示问题,就要前端来绘制这个车道线(不可拖拽)。后端数据(坐标形式)在图片中以图片左上角作为坐标系远点,我这里后端返回的是以百分比的形式,例如一个点x,y就是距离左上的百分比距离。TODO:因为raphael限制path绘制的方法需要传入具体的像素值,所以,需要先获取图片的实际尺寸再进行转换成实际像素值。代码<!DOCTYPE html><html lang="en">&原创 2021-06-29 16:43:31 · 478 阅读 · 0 评论 -
vue使用openlayers描边中国地图
vue使用openlayers描边中国地图效果图:数据源来自:http://datav.aliyun.com/tools/atlas/#&lat=30.37018632615852&lng=106.68898666525287&zoom=3.5china.json:代码index.vue:<template> <div id="app"> <div id="Map" ref="map"></div>原创 2021-03-31 13:26:07 · 1807 阅读 · 3 评论 -
vue使用阿里云ARMS前端监控
vue使用阿里云ARMS前端监控其实使用方法也很简单。cdn的方式就是h5一样,在index.html的body的第一行中引入script(同步异步任选)。<script>!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"xxxx",appType:"web",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true,enableLinkTrace:tr原创 2021-03-31 10:03:09 · 1727 阅读 · 0 评论 -
原生h5使用gulp自动编译打包js/css/html/静态资源
原生h5使用gulp自动编译打包js/css/html/静态资源目录结构:需要安装的包以及运行命令如package.json:const gulp = require(‘gulp’)const minifyCss = require(‘gulp-minify-css’) //css压缩const uglify = require(‘gulp-uglify’) //js压缩const minifyHtml = require(‘gulp-minify-html’) //js压缩co原创 2021-03-30 17:12:16 · 679 阅读 · 0 评论 -
原生h5封装ajax全局挂载(可监听连接失败/请求成功/失败/超时)
原生h5封装ajax全局挂载(连接失败/请求成功/失败/超时)// ajax/** * @param uri * @param input 入参 * @param callback 响应 * @param final 不论成功失败都执行 */window.http = function (uri, input, callback, final) { http.loading.startHttp(uri)//旋转加载图标 //入参少了input的时候 if (typeof in原创 2021-03-30 14:51:07 · 364 阅读 · 0 评论 -
原生h5添加阿里云ARMS前端监控
h5添加阿里云ARMS前端监控项目需求,监控前端可能出现的报错。图形化展示,并能看到相关信息。于是乎使用到ARMS前端监控。还以为要很复杂,没想到只需要新建一个应用,引入js即可。(个人觉得同步引入比较好)文档地址:https://help.aliyun.com/document_detail/58663.html?spm=a2c4g.11186623.2.6.54687be7K6iYFRARMS:控制台:页面:<!DOCTYPE html><html> &l原创 2021-03-30 11:41:12 · 427 阅读 · 0 评论 -
原生H5封装并使用vue的相关命令(v-for v-if v-html)
原生H5封装并使用vue的相关命令场景:当你使用vue开发习惯了的时候,再写原生html和js是不是有点感觉麻烦,不能响应式,而且循环个页面的数据还要用字符串拼接,于是乎就自己把这些常用的命令封装起来。有“v-for/v-if/v-html”等等。注:“v-for”在循环元素上面还存在一点bug效果图:index.html:<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8原创 2021-03-29 18:05:31 · 1605 阅读 · 1 评论 -
使用raphael画线,升级版(有横向水平线,可拖拽)
使用raphael画线,升级版(有横向水平线,可拖拽)效果图1:效果图2:代码:目前左边线可拖拽,水平线初始化计算没有做水平计算,代码写法为升级<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简洁循环并可拖拽两条线以及两线连接的水平线</title> <style> #paper{ wid原创 2021-03-10 11:12:15 · 211 阅读 · 0 评论 -
使用raphael画线,并且可拖拽线上点进行拖拽线条(小demo)
使用raphael画线,并且可拖拽线上点进行拖拽线条效果图1:(拖拽前)效果图2:(拖拽后)这个点是可以在线上移动的代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #paper{ width:500px; height:500原创 2021-03-09 17:46:13 · 717 阅读 · 0 评论 -
原生H5判断当前浏览器载体是支付宝还是微信
原生H5判断当前浏览器载体是支付宝还是微信判断是否微信isWx: /micromessenger/.test(window.navigator.userAgent.toLowerCase()),判断是否支付宝isAli: /AlipayClient/.test(window.navigator.userAgent),原创 2021-03-08 14:59:29 · 704 阅读 · 0 评论 -
日常笔记-js秒转时分秒
日常笔记-js秒转时分秒一:Vue.prototype.durationTime = function (val, type) { val = parseInt(val) if (val >= 60 * 60 * 24) { let d = parseInt(val / 60 / 60 / 24) let h = val % (60 * 60 * 24) let m = h % (60 * 60) if (d) { return '' + d +转载 2021-02-26 11:27:40 · 118 阅读 · 0 评论 -
学习promise
原生:var checkIsOpen = function(callback){ //会在这里做点事情 例如存点东西 sessionStorage.setItem('isOpenOcser','off'); callback()}//但是无法保证下面那些会先等他执行完再执行别的 需要promisevar pro =new Promise(function(res,rej){ checkIsOpen(function(){ res()原创 2021-01-30 14:56:04 · 78 阅读 · 0 评论 -
js小递归
js小递归目的是把所有的子项读出来,只要他有children那么就调用自己这个方法,否则就直接把自己push到一个数组,因为我页面的效果需要如此,对于拥有子项的,上面的父项毫无意义,我只要子项;有的没有子项,那我就要他本身let arr =[ { label:'门架', prop:'stationName', }, { label:'车型', prop:"vehicleTy原创 2020-12-24 10:26:02 · 107 阅读 · 0 评论 -
正则校验密码格式(四选四/四选三/四选二)
四选四let reg = /^(?![A-Za-z0-9]+$)(?![a-z0-9_!@#$%^&*()+.]+$)(?![A-Za-z_!@#$%^&*()+.]+$)(?![A-Z0-9_!@#$%^&*()+.]+$)[a-zA-Z0-9_!@#$%^&*()+.]{8,}$/;if (!reg.test(this.changepassword)) { this.$Modal.error({ content: `添加失败,密码要求包含大写、小写字母,数原创 2020-12-14 13:50:48 · 3561 阅读 · 0 评论 -
一小段简单的js节流
用在vue 的时候注意,将isClick这个东西弄成data里面的变量,而不是作为函数内部的公共变量,不然会达不到效果var isClick = true; // function say () { // console.log("按钮被点击了"); // } btn.οnclick=function(){ // throttle(); if(isClick) { isClick = false; //事件原创 2020-12-14 13:46:48 · 295 阅读 · 0 评论 -
js计算时间···
js计算时间之计算1天后3天后···1天:new Date(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1, 0, 0, 0).getTime() - 24 * 60 * 60 * 1000).format('yyyy-MM-dd hh:mm:ss')3天:new Date(new Date(new Date().getFullYear(), new Date().getMonth(),原创 2020-11-27 15:20:26 · 258 阅读 · 0 评论 -
call和apply
call和apply1,call和apply,call和apply都是为了改变函数运行时候的环境2,function add(a,b){ alert(a+b); } function sub(a,b){ alert(a-b);}add.call(sub,3,1)//输出为4,add替换掉了sub3,call和apply第一...原创 2020-03-27 16:43:46 · 100 阅读 · 0 评论 -
闭包
闭包可以访问另一个函数内部变量的函数就叫闭包1.1,即使是es6的let语法,也可以访问到1.2原创 2020-03-27 16:19:16 · 85 阅读 · 0 评论 -
变量声明提升
变量声明提升变量声明提升,提升var,却没有提升值11.1,console后面有var1.222.1,如果删掉了var,那就输出全局的a2.23原创 2020-03-27 16:04:05 · 109 阅读 · 0 评论 -
js深浅拷贝
js深浅拷贝浅拷贝:Object.assign();只能对第一级实现深拷贝,就是一级的源不会因为目标改变而改变,而二级的数据会浅拷贝,第二级会改变。原因是源对象和目标对象共享同一块内存1.11.2,红色的一级,蓝色的二级深拷贝,可以通过JSON.parse(JSON.stringify(object))实现深拷贝:原因:拷贝一个字符串会开辟一个新的存储地址,切断与源的联系2.1,...原创 2020-03-27 15:16:24 · 86 阅读 · 0 评论 -
一道刷到的js面试题
一道刷到的js面试题例如这样一段代码,问输出的结果是什么 for(var i = 0;i<5;i++){//循环执行的时候,几乎同时设置了5个定时器,这些定时器在一秒的时候同时触发 setTimeout(function(){//而循环之后的输出是立即执行的 console.log(new Date,i) },1000) console.log("直接输出",ne...原创 2020-03-27 12:57:15 · 133 阅读 · 0 评论 -
输入一个日期得到是这一年的第几天
输入一个日期得到是这一年的第几天原创 2019-09-03 17:13:49 · 164 阅读 · 0 评论 -
输入日期得到是这一年的第几天(二)
输入日期得到是这一年的第几天(二)原创 2019-09-03 17:18:41 · 183 阅读 · 0 评论 -
js求阶乘
js求阶乘原创 2019-09-03 18:16:03 · 225 阅读 · 0 评论 -
拼接大法防轮播“穿帮”
拼接大法将li标签的第一个li拼接到ul的后面,用于防止水平轮播“穿帮”(′.boxul′).append(('.box ul').append((′.boxul′).append((’.box ul li’).eq(0).clone());...原创 2019-09-03 18:20:39 · 87 阅读 · 0 评论 -
juery传统轮播
juery传统轮播原创 2019-09-03 18:24:56 · 94 阅读 · 0 评论 -
封装函数十(缓动函数2.0)
封装函数十(缓动函数2.0function animate(dom,option){clearInterval(dom.tiner);dom.timer = setInterval(function(){var change = true;for(var k in option){var current = parseInt(getComputedStyle(dom,null)[k])...原创 2019-08-22 08:24:32 · 95 阅读 · 0 评论 -
冒泡排序
冒泡排序原创 2019-08-24 18:10:26 · 216 阅读 · 0 评论 -
面试题之数组中元素出现次数
面试题之数组中元素出现次数var一个空对象,{key:value}遍历数组,如果对象中已经存在数组中的元素,其键值就+1,如果里面没有,其键值就是1var arr = [3,3,5,4,3,6,5];var obj = {};for(var j = 0;j<arr.length;j++){if(obj[arr[j]]){obj[arr[j]] = obj[arr[j]]+1;}...原创 2019-09-03 17:04:35 · 77 阅读 · 0 评论 -
面试题之数组去重
面试题之数组去重利用indexOf属性,判断新数组里是否存在原数组中的值,当小于0,证明没有这个元素,就添加其道新数组,从而达到去重的作用var arr = [3,3,5,4,3,6,5]; var arr1 = []; for(var i = 0;i<arr.length;i++){ if(arr1.i...原创 2019-09-03 16:57:52 · 239 阅读 · 0 评论 -
点击盒子变多js
点击变多js定义数组存放盒子数目和盒子宽度:点击获取数组的值用于设置盒子原创 2019-08-21 16:41:33 · 210 阅读 · 0 评论 -
制作随机点名
制作随即点名定义名字数组:然后编随即数写代码原创 2019-08-21 16:38:26 · 213 阅读 · 0 评论 -
设置DIV跟随鼠标移动
设置DIV跟随鼠标移动css和htmlscript:这样就可以点击按下盒子,可以拖动,鼠标松开停止,再按下,从当前位置开始移动原创 2019-08-21 16:36:25 · 411 阅读 · 0 评论 -
Ajax框架封装
Ajax框架封装原创 2019-08-24 18:17:51 · 459 阅读 · 0 评论