npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

layout-dynamic-utils

v0.0.2

Published

Summarize and sort out the commonly used javascript methods

Downloads

4

Readme

layout-dynamic-utils

归纳整理常用的js工具包

使用方式

npm i layout-dynamic-utils

一、目的

对使用频率较高的函数进行封装,便于快速开发,避免重复 造轮子。

1.changeImagePath 修改图片路径,通常在加载服务器图片时使用。

2.uuid 获取到唯一编码

3.getDateByNumber 根据数字获取日期。当日期为时间戳时调用。

4.getYearDiff 获取日期之间的年份差。

4.getMonthDiff 获取日期之间的月份差。

4.getDayDiff 获取日期之间的天数差。

5.getDate 获取日期。

6.getTime 获取时间。

7.getDateTime 获取日期时间。

0.0.2+ 29.getWeek获取当前星期几

8.getTimeSplit 获取时间段,形如:早晨,中午,上午,晚上,凌晨等。

9.pingyin 获取拼音检索码

10.randomNum 得到随机数字 (包前不包后)。

11.randomNumFormula 得到随机计算公式,常用到验证码加减乘除验证。

12.randomChar 得到随机字符[0-9a-z]。

13.bigHumpToSmall 大驼峰转小驼峰。 getName=>get_name

14.smallHumpToBig 小驼峰转大驼峰。 get_name=>getName

15.firstCharCmallHumpToBig 小驼峰转大驼峰,并首字母大写。 get_name=>GetName

16.objConverArray 将对象转换成数组。 {a:1,b:2,c:3}=>[{"$key":"a","$value":1},{"$key":"b","$value":2},{"$key":"c","$value":3}]

17.hashCode 得到hashCode。

18.getDataType 获取数据类型。int float string object array

19.objToParam 对象转url字符串。{a:1,b:2,c:3} => a=1&b=2&c=3& 或者 ?a=1&b=2&c=3&

20.urlToObj url字符串 转成 将对象。a=1&b=2&c=3& 或者 ?a=1&b=2&c=3& =>{a:1,b:2,c:3}

21.digitUppercase 金额大写。 123123213.34 =>壹拾贰万叁仟肆佰伍拾陆元叁角肆分

22.insertToStr 指定下标位置插入字符串。insertToStr("123456",2,"a") => 12a3456

23.insertAndReplaceToStr 指定下标位置插入字符串。insertAndReplaceToStr("12345",2,4,"ab") => 12ab5

25.idCardCheck 验证身份证号码

26.getIp 获取ip

27.cookie cookie操作

28.copyToClipboard复制内容到剪贴板

二、函数说明

changeImagePath

修改图片路径,通常在加载服务器图片时使用。

参数

|参数名称|类型|为空|说明| |:---|:---|:---|:---| |url|String|可为空|图片地址| |serverPath|String|可为空|服务器地址前缀| |defaultPath|String|可为空|当图片地址为空时,返回一个默认的地址|

示例


this.$ld.util.changeImagePath ("fileUpload/1/2/3/4.png","http://127.0.0.1:8080/test"); //"http://127.0.0.1:8080/test/fileUpload/1/2/3/4.png"

this.$ld.util.changeImagePath ("","http://127.0.0.1:8080/test","http://127.0.0.1:8080/test/default/default.png");//"http://127.0.0.1:8080/test/default/default.png"

uuid

获取到唯一编码

参数

|参数名称|类型|为空|说明| |:---|:---|:---|:---| |len|Number|可为空|uuid长度;取值范围为(2-36),默认为16位| |binary|Number|可为空|参数进制,如16进制,2进制,8进制等;取值范围为(2-36)|

示例


//1.普通使用
this.$ld.util.uuid(); //81869db0-cdb6-48a2-83dd-f9c7d7132aa3

//2.限制长度
this.$ld.util.uuid(32);//89dc93f8-f242-447f-9348-85f40f3a

//3.指定进制编码
this.$ld.util.uuid(32,34);//segpemtu-jk11-49r2-atkd-ui0v87pf

getDateByNumber

根据数字获取日期。当日期为时间戳时调用。

参数

|参数名称|类型|为空|说明| |:---|:---|:---|:---| |date|Date|不可为空|要转换的日期数字格式|

示例


//1.普通使用 将1593317580211转成日期
this.$ld.util.getDateByNumber ('1593317580211');//"2020-06-28 12:13:00"

getYearDiff

获取日期之间的年份差

参数

|参数名称|类型|为空|说明| |:---|:---|:---|:---| |endDate|String\Date|不为空|结束日期| |startDate|String\Date|不为空|开始日期|

示例


//1.普通使用
this.$ld.util.getYearDiff('2020-6-28 11:43:08','2020-5-28 11:43:20'); //0

//2.结束日期小于开始日期 ,返回负值
this.$ld.util.getYearDiff('2021-6-28 11:43:08','2020-7-28 11:43:20');//1

getMonthDiff

获取日期之间的月份差

参数

|参数名称|类型|为空|说明| |:---|:---|:---|:---| |endDate|String\Date|不为空|结束日期| |startDate|String\Date|不为空|开始日期|

示例


//1.普通使用
this.$ld.util.getMonthDiff('2020-6-28 11:43:08','2020-5-28 11:43:20'); //1

//2.结束日期小于开始日期 ,返回负值
this.$ld.util.getMonthDiff('2021-6-28 11:43:08','2020-7-28 11:43:20');//11

getDayDiff

获取日期之间的天数差

参数

|参数名称|类型|为空|说明| |:---|:---|:---|:---| |endDate|String\Date|不为空|结束日期| |startDate|String\Date|不为空|开始日期|

示例


//1.普通使用
this.$ld.util.getDayDiff('2020-6-28 11:43:08','2020-5-28 11:43:20'); //30

//2.结束日期小于开始日期 ,返回负值
this.$ld.util.getDayDiff('2020-6-28 11:43:08','2020-7-28 11:43:20');//-30

getDate

获取日期

参数

|参数名称|类型|为空|说明| |:---|:---|:---|:---| |addDay|Number|可为空|要添加的天数| |date|Date|可为空|计算的日期,默认为当前日期|

示例


//1.普通使用
this.$ld.util.getDate(); //"2020-06-28"

//2.在当前日期的基础上 +3天
this.$ld.util.getDate(3);//"2020-07-01"

//3.在当前日期的基础上 -10天
this.$ld.util.getDate(-10);//"2020-06-18"

//4.在指定的日期的基础上计算添加天数后的日期
this.$ld.util.getDate(3,new Date('2020-6-30'));//"2020-07-03"

getTime

获取时间

参数

|参数名称|类型|为空|说明| |:---|:---|:---|:---| |addMillisecond|Number|可为空|要在添加的毫毛(1分钟 = 1*60*1000)| |date|Date|可为空|计算的日期,不传时默认为当前日期|

示例


//1.普通使用
this.$ld.util.getTime(); //"11:31:59"

//2.在当前时间的基础上 +30分钟
this.$ld.util.getTime(30*60*1000);//"11:36:57"

//3.在当前时间的基础上 -1小时
this.$ld.util.getTime(-1*60*60*1000);//"10:37:47"

//4.在指定的日期的基础上计算添加后的时间
this.$ld.util.getTime(1*60*1000,new Date('2020-6-30 11:20:22'));//"11:21:22"

getDateTime

获取日期时间

参数

|参数名称|类型|为空|说明| |:---|:---|:---|:---| |addDay|Number|可为空|要在添加的毫毛(1分钟 = 1*60*1000)| |date|Date|可为空|计算的日期,不传时默认为当前日期|

示例


//1.普通使用
this.$ld.util.getDateTime(); //"2020-06-28 11:39:29"

//2.在当前日期的基础上 +1天
this.$ld.util.getDateTime(1);//"2020-06-29 11:39:58"

//3.在当前时间的基础上 -1天
this.$ld.util.getDateTime(-1) //"2020-06-27 11:41:10"

//4.在指定的日期的基础上计算添加后的日期
this.$ld.util.getDateTime(1,new Date('2020-6-30 11:20:22'));//"2020-07-01 11:20:22"

getWeek

获取当前日期或指定日期的星期

参数

|参数名称|类型|为空|说明| |:---|:---|:---|:---| |dateTime|String|可为空|要获取指定日期| |lang|Date|可为空|返回类型cn:中文,en:英文,en_simple:英文简写|

示例


//1.普通使用
this.$ld.util.getWeek(); //"星期二"

//2.指定返回类型
this.$ld.util.getWeek('en'); //"Tuesday"
this.$ld.util.getWeek('en_simple'); //"Tue"

//3.获取指定日期是周几
this.$ld.util.getWeek('2021-8-18');//"星期三"

//4.对指定日期输出指定的格式
this.$ld.util.getWeek('2021-8-20','cn') //"星期五"
this.$ld.util.getWeek('2021-8-20','en') //"Friday"
this.$ld.util.getWeek('2021-8-20','en_simple') //"Fri"

getTimeSplit

获取时间段,形如:早晨,中午,上午,晚上,凌晨等。

参数

|参数名称|类型|为空|说明| |:---|:---|:---|:---| |dateTime|String\Date|可为空|要计算的日期[yyyy-MM-dd HH:mm:ss] ,默认为当前日期|

示例


//1.普通使用 获取当前时间
this.$ld.util.getTimeSplit(); //"上午"

//2.结束日期小于开始日期 ,返回负值
this.$ld.util.getTimeSplit('2020-4-28 17:43:08');//"傍晚"

pingyin

获取拼音检索码

参数

|参数名称|类型|参数|说明| |:---|:---|:---|:---| |chineseToPinYin|Function|str|计算汉字获得汉字拼音| |getFirstChar|Function|str|计算汉字获得汉字首字母拼音|

示例


//1.计算汉字获得汉字拼音
this.$ld.util.pingyin.chineseToPinYin("上午"); //"shangwu"

//2.计算汉字获得汉字首字母拼音
this.$ld.util.pingyin.getFirstChar("上午");//"sw"

randomNum

得到随机数字 (包前不包后)。

参数

|参数名称|类型|为空|说明| |:---|:---|:---|:---| |min|Number|不为空|随机字符产生的最小值 (包含最小值)| |max|Number|不为空|随机字符产生的最大值 (不包含最大值)| |type|Number|可为空|产生的随机方式【0 只保留整数(默认值) 1 向上取整(只对小数起作用) 2 向下取整(只对小数起作用) 3 四舍五入(只对小数起作用)】|

示例


//1.普通使用
this.$ld.util.randomNum(0,10);//"2"

//2.使用type
this.$ld.util.randomNum(6.01,60.10,1);//"39"

randomNumFormula

得到随机计算公式,常用到验证码加减乘除验证。

参数

示例

//普通使用
this.$ld.util.randomNumFormula();//"5+4"

randomChar

得到随机字符[0-9a-z]。

参数

|参数名称|类型|为空|说明| |:---|:---|:---|:---| |len|Number|不为空|随机字符产生的长度|

示例

//普通使用
this.$ld.util.randomChar(10);//"3c0qh4ctcj"

bigHumpToSmall

大驼峰转小驼峰。 getName=>get_name

参数

|参数名称|类型|为空|说明| |:---|:---|:---|:---| |str|String|不为空|转换的字符|

示例

this.$ld.util.bigHumpToSmall("getName");//get_name

smallHumpToBig

小驼峰转大驼峰。 get_name=>getName

参数

|参数名称|类型|为空|说明| |:---|:---|:---|:---| |str|String|不为空|转换的字符|

示例

this.$ld.util.smallHumpToBig("get_name");//getName

firstCharCmallHumpToBig

小驼峰转大驼峰,并首字母大写。 get_name=>GetName

参数

|参数名称|类型|为空|说明| |:---|:---|:---|:---| |str|String|不为空|转换的字符|

示例

this.$ld.util.firstCharCmallHumpToBig("get_name");//GetName

objConverArray

将对象转换成数组。 {a:1,b:2,c:3}=>[{"$key":"a","$value":1},{"$key":"b","$value":2},{"$key":"c","$value":3}]

参数

|参数名称|类型|为空|说明| |:---|:---|:---|:---| |obje|Object|不为空|转换的对象|

示例

this.$ld.util.firstCharCmallHumpToBig("{a:1,b:2,c:3}");//[{"$key":"a","$value":1},{"$key":"b","$value":2},{"$key":"c","$value":3}]

hashCode

得到hashCode。

参数

|参数名称|类型|说明| |:---|:---|:---| |str|String|要计算的字符串|

示例


//1.普通使用 计算字符串
this.$ld.util.hashCode('https://www.jianshu.com/p/96ecaa2cc989');//582844592
//2.使计算其他类型
this.$ld.util.hashCode([1,2,3,42,5]);//-528217203

getDataType

获取数据类型。int float string object array

参数

|参数名称|类型|说明| |:---|:---|:---| |any|any|要计算的数据|

示例

this.$ld.util.getDataType(1);//int
this.$ld.util.getDataType(1.1);//float
this.$ld.util.getDataType("1");//string
this.$ld.util.hashCode([1,2,3,42,5]);//array
this.$ld.util.hashCode({a:1,b:2,c:3});//object

objToParam

对象转url字符串。{a:1,b:2,c:3} => a=1&b=2&c=3& 或者 ?a=1&b=2&c=3&

参数

|参数名称|类型|说明| |:---|:---|:---| |obj|Object|要转换的对象| |isStartChart|Boolean|是否是开始字符,是则会追加?|

示例

this.$ld.util.objToParam({a:1,b:2,c:3});//a=1&b=2&c=3
this.$ld.util.objToParam({a:1,b:2,c:3},true);//?a=1&b=2&c=3

urlToObj

url字符串 转成 将对象。a=1&b=2&c=3& 或者 ?a=1&b=2&c=3& =>{a:1,b:2,c:3}

参数

|参数名称|类型|说明| |:---|:---|:---| |obj|Object|要转换的对象| |isStartChart|Boolean|是否是开始字符,是则会追加?|

示例

this.$ld.util.urlToObj("http://127.0.0.1:8080/test/getInfo?a=1&b=2&c=3");//{a: "1", b: "2", c: "3", action: "http://127.0.0.1:8080/test/getInfo"}
this.$ld.util.urlToObj("a=1&b=2&c=3");//{a: "1", b: "2", c: "3"}
this.$ld.util.urlToObj("?a=1&b=2&c=3");//{a: "1", b: "2", c: "3"}

digitUppercase

金额大写。 123123213.34 =>壹拾贰万叁仟肆佰伍拾陆元叁角肆分

参数

|参数名称|类型|说明| |:---|:---|:---| |money|Number|要转换的数字|

示例

this.$ld.util.digitUppercase(" 123123213.34");//壹拾贰万叁仟肆佰伍拾陆元叁角肆分

insertToStr

指定下标位置插入字符串。insertToStr("123456",2,"a") => 12a3456

参数

|参数名称|类型|说明| |:---|:---|:---| |oldStr|String|元字符串| |index|Number|要插入的下标| |insertStr|String|要插入的字符|

示例

this.$ld.util.insertToStr("123456",2,"a");// 12a3456

insertAndReplaceToStr

指定下标位置插入字符串。insertAndReplaceToStr("12345",2,4,"ab") => 12ab5

参数

|参数名称|类型|说明| |:---|:---|:---| |oldStr|String|元字符串| |start|Number|开始下标| |end|Number|结束下标| |insertStr|String|要插入的字符|

示例

this.$ld.util.insertAndReplaceToStr("12345",2,4,"ab");//12ab5

idCardCheck

验证身份证号码

参数

|参数名称|类型|说明| |:---|:---|:---| |cardNo|String|要验证的身份证号|

示例

this.$ld.util.idCardCheck("622222222222222222");//false

getIp

获取ip

参数

示例

this.$ld.util.getIp();//127.0.0.1

cookie

cookie 进行操作

示例

this.$ld.util.cookie.get(key);
this.$ld.util.cookie.set(key,value,day);

copyToClipboard

copyToClipboard 复制内容到剪贴板 复制成功,返回true,复制失败返回false;

参数

|参数名称|类型|说明| |:---|:---|:---| |selector|String|选择器文本内容; ES6支持document.querySelector选中器 或者 复制的文字|要验证的身份证号| |innerHTML|Boolean|是否复制innerHTML,true:复制innerHTML,false:复制innerText ;如果selector为选择器,此时该参数有效。|

示例

//复制文字
this.$ld.util.copyToClipboard("这是一段要复制的文字");

//复制 <p id="test">中的innerText内容
this.$ld.util.copyToClipboard("#test");
this.$ld.util.copyToClipboard("#test",false);

//复制 <p id="test">中的innerHTML内容
this.$ld.util.copyToClipboard("#test",true);