js封装常用函数

自己封装函数时,参数最好不要超过3个,若要超过,可以用数组或者对象;
1. 利用(Math.random)写指定范围的随机数
2. 补零
3. 数组去重
4. 排序
5. 敏感词过滤
6. 判断数组中是否存在某一条数据,结果返回布尔值
7. 商品列表
8. 格式化日期
9. 获取行内样式


1. 利用(Math.random)写指定范围的随机数;

(1)随机数的公共方法

//Math.random()//0~1之间的随机数
//Math.round(Math.random()) 随机数四舍五入取整;
function random(a,b){return Math.round(Math.random()*(b-a) + a);
}

(2)数字字母的数据验证码

  var str = "";//用来生成一个随机验证码库for(var i=0; i<4; i++){var num = random(48,57);var sStr = random(97,122);var lStr = random(65,90);str = str + String.fromCharCode(num) + String.fromCharCode(sStr) + String.fromCharCode(lStr)}var result = "";for(var i=0; i<4; i++){var index = random(0,str.length-1);result += str[index];}console.log(result);function random(a,b){return Math.round(Math.random()*(b-a)+a);}

(3)十六进制的随机色

  var r = random(0,255).toString(16);var g = random(0,255).toString(16);var b = random(0,255).toString(16);var str = "#"+createZero(r)+createZero(g)+createZero(b);document.body.style.backgroundColor = str;function createZero(n){if(n < 10 || n.length < 2){return "0" + n;} else {return "" + n;}}function random(a,b){return Math.round(Math.random()*(b-a)+a);}

2. 补零

function crateZero(n){if(n < 10 || n.length < 2){//数值和字符的补零return "0" + n;} else {return "" + n;}
}

3. 数组去重

(1)利用 对象 添加属性得到undefined;
优点: 可以计算出重复的个数;
缺点: 当数字和字符形式的数字相同时,且同时出现在同一个数组中,该方法不好用;

var arr = ['a','b','a','a','b','a'];
var obj = {};
for(var i=0; i<arr.length; i++){if( obj[arr[i]] ){obj[arr[i]]++;} else {obj[arr[i]] = 1}
}
console.log(obj);//{a:4, b:2}
var newArr = [];
for(var key in obj){newArr.push(key);
}
console.log(newArr);//[a,b]

(2)用 indexOf() 方法

var arr = [3,5,6,2,1,8,5,4,2,"2"];var newArr = [];
for(var i = 0;i<arr.length; i++){if(newArr.indexOf(arr[i]) == -1){newArr.push(arr[i]);}
}
console.log(newArr);//(8) [3, 5, 6, 2, 1, 8, 4, "2"]

(3)利用 ES6 的 Set() 方法去重(不严格)

function norepeat(arr){var s = new Set(arr);var newArr = [];for(var i of s){newArr.push(i);}return newArr;
}

4. 排序

(1)冒泡排序

var arr = [12,9,6,8,3,4];
for(j = 0; j<arr.length-1; j++){for(var i = 0; i<arr.length-1-j; i++){if(arr[i] > arr[i+1]){var temp  = arr[i];arr[i] = arr[i+1];arr[i+1] = temp;		}}
}

(2)比较排序

var arr = [3,1,2,4,6,9];console.log(arr);for(var i = 0;i<arr.length; i++){var min = arr[i];//假设为最小值var minIndex = i;//最小值的indexfor(var j = i+1; j<arr.length; j++){ //i与后面所有的值做比较if(min > arr[j]){min = arr[j];minIndex = j;}}arr[minIndex] = arr[i];arr[i] = min}console.log(arr);

(3)用 sort() 方法排序(解决 sort() 按位排序问题)

//升序:
var arr2 = [2,101,6,58,3]
arr2.sort(function(a,b){return a-b;})
console.log(arr2);//(5) [2, 3, 6, 58, 101]//降序:
arr2.sort(function(a,b){return b-a;})
console.log(arr2);//(5) [101, 58, 6, 3, 2]

5. 敏感词过滤

(1)利用字符的 replace() 方法(这种方法耗内存,最好用正则)

var msg = ['fuck','tm','nnd','sb','sx'];//敏感词库
var str = "fuck,你tm真让人无语";//要说的话
for(var i=0;i<str.length;i++){msg.forEach( function (val,index){str = str.replace(val,"**");})
}
console.log(str);//**,你**真让人无语

(2)正则

var msg = ['fuck','tm','nnd','sb','sx'];//敏感词库
var str = "fuck,你tm真让人无语";//要说的话
for(var i=0; i<msg.length; i++){var reg = new RegExp(msg[i],"g");str = str.replace(reg,"**")
}
console.log(str);//**,你**真让人无语

6. 判断数组中是否存在某一条数据,结果返回布尔值;

var arr = [2,4,6,5,8,1]
function has(arr,num){for(var i=0; i<arr.length; i++){if(arr[i] === num){return true;}}return false;
}
console.log(has(arr,"1"));//false
console.log(has(arr,1));//true

7. 商品列表

(1)字符串拼接的方法

  var str = "";for(var i=0; i<data.length; i++){str += '<li>'+'<img src="'+data[i].src+'" alt="暂无图片">'+'<p>'+data[i].title+'</p>'+'<span>¥ '+data[i].price+'</span>'+'</li>'}var ul = document.querySelector('ul');ul.innerHTML = str;

8. 格式化日期

console.log(new Date()); //Tue Oct 08 2019 14:26:59 GMT+0800 (中国标准时间)
在这里插入图片描述

(1)将标准格式的时间改为: yyyy-mm-dd hh:mm:ss

var date = createDate("-");
console.log(date);  //Tue Oct 08 2019 14:26:59 GMT+0800 (中国标准时间)
function createDate(sign){var d = new Date();var y = d.getFullYear();var m = d.getMonth()+1;var mydate = d.getDate();var day = d.getDay();var h = d.getHours();var min = d.getMinutes();var s = d.getSeconds();switch(day){case 0: day = "星期日";bread;case 1: day = "星期一";bread;case 2: day = "星期二";bread;case 3: day = "星期三";bread;case 4: day = "星期四";bread;case 5: day = "星期五";bread;case 6: day = "星期六";bread;};return y +sign+ createZone(m) +sign+ createZone(mydate) +" "+ day +" "+ createZone(h) +":"+ createZone(min) +":"+ createZone(s);
}function createZone(n){if(n<10 || n.length<2){return "0"+n;} else {return ""+n;}
}

(2)时间戳 转 日期格式
时间戳为10位需*1000,时间戳为13位的话不需乘1000

console.log(new Date(1570518752234)); //Tue Oct 08 2019 14:26:59 GMT+0800 (中国标准时间)

9. 获取行内样式

function getStyle(ele,""){if(ele.currentStyle){//return ele.currentStyle.width;//当对象身上的属性是变量时,要用 [] 来访问,而不用 .return ele.currentStyle[attr];} else {return getComputedStyle(ele,false)[attr];
}
console.log( getStyle(obox,"height") )

10. 事件

(1)事件冒泡

var e = eve || window.event;
function stopBubble(e){if(e.stopPropagation){e.stopPropagation();} else {e.cancelBubble = true;}
}

(2)阻止默认事件

function stopDefault(e){if(e.preventDefault){e.preventDefault();} else {e.returnValue = false;}
}

(3)事件监听

  • 添加监听:
function addEvent(ele,type,callback){if(ele.addEventListener){ele.addEventListener(type,callback,false);} else if(ele.attachEvent){ele.attachEvent("on"+type,callback);} else {ele["on"+type] = callback;}
}addEvent(obox,"click",function(){console.log(1);
})//或者
addEvent(obox,"click",function())
  • 删除事件监听:
function removeEvent(ele,type,callback){if(ele.removeEventListener){ele.removeEventListener(type,callback,false);} else if(ele.detachEvent){ele.detachEvent("on"+type,callback):} else {ele["on"+type] = null;}
}removeEvent(obox,click,fn);

11. 封装 cookie

(1)添加:

function setCookie(key,value,num){
//不传num,默认会话级别。if(num){var  d = new Date();d.setDate(d.getDate()+num);document.cookie = key+"="+value+";expires="+d;} else {document.cookie = key+"="+value;	}
}

(2)删除:

function removeCookie(key){setCookie(key,"suiyizhi"-1);
}

(3)获取:

function getCookie(key){var str = document.cookie;for(var i=0; i<str.split("; ").length; i++){if(str.split("; ")[i].split("=")[0] == key){return str.split("; ")[i].split("=")[1];}}return ""; //没有该cookie时返回"",若不写这一句,则会显示成undfined。
}

12. 判断一个字符串是否以数字开头?

var str1 = "1a3";
var str2 = "aaa";
console.log( isNaN(parseInt(str1)) ); //false   是数字开头
console.log( isNaN(parseInt(str2)) ); //true  不是数字开头

13. 过滤空白节点

var list = obox.childNodes;
for(var i=0; i<list.length; i++){ //遍历所有节点if(list[i].nodeType == 1){  //元素节点的nodeType=1console.log(list[i]);}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362628.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JPA教程–在Java SE环境中设置JPA

JPA代表Java Persistence API&#xff0c;它基本上是一个规范&#xff0c;描述了一种将数据持久存储到持久存储&#xff08;通常是数据库&#xff09;中的方法。 我们可以将其视为类似于Hibernate的 ORM工具的东西&#xff0c;除了它是Java EE规范的正式组成部分&#xff08;并…

滚动条造成页面抖动问题

总结&#xff1a; 若用到 margin:0 auto; 使页面居中&#xff0c;若部分页面出现滚动条&#xff0c;滚动条默认有 20px&#xff0c;这样会造成页面抖动&#xff1b; 解决办法&#xff1a;参考 1. html{overflow:scoll;} 让页面一直显示滚动条。 overflow 的几个属性值&#xf…

ie 浏览器布局中的 offset

出现原因&#xff1a; 此处的offset的值表示的是盒子模型经过计算后的实际偏移量&#xff0c;通常是margin及定位偏移量之和&#xff08;flex布局导致的偏移也会计算在内&#xff09;。在此处也无需消除。 解决办法&#xff1a; 父元素设置宽高。设置margin为负数&#xff0…

MySQL集群(PXC)入门

一、学习动机 伴随互联网行业的兴起&#xff0c;越来越多的领域需要相应的技术方案&#xff0c;比如&#xff1a;打出软件、电商平台、直播平台、电子支付、媒体社交。 身边常见的&#xff0c;校园出成绩那一年&#xff0c;我们会感觉网站异常的卡顿&#xff0c;因为访问人数太…

滚动条那些事

一、滚动条样式 1. ie8浏览器 名称描述scrollbar-arrow-color三角箭头的颜色scrollbar-face-color立体滚动条的颜色&#xff08;包括箭头部分的背景色&#xff09;scrollbar-3dlight-color立体滚动条亮边的颜色scrollbar-highlight-color滚动条的高亮颜色&#xff08;左阴影&…

Javascript高级程序设计第二版第十四章--异常--笔记

chaepter 14 错误异常分享。 其实主要是就是try{}catch(error){} finally{}这个语句的理解。主要一点&#xff1a;finally 在 return 之后 运行。这跟java里边的如出一辙。 比如&#xff1a;try{return1;}catch(error){return2;} finally{return0;}返回 return 0;然后接着就是 …

HTML引入vue.js,在ie浏览器中不显示

因为只有两个页面&#xff0c;所以我没有用 vue-cli 搭框架&#xff0c;直接在 HTML 中引入vue.js 文件。发现其他浏览器都能正常显示&#xff0c;ie 下显示不正常&#xff0c;而且还报错&#xff0c;错误信息如下&#xff1a; 原因&#xff1a; 主要是因为 ie 不支持 ES6 的语…

具有Infinispan的聚集幂等消费者模式

我创建了一个小项目 &#xff0c;该项目展示了如何将JBoss Infinispan与Apache Camel和幂等消费者模式一起使用&#xff0c;以确保消息不会在集群环境中被处理两次。 假设您有一个应用程序&#xff0c;该应用程序必须通过将其部署在多个容器上才能轻松扩展。 但是应用程序必须…

基于 vue 的验证码组件

登录页面有个验证码&#xff0c;暂时没用到后台&#xff0c;在网上找了两个博客&#xff0c;记录一下。 一、直接写&#xff08;参考-UIEngineer&#xff09; 这个样式比较简单&#xff0c;直接在需要验证码的地方添加就行了。如果这个页面比较复杂&#xff0c;用组件会比较好…

在 HTML 中引入 vue.js 写页面

突然说要写两个页面&#xff08;只有两个页面&#xff0c;不是一个完整的项目。。&#xff09;&#xff0c;有点懵&#xff0c;不知道从哪下手&#xff0c;而且只对 vue 熟悉那么一丢丢&#xff0c;其他框架不是很熟悉。但是没办法鸭&#xff0c;只能硬着头皮去做了&#xff01…

Mschart图表制作

首先一次安装这三个 &#xff08;1&#xff09;.Microsoft .NET Framework 3.5 的 Microsoft 图表控件 &#xff08;2&#xff09;.Microsoft .NET Framework 3.5 语言包的 Microsoft 图表控件 &#xff08;3&#xff09;.Microsoft Chart Controls Add-on for Microsoft Visua…

vue打包后,font格式错误

本地测试没有问题&#xff0c;项目打包以后&#xff0c;浏览器打开控制台&#xff0c;提示font格式错误&#xff1a; 把我的双引号给去掉了。。。-^- 不开心。 解决办法&#xff1a; 1. 把 font: 字体粗细 字体大小/行高 "字体样式"; 分开来写。 改成&#xff1a;…

html笔记(四)弹性盒+响应式

大标题小节一、弹性盒1. 标准盒模型和怪异盒模型2. 弹性盒dipalay3. 与display配合使用的其他属性4. 弹性盒的对齐方式5. 弹性盒的默认特性二、响应式布局1. 媒体查询2. 怎样使用媒体查询3. 优缺点以及使用场景4. Meta 标签的定义5. 常见的属性操作三、多列布局四、移动端布局1…

享受Android应用程序的Java技术盛宴

Java™ 语言是 Android 开发人员所选的工具。Android 运行时使用自己的虚拟机Dalvik&#xff0c;这并不是多数程序开发人员使用的普通Java 虚拟机。Dalvik支持Java 编程语言的大部分功能——但并不是全部。在本文中&#xff0c;您将学习高级Java功能及其如何在Android中实现。这…

echarts地图在ie浏览器上不显示

前面是安装及上手教程&#xff0c;参考了彩色泡泡 和 winne雪 的博客。 如果已经写好了&#xff0c;可以直接跳到 问题总结。 1. npm install echarts --save 2. 在 main.js 中 import echarts from echarts; Vue.prototype.$echarts echarts;3. 在页面上 import china fr…

虚拟主机上快速安装kail

官方文档的筛选 【1】Kali Linux是什么? Kali Linux是一个高级渗透测试和安全审计Linux发行版. Kali Linux 特性 Kali是BackTrack Linux完全遵循Debian开发标准的完整重建.全新的目录框架、复查并打包所有工具、还为VCS建立了Git 树. 超过300个渗透测试工具: 复查了BackTrack里…

Java并发教程–线程之间的可见性

当在不同线程之间共享对象的状态时&#xff0c;除了原子性外&#xff0c;其他问题也会发挥作用。 其中之一是可见性。 关键事实是&#xff0c;如果没有同步&#xff0c;则不能保证指令按照它们在源代码中出现的顺序执行。 这不会影响单线程程序中的结果&#xff0c;但是&#…

让element-ui的输入框聚焦的4种方式

方法一、绑定ref 方法二、通过自定义事件中的事件对象 $event&#xff0c;找到input 方法三、使用自定义指令 方法四、使用原生input 方法一、绑定ref——参考yiyueqinghui <el-input v-model"form.name" ref"name"></el-input> this.$refs.n…

控制台打印三角形、菱形

一、 打印三角形 要求&#xff1a; 打印如下类似的三角形 * *** ***** ******* 效果&#xff1a;思路&#xff1a; &#xff08;1&#xff09; 空格每往下一层少一个。 &#xff08;2&#xff09; *是奇数数列&#xff0c;&#xff08;i – 1&#xff09;* 2 1 核心代码&#…

《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」

此文是我的出版书籍《React Native 精解与实战》连载分享&#xff0c;此书由机械工业出版社出版&#xff0c;书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战&#xff0c;以及 React Native 与 iOS、Android 平台的混合开发底层原理…