JavaScript
JavaScript
Mosowe
vue(2/3),react,uniapp,小程序,javascript,typescript,node
展开
-
@mosowe2/js:一款业务功能插件
@mosowe2/js原创 2022-11-26 10:18:52 · 177 阅读 · 0 评论 -
常用业务js组件:canvas绘图、时间戳转换、正则验证、深拷贝等
先推荐一个npm包【mosowejs】,对没错,用我的专用名称命名的js,点击可以查看示例,手机,PC均可,内部包含了N多日常开发用到的:正则验证(手机号,座机号,中英文,数字,url等等),常用的一些方法(时间格式化-年月日时分秒季度周数天数,数字千分位,数据脱敏,数据千分位,复制等等等),一些数据类型判断(移动端PC判断、object,number,string…)常用canvas绘图(海报图,裁剪类的有涂抹裁剪,多边形裁剪)基于document开发,同类的跨端插件uniapp点此支持NP原创 2022-03-03 09:25:27 · 1006 阅读 · 0 评论 -
input离屏文件选择
/** * 离屏文件选择 */const createUpload = (callback: Function) => { const inputObj = document.createElement('input'); inputObj.setAttribute('type', 'file'); inputObj.setAttribute('name', 'file'); inputObj.setAttribute('accept', '.xlsx,.xls'); in原创 2022-02-07 09:40:52 · 365 阅读 · 0 评论 -
javascript:点击复制
// 点击复制/** * 浏览器兼容性测试:google,QQ,360,搜狗,火狐,Edge,opera,双核,UC,浏览器兼容模式除外(未测) */export const copy = (text:string) => { const input = document.createElement('input'); document.body.appendChild(input); input.setAttribute('value', text); input.selec原创 2021-11-26 10:54:21 · 618 阅读 · 0 评论 -
javascript:判断值是否是number浮点数及小数位数
// 判断是否浮点数,使用:Number().isFloat(number,3)// maxLen: 小数位数Number.prototype.isFloat = function (number: number | string, maxLen?: number) { if (!isNaN(Number(number)) && number.toString().indexOf('.') > -1) { if (maxLen) { return numbe原创 2021-11-18 16:49:24 · 2598 阅读 · 0 评论 -
javascript: ES6中的可选链操作符,空值合并运算符等
文章目录获取object所有键的值:ES6中的可选链操作符: ?ES6中新出的空值合并运算符: ??Promise并发请求获取object所有键的值:let obj = { a:1, b:2, c:3}Object.values(obj) //[1, 2, 3]ES6中的可选链操作符: ?// es5const name = obj && obj.name;// es6const name = obj?.name;// obj是已经声明过的E原创 2021-10-08 16:51:53 · 561 阅读 · 0 评论 -
javascript:深拷贝
JSON.stringifylet y = {a:1}let o = { n:1, b:true, t:new Date(), o:{ a:1 }, z:/123/, f:()=>{ console.log(1) }, k:null, nk:NaN, [Symbol('sn')]:'123', sv:Symbol('999'), un:undefined,原创 2021-10-08 15:19:31 · 86 阅读 · 0 评论 -
javascript:字符串方法
let str = ‘abcdefghgfedcba’字符串长度:length获取字符串指定位置的值charAt()返回值str.charAt(2) // cstr[2] // cstr.charAt(30) // ''str[30] // undefinde当index的取值不在str的长度范围内时,str[index]会返回undefined,而charAt(index)会返回空字符串;注意:str[index]不兼容ie6-ie8,charAt(index)可以兼容。cha原创 2021-09-26 15:29:31 · 790 阅读 · 0 评论 -
javascript:数组去重及遍平化
数组去重for循环+indexOffor循环+includesforEachfiltermap数组扁平化Array.prototype.flat()let a = [1,2,[3,4,5,[6,7,[8,9]]]]a.flat() // [1, 2, 3, 4, 5, [6, 7, 8, 9]] flat()默认只拉平一层a.flat(2)// [1, 2, 3, 4, 5, 6, 7, [8, 9]] flat(2)拉平两层a.flat(Infinity)// [1, 2,原创 2021-09-22 10:39:43 · 102 阅读 · 0 评论 -
javascript:内存
弱类型语言编译时不能确定变量的类型,在运行时计算和决定类型会降低效率8种数据类型:Number 、 Boolean 、 Null 、 String 、 Symbol 、 Undefined 、 BigInt 、 Object ,其中object为引用数据类型,其余七种则是基本数据类型js内存管理栈内存: 创建执行上下文的调用栈,栈是一种特殊的列表,栈内的元素只能通过列表的一端访问,这一端称为栈顶。 栈被称为是一种后入先出(LIFO,last-in-first-out)的数据结构。 由于栈具.原创 2021-09-22 10:32:50 · 137 阅读 · 0 评论 -
javascript:一些知识点
对象创建的几种模式(常用)工厂模式,创建方式function createPerson(name,age,job){ var o = new Object(); o.name=name; o.age=age; o.job=job; o.sayName = function(){ alert(this.name); } return o}var person1 = createPerson("da",1,"it");pers原创 2021-09-22 10:26:46 · 97 阅读 · 0 评论 -
js:自定义Date原型链格式化方法
Date.prototype.Format = function (fmt:string) { let o:any = { 'M+': this.getMonth() + 1, // 月份 'D+': this.getDate(), // 日 'h+': this.getHours(), // 小时 'm+': this.getMinutes(), // 分 's+': this.getSeconds(), // 秒 'q原创 2021-09-07 15:08:25 · 323 阅读 · 0 评论 -
javascript:模拟点击事件
let e = document.createEvent('MouseEvents');e.initEvent('click', true, true);document.getElementById('printBtn').dispatchEvent(e);原创 2021-06-11 17:28:28 · 1711 阅读 · 0 评论 -
js:使用a标签下载图片及pdf文件等资源
一个PC端的项目(vue),开发是在google浏览器测试的,刚开始是使用的以下代码实现文件下载,图片,pdf,doc等:openDownload(link, name) { const x = new XMLHttpRequest(); x.open('GET', link, true); x.responseType = 'blob'; x.onload = function () { const url = window.URL.cre原创 2021-03-17 15:07:52 · 3803 阅读 · 0 评论 -
js:判断页面显示
在移动端开发中,遇到这样的一个问题,在一个网站跳出到另一个网站,返回的时候需要触发下相关行为,通常情况下在安卓手机中vue的相关声明周期可以实现触发,但是在ios部分浏览器中,跳去另一个网站后回退,并不会触发vue的相关生命周期,ios这类浏览器就像是pc浏览器上面新建一个tab,回退就像是切换tab,所以我添加下面这串代码,监听页面的显示,并搞事情:window.addEventListener('pageshow', function (event) { // 页面显示后处理的东西});.原创 2021-02-23 11:57:02 · 638 阅读 · 0 评论 -
vue:vue实现H5复制文本到剪切板
安转插件npm install vue-clipboard2 --save全局引入:main.jsimport VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)使用<div class="paste" v-clipboard:copy="'MHKJ51DFJ263H'" v-clipboard:success="copyCode" v-clipboard:error="copyCodeError">复制券.原创 2020-11-09 19:21:33 · 1124 阅读 · 0 评论 -
javascript:简单手写原生js接口请求,类似ajax
function myAjax (params) { return new Promise((resolve, reject) => { if (!params.url) { console.log('url不能为空') } let request = null; if(window.XMLHttpRequest){ request=new XMLHttpRequest(); }else{ request=new Ac原创 2020-10-16 14:39:00 · 741 阅读 · 0 评论 -
es6:组件的创建与使用(含es5)
之前写过es5的组件(忘得差不多了...瞄一眼还是能拾起来的),后来学习es6的时候也写过,今天把它记下来。es5的基本写法如下: function dialog(){ this.settings = { x: '', y: '', success: function (data) {} //...原创 2020-03-03 09:59:48 · 947 阅读 · 0 评论 -
vue:移动端判断键盘事件,兼容安卓ios
if (!this.$isIos) { // 安卓端 const innerHeight = window.innerHeight; window.addEventListener('resize', () => { const newInnerHeight = window.innerHeight; if (innerHeight > newInnerHeight) { // 键盘弹出事件 ...原创 2020-09-27 12:19:58 · 946 阅读 · 0 评论 -
javascript:修改blob的name
let blob = new Blob([u8arr], { type: mime }); let file = new File([blob], new Date().getTime() + '.png');原创 2020-09-21 17:03:59 · 4206 阅读 · 0 评论 -
javascript:数字转“万“ 过滤器
// 数字转"万" 过滤器Vue.filter('numberTextFormat', (value) => { if(value !== undefined && value !== null) { if(Number(value) < 10000) { let str = value.toString(); let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)原创 2020-09-14 17:43:24 · 495 阅读 · 0 评论 -
javascript:数字三位加逗号过滤器
// 数字三位加逗号过滤器Vue.filter('numberFormat', (value) => { if(value !== undefined && value !== null) { let str = value.toString(); let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g; return str.replace(r原创 2020-09-14 17:42:48 · 414 阅读 · 0 评论 -
js:file转base64
代码:/** * file转base64*/const blobToDataURL = (blob, cb) => { let reader = new FileReader(); reader.onload = function (evt) { let base64 = evt.target.result; cb(base64); }; reader.readAsDataURL(blob);};export default blobToDataURL;原创 2020-09-14 15:46:17 · 11640 阅读 · 3 评论 -
移动端:H5判断浏览器类型
先获取浏览器信息let ua = navigator.userAgent.toLowerCase(); // 这里将所有字母转小写console.log(ua);我们看看移动端不同浏览器的信息(部分举例,个人见解):浏览器ua展示的信息safari浏览器mozilla/5.0 (iphone; cpu iphone os 13_5_1 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/13.1.1原创 2020-07-30 11:42:44 · 3890 阅读 · 0 评论 -
javascript:时间戳格式化
// 时间戳转yy-mm-ddexport const timeFormat = (date, formatStr) => { if (date.toString().indexOf('.') > -1 || date.toString().indexOf('-') > 0 || date.toString().indexOf('/') > -1) { return date; } if (typeof date === 'number' ||.原创 2020-07-16 17:48:30 · 359 阅读 · 0 评论 -
javascript:字符串动态替换***
上代码:/** * 数据替换 *** 号 * @val 要替换的数据 * @head 头部保留,默认3 * @last 尾部保留,默认4*/export const replaceStar = (val, head = 3, last = 4) => { if (!val) { // 字符串为空直接返回 return val; } if (val.length <= 10) { // 少于十位的字符串只显示前三位 last = 0; } let原创 2020-07-16 17:27:25 · 1029 阅读 · 0 评论 -
javascript:正则表达式
邮箱/^\w+(\.)?(\w+)?@[0-9a-z]+(\.[a-z]+){1,3}$/手机号/^1[3456789]\d{9}$/数字/^\d+$/身份证/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/护照/^1[45][0-9]{7}|([P|p|S|s]\d{7})|([S|s|G|g]\d{8})|([Gg|Tt|Ss|Ll|Qq|Dd|Aa原创 2020-07-16 16:52:38 · 259 阅读 · 0 评论 -
javascript:数组求和之eval函数,多维数组求和
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。语法eval(string)string必须是一个合法的表达式和语句,否则抛出异常示例 let a = [1,2,3,4,5,6,7,8,9] console.log(eval(a.join('+'))) // 45 console.log(eval("x=10;y=20...原创 2020-04-14 17:35:51 · 2175 阅读 · 0 评论 -
javascript:函数、setTimeout、setInterval与for循环执行顺序
setTimeout(() =>{ console.log('函数外延时器') },0) let m = 0 let t = setInterval(() => { m++ console.log('函数外部setInterval=='+m) if (m > 3) {...原创 2020-04-14 16:36:47 · 1202 阅读 · 0 评论 -
javascript:常用javascript Object方法
Object.prototype.hasOwnProperty()方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)语法obj.hasOwnProperty(prop)示例 let a={ name:'hjj', age:28 } console.log(a.hasOwnPrope...原创 2020-04-14 15:40:47 · 266 阅读 · 0 评论 -
vue:js获取当前电脑的ip
mounted () { this.getUserIP((ip) => { this.ip = ip; console.log(ip); }); }, methods: { // 获取电脑ip getUserIP (onNewIP) { let MyPeerConnection = window...原创 2019-10-17 15:19:14 · 12092 阅读 · 10 评论 -
类似心电图的报表
在即将离职上家东家的时候,程序部一同事在网上找了很久没有找到设计师设计的那类样式的报表,于是我当天给他写了个雏形,这个周末整理了一下,但还有我想要的功能没有加上,后面有时间继续添加,但是现在这个依旧可以用,若有不足,欢迎留言评论。先看下截图参数: "canvansWrapper":'', //包裹canvans的盒子id "canvansId":'', ...原创 2018-03-05 14:28:01 · 823 阅读 · 0 评论 -
关于setInterval只执行一次的原因
我在做一个demo的时候发现的,之前可能遇到过到时没有记住,也没有写下原因。setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。以下是我的demo片段。js代码:function arrow(){ $(".arrow-box .arrow1").animate({top:'-20px'},2000,function () { ...原创 2018-02-26 14:20:01 · 26147 阅读 · 15 评论 -
解决ie9以下不兼容getElementsByClassName的方法
/** * 解决ie9以下不兼容getElementsByClassName的方法 * className class名称 */function getClassNames(className){ if (document.getElementsByClassName) { return document.getElementsByClassName(c转载 2018-01-16 16:51:02 · 1238 阅读 · 0 评论 -
javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下:网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正转载 2017-12-29 15:09:53 · 1925 阅读 · 0 评论 -
js冒泡事件处理函数
function stopEvent(event){ var e=arguments.callee.caller.arguments[0]||event; if (e && e.stopPropagation) { e.stopPropagation(); } else if (window.e转载 2017-12-27 15:07:06 · 527 阅读 · 0 评论 -
粗见之正则表达式
概念:正则:也叫做规则,让计算机读懂人类的规则;正则都是操作字符串的;写法:简写:var re = //;双斜杠会被浏览器默认为注释,所以在里面添加需要操作的元素,例:var re = /a/;全称写法:var re = new RegExp(‘a’);当正则需要传参的时候,一定要用全称的写法:例参数为obj==>var re = new RegExp(ob原创 2017-08-02 18:31:40 · 352 阅读 · 0 评论 -
JavaScript之拖拽功能、封装
通过之前一段时间的学习,逐步掌握了JavaScript的一些基本语法,学完之后还得多加练习,根据所学知识,做了一个简易的拖拽功能。首先先布好html结构,包括样式,这里简单的做了两个拖拽的功能,一个相对于document,一个相对于id = ‘box’,为了消除浏览器自带的文本拖拽功能,添加了一行文字;演示地址html代码:<!doctype html><html>&l...原创 2017-07-03 00:10:12 · 645 阅读 · 0 评论 -
JavaScript之正则表达式验证邮箱,手机号码,身份证,网址,QQ,邮政编码,中文
今天要跟大家分享的是正则表达式的各种常用验证方式:邮箱,手机号码,身份证,网址,QQ,邮政编码,中文;之前一直不知道正则是咋回事,网上查阅的也是看得蒙头转向,只要搞懂了表达式的各种语法符号,做一个验证还是比较容易的,逻辑还在,江山依旧。现在我就跟大家分享分享正则验证,这里我将上诉集中验证都封装在proof函数里面,通过json方式将它们的正则表达式存储下来,通过调用不同的json键值实现不同的验证...原创 2017-07-04 02:18:06 · 3392 阅读 · 3 评论 -
JavaScript之DOM
JavaScript之DOMDOM:document object model ==>文档操作模型节点类型:note.noteTypea) 元素节点 :数字1b) Document : 数字9c) 文本节点:数字3(文字,空格,换行....)d) 注释节点:数字8e) 属性节点:数字2f) ChildNodes:类数字i. 获取摸个节点下的所有子节点ii原创 2017-07-03 00:00:09 · 219 阅读 · 0 评论