js
御风傲天
IT前端码农
展开
-
ES6数组reduce的妙用
ES6数组reduce的妙用原创 2022-06-10 19:05:51 · 229 阅读 · 1 评论 -
tree与list 数据相互转换js方法
1.tree数组数据转换,list数据数据treeToList(arr){ let res = [] // 用于存储递归结果(扁平数据) // 递归函数 let fn = (source)=>{ source.forEach(el=>{ res.push(el) el.children && el.children.length>0 ? fn(el.children) : "原创 2022-04-11 19:05:00 · 2467 阅读 · 0 评论 -
前端cookie的写入、读取、删除、方法
//写cookies function setCookie(name, value) { var Days = 30; // 设置有效期 var exp = new Date(); exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); document.cookie = name + "=" + .原创 2021-09-07 15:54:30 · 1179 阅读 · 0 评论 -
js之深浅拷贝整理
1,深拷贝方法-使用递归的方式实现深拷贝(全面,局限性小)function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝 var objClone = Array.isArray(obj) ? [] : {}; //进行深拷贝的不能为空,并且是对象或者是 if (obj && typeof obj === "object") { for (key in obj) { if原创 2021-09-06 17:09:15 · 110 阅读 · 0 评论 -
js多维数组降维处理
在和后端兄弟对接接口的时候,经常遇到一个让人看着脑壳痛的数据形式:比如下图你只是想要一个数组而已,但是后端返回的数据,让你脑壳疼,又得自己改造了数据了。像这样的[1, [2, [3, [4]], 5]];多维数组怎么简单处理成一维数组呢?当然你可以一次次遍历数组处理,这里介绍一个好用的插件 lodash.js库。里面有各种数组和对象的处理方法,自己自行查看api,这里主要讲讲数组的降维处理注意先在页面引入lodash.js//浏览器环境:<script src="lodash原创 2021-02-19 16:26:05 · 808 阅读 · 1 评论 -
几个实用的JS 技巧
1. Replace All我们知道 string.Replace() 函数只会替换第一个项目。你可以在这个正则表达式的末尾添加 /g 来替换所有内容。var example = "potato potato";console.log(example.replace(/pot/, "tom")); // "tomato potato"console.log(example.replace(/pot/g, "tom")); // "tomato tomato"2. 数组去重,提取唯一原创 2020-12-24 11:13:39 · 106 阅读 · 0 评论 -
二进制流文件下载
在做一些文件下载的时候,后端返回的二进制流文件,这里前端的兄弟姐妹就需要处理一下了。直接上代码:// 下载export function download(id) { return request({ url: `/rancher/download_contract/${id}`, method: "get" });}download(row.contractId).then(data => { // 二进制流转换 downl原创 2020-11-19 15:45:56 · 1400 阅读 · 3 评论 -
js去除字符串中的无效字符
在项目对接过程中,经常遇到后端的老铁返回是数据,有点问题的情况;如下;返回的字符串有乱码的情况,就需要用正则替换了let str = "["被测试者的测验结果为中度抑郁。从这个结果可以看出,被测试者最近时常出现心境低落现象,如经常感到压抑、抑郁、悲伤、失望、沮丧或忧伤,经常对很多看不顺眼的事情发脾气或责备他人,或者将很小的过失看作是很大的失败。被测试者经常感到兴趣或乐趣的丧失,觉得原有的爱好也失去乐趣,“对任何事情都无所谓”。被测试者的精力明显降低,常感到疲乏或倦怠,经常是做一些很小的事情也要付出原创 2020-10-19 16:04:56 · 1114 阅读 · 1 评论 -
Input用户输入完后再执行方法
在开发过程中,input的用户输入的值,绑定的onchange事件,如果没敲一次键盘,执行一次方法,请求一次数据的话就很耗内存了;这里用一下lodash<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"><转载 2020-09-16 15:33:19 · 6084 阅读 · 1 评论 -
函数n秒后执行 lodash中的debounce
在做一些表单类数据时,需要根据当前输入的值,像后台请求不同的数据;每次键盘输入都会调用接口API,太别频繁;能不能等用户不在输入了,在请求后端,做个延迟;这里就需要用到lodash了,话不多说上代码:1.安装lodash插件npm install lodash2.引入插件开干/* * CRH文件下载 */import React, { Component } from "react";import Storage from "store2";import axios fro...原创 2020-08-14 16:23:05 · 848 阅读 · 0 评论 -
js调取设备摄像头
webAPi,使用js调取设备摄像头<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>video</title> <style> #video { width: 100%; } </style></head><body> <video autoplay原创 2020-06-10 17:54:23 · 785 阅读 · 0 评论 -
js 浮点数计算精度问题解决汇总
在用js中,在计算浮点数的时候,加减乘除,取余等,你会神奇的发现 0.1 + 0.2 = 0.300000004;类似这样的情况(至于为什么,自己去百度一下就OK了),这里只提供方案:先下载插件;number-precision(npm 上自己找)MethodsNP.strip(num)//stripanumbertonearestrigh...原创 2019-12-13 15:08:38 · 1194 阅读 · 0 评论 -
点击小图显示大图(轮播查看)
今天研究了一个点击小图显示大图的东东photoswipe.js (官网地址:http://photoswipe.com) 先关文件的下载路径地址是:https://github.com/dimsemenov/photoswipe本例中:主要的是photoswipe.css、default-skin.css、photoswipe.min.js、photoswipe-ui-default.m...原创 2018-08-30 14:32:22 · 2059 阅读 · 0 评论 -
把数字转成人民币货币形式
formatMoney = (num) => { return `¥ ${num}`.replace(/\B(?=(\d{3})+(?!\d))/g, ","); };formatMoney(123456); //¥123,456原创 2018-10-31 18:16:54 · 1117 阅读 · 0 评论 -
左右箭头点击实现一行超出可视区域的tab切换
tab切换是网页布局中很常用的一个设计,如果我们的选项卡有很多个,一行显示不下,就需要把剩余的部分先隐藏,点击触发显示切换。如下图: 具体代码实现如下:默认显示第一个(下标是0),可视区域7个选项卡。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta...原创 2018-11-26 17:19:03 · 5603 阅读 · 2 评论 -
JavaScript 日期处理类库 Moment.js
官网地址:http://momentjs.cn/安装:bower install moment --save # bowernpm install moment --save # npmInstall-Package Moment.js # NuGetspm install moment --save # spmmeteor add momentjs:moment ...原创 2018-11-28 10:42:50 · 236 阅读 · 0 评论 -
js中object.keys()的用法
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。 传入对象, 返回 包含对象可枚举属性和方法的数组var obj = {'name': 'xiaoming', 'age': 18};console.log(Object.keys(obj)); // ["name","...原创 2018-12-12 17:22:37 · 22031 阅读 · 1 评论 -
react 插件处理 数字计算
import np from "number-precision"; // 转化成“万”为单位const money = (n) => { let m; if ((n / 1 >= 1) && (n / 10000 < 1)) { m = np.times(n, 1) + "元"; } else if (n / 10000 >= 1...原创 2019-01-07 14:38:54 · 2220 阅读 · 0 评论 -
转义特殊字符
传参过程中遇到 %¥#@&*encodeURIComponent(%¥#@&*)原创 2019-05-15 10:02:44 · 1089 阅读 · 0 评论 -
正则表达式:数字、字母、下划线、汉字
1.由数字、26个英文字母或者下划线组成的字符串: ^[0-9a-zA-Z_]{1,}$2.非负整数(正整数 + 0 ): ^/d+$3. 正整数: ^[0-9]*[1-9][0-9]*$4.非正整数(负整数 + 0): ^((-/d+)|(0+))$5. 负整数 : ^-[0-9]*[1-9][0-9]*$6.整数: ^-?/d+...原创 2019-05-15 10:11:19 · 7874 阅读 · 0 评论 -
react 配置接口公共端口号js文件
添加公共配置文件:env.js2.在项目index.js写入缓存中(注意在render函数前面)import Storage from "store2"; //Storage是一个插件// 写入缓存if (window.envConfig) {Object.keys(window.envConfig).forEach((item) => {Storage.set...原创 2019-06-21 10:42:02 · 817 阅读 · 0 评论 -
layui时间选择框,选择时间段
在web前端input,时间组件很常用,最近在使用layui的时间组件时,想用一个时间段,让后面的时间必须大于前面的时间<div class="layui-col-xs8"> <div class="layui-inline"> <label for="u_phone">下注时间 ≥:</label>原创 2018-04-20 17:36:09 · 10126 阅读 · 0 评论 -
layui加载数据显示loading加载完成loading消失
项目中,向后台请求数据,经常会出现较长的等待时间,这时我们需要一个loading转圈圈,接收到后台的数据时,让loading消失这layui中使用方法如下:以表格为例,每次加载表格数据时加一个loading<link rel="stylesheet" href="../layui/css/layui.css" /><script type="text/javascri...原创 2018-08-15 16:10:38 · 81896 阅读 · 0 评论 -
layui动态渲染生成左侧3级菜单(根据后台返回数据)
声明:这里非常感谢闲心大神,开源了非常好用的前端UI框架,layui,如有侵权请联系我。当然闲心在2.0版本的layuiAdmin已经支持了,不过是收费版的,需要的同学可以自行购买,网址:http://www.layui.com/admin/pro/本人在做管理后台事用到了左侧的导航列表,但是管理后台进来的菜单是根据不同账户的权限,显示不同的菜单。这时候需要动态的渲染左侧的列表。但是1.0版本...原创 2018-08-10 17:24:07 · 32522 阅读 · 26 评论 -
数组中随机选取一个元素
var Arr = ["a","b","c","d","e","f"]; var n = Math.floor(Math.random() * Arr.length + 1)-1; alert(Arr[n]);原创 2018-07-06 20:40:47 · 8964 阅读 · 0 评论 -
JQ数组去重
几行代码解决数组去重:本例通过Jquery的数组中的,$.inArray方法,来解决数组去重。//一个函数重复元素的数组var arr2 = [1,2,3,4,5,4,3,2,1];var new_arr=[];for(var i=0;i<arr2.length;i++) { var items=arr2[i]; //判断元素是否存在于new_arr中,如果不存在则...原创 2018-05-22 17:52:21 · 13116 阅读 · 0 评论 -
jQuery-easyUI Tree 后台返回json数据和官网例子有差别,如何处理
在使用jquery-easyUI 时,接收后台返回是数据,可能不是官网例子的一个大数组,而是一个对象包含,多个对象,再包含数组:官网json格式:[{ "id":1, "text":"Folder1", "iconCls":"icon-save", "children":[{ "text":"File1", &原创 2018-04-26 11:19:19 · 1156 阅读 · 0 评论 -
使用layer.photos点击不显示图片,没反应,解决方案
这项目中运用了layui这个css框架,在使用组件弹出相册时,遇到一个问题,按照官网文档,返回的json数据格式也是按照官网来的,但是不显示图片,这里有一个坑,如果你是吧官网例子粘贴过来修改如下:$.getJSON('/jquery/layer/test/photos.json', function(json){ layer.photos({ photos: json ,ani...原创 2018-04-25 19:52:35 · 9216 阅读 · 2 评论 -
js截取地址栏参数(数字,字符串,汉字等)
在项目开发中经常用到地址连传参,截取参数;这里给大家提供一个方法,直接调用:地址栏例子:http://127.0.0.1:8080/admin/html/user.html?id=6&name=德玛西亚我们要截取获得id和name<script> //截取字符串中文传参 function getUrlVal(key) { // 获取参数 var ...原创 2018-04-25 14:43:54 · 2465 阅读 · 0 评论 -
js如何在地址栏中截取对应参数的值
在web前端开发过程中,在页面跳转,地址栏传参时很普遍的事情,如果地址栏有很多参数,怎么一个个取值下来。话不多说,上代码:例子如地址栏为http://127.0.0.1:8080/deer_admins/html/seeAuditingScout.html?id=9&name=erge&age=18function getQueryString(name) { var reg ...原创 2018-04-20 16:41:51 · 1677 阅读 · 0 评论 -
js获取本地IP地址
<!DOCTYPE html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta http-equiv="Content原创 2018-03-27 16:47:54 · 11678 阅读 · 0 评论 -
tab选项卡切换后 刷新页面如何停留在当前选项卡页面
在项目中经常用到标题tab选项卡,来切换不同的内容,但是每次刷新后,都会回到默认显示页,如果在其他页面执行操作后刷新,跑到默认页而不是当前页,就很恶心了。本例主要是是利用H5的,sessionStorage缓存,来记录下标,从而在页面刷新时,回到相应的页面。记得引用JQuery,代码如下。css基于layui.css <div class="layui-tab layui-tab-brief...原创 2018-03-27 11:38:00 · 26403 阅读 · 14 评论 -
常用的15个正则表达式验证表单
1 用户名正则//用户名正则,4到16位(字母,数字,下划线,减号)var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;//输出 trueconsole.log(uPattern.test("caibaojian"));2 密码强度正则//密码强度正则,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符var pPattern = /^.*(?=...转载 2018-03-13 10:27:51 · 1719 阅读 · 0 评论 -
form表单以ajax方法提交,附加额外的数据
在项目中有个添加账户的模块,如下图。填写的信息以表单是形式ajax的方法提交,但是又需要添加额外信息给后台(比如:创建人),首先要引入JQuery.js库,和jquery.form.js var options = { url:weburl+"accounts/addAccounts", data:{c_name:userName}, success:function(data){ ...原创 2018-03-02 11:05:00 · 12249 阅读 · 0 评论 -
js获取本地ip地址
获取客户端IP[利用搜狐接口]<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> <script type="text/javascript"> document.write(returnCitySN["cip"]+','+returnCitySN["cname"])翻译 2018-07-09 18:10:05 · 2886 阅读 · 0 评论 -
layui表格(table)排序
layui表格本身提供sort排序,但是只能排序当前一页;如果后台返回几十页数据,需要排序显示,该如何做呢,这里闲心大神提供了一个sort监听方法:通过监听排序的列,把对应的参数传给后台,然后重渲染表格就行了 //监听表格排序问题 table.on('sort(test)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-fil...原创 2018-07-09 18:16:33 · 36144 阅读 · 0 评论 -
select回显数据选中对应的项
在执行一些表单修改时,一般是需要把后台返回的数据回显的,例如input使用val()来初始赋值,但是下拉框select回显数据,怎么选中对应的项呢?其实还可以用val()方法<select name="" class="appDay_item" id="level"> <option value="0">普通用户</option>原创 2018-07-09 18:23:59 · 5854 阅读 · 0 评论 -
数组去重(一行代码搞定)
let arr = [...new Set([1,'1',2,1,1,3,2,'4'])]console.log(arr);原创 2018-07-06 20:38:32 · 898 阅读 · 0 评论 -
js给动态生成元素绑定事件之事件委托方法on、live、delegate
什么是事件委托?事件委托就是利用冒泡的原理,把事件加到父元素或祖先元素上,触发执行效果。事件委托的好处:提高JavaScript性能。事件委托可以显著的提高事件的处理速度,减少内存的占用。应用场景:js动态生成的dom元素,无法直接操作,需要使用事件委托绑定方法。语法结构:例如 父id = “aaa”. 动态生成的span,需要绑定事件 $("#aaa").on('cli...原创 2018-07-23 19:12:04 · 2929 阅读 · 0 评论 -
js获取当前时间格式为yyyy-mm-dd
var date = new Date(); var seperator1 = "-"; var year = date.getFullYear(); var month = date.getMonth() + 1; var strDate = date.getDate(); ...原创 2018-07-17 17:55:44 · 1502 阅读 · 0 评论