js实例教程-介绍几个常用的javascript处理方法

发布时间:2018-11-30 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js实例教程-介绍几个常用的javascript处理方法脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

例题1.获取地址栏参数

采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!)

function GetQueryString(name) {

    VAR reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

    var r = window.location.seArch.substr(1).match(reg);

    if (r != null) return unescaPE(r[2]);

    return null;

}

// 调用方法

alert(GetQueryString("参数名1"));

例题2.[CSS问题]元素垂直居中问题

1.若父容器下只有一个元素,且父元素设置了高度,则只需要使用相对定位即可    

parentElement{

    height:xxx;

}

.childElement {

  posITion: relative;

  top: 50%;

  transform: translateY(-50%);

}

2.父元素的高度未知,让左边的一列随右边的一列高度变化而垂直居中

parentElement {

    position: relative;

}

childElement {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

}

例题3.[Javascript问题]随机产生0-100之内的10个不重复的数字

function getRandom() {

    //利用一个对象和一个数组

    var obj = {},array = [];

    while (array.length < 10) {

        var num = Math.floor(Math.random() * 100);

        if (!obj[num]) {

            obj[num] = num;

            array.push(num);

        }

    };

    return array;

}

1.生成n-m的随机数

公式:Math.round(Math.random()*(m-n)+n) 或者 Math.ceil(Math.random()*(m-n)+n)

2.双重非位运算简写

Math.floor(4.9) === 4 //true

简写

~~4.9 === 4 //true

3.打乱数组的顺序

arr.sort(function(){

return Math.random()-0.5

});

4.简单数组自定义排序

var arrSimple2=new Array(1,8,7,6);

arrSimple2.sort(function(a,b){return b-a});

解释:

a,b表示数组中的任意两个元素,若return > 0 b前a后;

reutrn < 0 a前b后;a=b时存在浏览器兼容简化一下:a-b输出从小到大排序,b-a输出从大到小排序。

5.加号的用途

1)使用+将字符串转换成数字,这个只适用于字符串数据,否则将返回NaN

var aa = &#39;123';alert(+aa) == Number(aa)

2)+号同样适用于日期,将返回的是时间戳数字

var aa = new Date();alert(+aa) == aa.getTimes()

6.截断数组方法

数组截断,可以通过array.length = 5来截断数组

var array = [1,2,3,4,5];array.length = 3;alert(array)//[1,2,3]

还可以通过length来清空数组

arrar.length = 0

7.高效的for循环

for(var i=arr.length;i--;){

alert(arr[i])

}

8.合并两个数组

把数组2合并到数组1中,使得数组1改变,返回的是数组的长度

console.LOG(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

9.将nodelist转换成数组

var elements = document.querySelectorAll("p"); 

var arrayElements = Array.From([].slice.call(elements));

10.获取数组中最小或最大的数字

var a=[1,2,3,5];

alert(Math.max.apply(Math, a));//最大值

alert(Math.min.apply(Math, a));//最小值

例题1.获取地址栏参数

采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!)

function GetQueryString(name) {

    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

    var r = window.location.search.substr(1).match(reg);

    if (r != null) return unescape(r[2]);

    return null;

}

// 调用方法

alert(GetQueryString("参数名1"));

例题2.[CSS问题]元素垂直居中问题

1.若父容器下只有一个元素,且父元素设置了高度,则只需要使用相对定位即可    

parentElement{

    height:xxx;

}

.childElement {

  position: relative;

  top: 50%;

  transform: translateY(-50%);

}

2.父元素的高度未知,让左边的一列随右边的一列高度变化而垂直居中

parentElement {

    position: relative;

}

childElement {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

}

例题3.[Javascript问题]随机产生0-100之内的10个不重复的数字

function getRandom() {

    //利用一个对象和一个数组

    var obj = {},array = [];

    while (array.length < 10) {

        var num = Math.floor(Math.random() * 100);

        if (!obj[num]) {

            obj[num] = num;

            array.push(num);

        }

    };

    return array;

}

1.生成n-m的随机数

公式:Math.round(Math.random()*(m-n)+n) 或者 Math.ceil(Math.random()*(m-n)+n)

2.双重非位运算简写

Math.floor(4.9) === 4 //true

简写

~~4.9 === 4 //true

3.打乱数组的顺序

arr.sort(function(){

return Math.random()-0.5

});

4.简单数组自定义排序

var arrSimple2=new Array(1,8,7,6);

arrSimple2.sort(function(a,b){return b-a});

解释:

a,b表示数组中的任意两个元素,若return > 0 b前a后;

reutrn < 0 a前b后;a=b时存在浏览器兼容简化一下:a-b输出从小到大排序,b-a输出从大到小排序。

5.加号的用途

1)使用+将字符串转换成数字,这个只适用于字符串数据,否则将返回NaN

var aa = '123';alert(+aa) == Number(aa)

2)+号同样适用于日期,将返回的是时间戳数字

var aa = new Date();alert(+aa) == aa.getTimes()

6.截断数组方法

数组截断,可以通过array.length = 5来截断数组

var array = [1,2,3,4,5];array.length = 3;alert(array)//[1,2,3]

还可以通过length来清空数组

arrar.length = 0

7.高效的for循环

for(var i=arr.length;i--;){

alert(arr[i])

}

8.合并两个数组

把数组2合并到数组1中,使得数组1改变,返回的是数组的长度

console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

9.将NodeList转换成数组

var elements = document.querySelectorAll("p"); 

var arrayElements = Array.from([].slice.call(elements));

10.获取数组中最小或最大的数字

var a=[1,2,3,5];

alert(Math.max.apply(Math, a));//最大值

alert(Math.min.apply(Math, a));//最小值

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-介绍几个常用的javascript处理方法全部内容,希望文章能够帮你解决js实例教程-介绍几个常用的javascript处理方法所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。