脚本宝典收集整理的这篇文章主要介绍了js实例教程-几个简单实用的javascript代码块分享，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

1.获取地址栏参数

function getUrlPara(paraName){  

    var sUrl = location.href;  

    var sReg = "(?://?|&){1}"+paraName+"=([^&]*)";  

    var re=new RegExp(sReg,"gi");  

    re.exec(sUrl);  

    return RegExp.$1;  

}  

//应用实例：test_para.html?a=11&b=22&c=33  

console.log(getUrlPara("a"));  、

console.log(getUrlPara("b"));  

2.发送验证码计时器

<input id="send" type="button" value="发送验证码">

var times = 60, // 临时设为60秒

document.getElementById('send').onclick = function () {

     timer = setInterval(function () {

            times--;

            if (times <= 0) {    

                send.value = '发送验证码'; 

                clearInterval(timer);            

                 send.disabled = false;           

                  times = 60; } 

            else {           

                     send.value = times + '秒后重试';          

                      send.disabled = true;        

                }       

         }, 1000);

}  

3.数值每三位加逗号(钱转换)

function toThousands(number) {  

  var arr = String(number).split('.'); 

   var num = arr[0], result = '';

    while (num.length > 3) {

         result = ',' + num.slice(-3) + result;

         num = num.slice(0, num.length -3);

    }

    if (num.length > 0) result = num + result;

        return arr[1] ? result + '.' + arr[1] : result

    }

}

4.快速求数组的平均数（reduce，箭头函数）

const average = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length;

// average([1,2,3]) -> 2

5.数组去重（es6）

const unique = arr => [...new Set(arr)];

// unique([1,2,2,3,4,4,5]) -> [1,2,3,4,5]

6.数组对象方法排序（按照对象的某个属性）

function sortByKey(array,key){ 

   return array.sort(function(a,b){     

     var x=a[key];    

     var y=b[key];   

     return ((x<y)?-1:((x>y)?1:0));  

 })

}

7.输入框限定字符的个数（一个汉字算两个字符）

function getByteVal(val, max) {

var returnValue = '';

var byteValLen = 0;

for (var i = 0; i < val.length; i++) {

if (val[i].match(/[^/x00-/xff]/ig) != null)

byteValLen += 2;

else

byteValLen += 1;

if (byteValLen > max)

break;

returnValue += val[i];

}

return returnValue;

}

$('#txt').bind('keyup',function(){

var val=this.value;

if(val.replace(/[^/x00-/xff]/g,"**").length>14){

this.value=getByteVal(val,14)

}

})

8.将时间戳转成yyyy-MM-dd HH:mm:ss的格式

/** 

 * timestamp：1469085472490 

 */  

var timestampToFormatDate = function(timestamp){     

     var date = new Date();  date.setTime(timestamp);   

     var year = date.getFullYear();   

    var month = date.getMonth() + 1; 

     var day = date.getDate(); 

     var hour = date.getHours(); 

     var minute = date.getMinutes();   

  var second = date.getSeconds();

     return year + '-' + supplementZero(month,2) + '-' + supplementZero(day,2) + ' ' +   

        supplementZero(hour,2) + ':' + supplementZero(minute,2) + ':' + supplementZero(second,2);  

}

9.返回顶部

function backTop(btnId) {

    var btn = document.getElementById(btnId);

    var d = document.documentElement;

    var b = document.body;

    window.onscroll = set;

    btn.style.display = "none";

    btn.onclick = function() {

        btn.style.display = "none";

        window.onscroll = null;

        this.timer = setInterval(function() {

            d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);

            b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);

            if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set);

        },

        10);

    };

    function set() {

        btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none"

    }

};

backTop('goTop');

9.Jquery中$.post和$.ajax的用法

$.ajax({

    type:'get',

    url:'https://www.www.phpernote.com/rss',

    beforeSend:function(XMLHttpRequest){

        //ShowLoading();

    },

    success:function(data,textStatus){

        $('.ajax.ajaxResult').html('');

        $('item',data).each(function(i,domEle){

            $('.ajax.ajaxResult').append('<li>'+$(domEle).children('title').text()+'</li>');

        });

    },

    complete:function(XMLHttpRequest,textStatus){

        //HideLoading();

    },

    error:function(){

        //请求出错处理

    }

});

10.拖拽事件的封装

function drag(index){

　　index.onmousedown = function(event){

       　　 var ev = event ||window.event;

        　　ev.preventDefault();

       　　 disX = ev.clientX-this.offsetLeft;

      　　  disY = ev.clientY-this.offsetTop;

       　　 //给index绑定moousemove事件

       　　 document.onmousemove = function(event){

         　　   var ev = event ||window.event;

         　　   ev.preventDefault();

          　　  var x = ev.clientX;

          　　  var y = ev.clientY;

          　　  index.style.left = x-disX+'px';

           　　 index.style.top = y-disY+'px';

       　　 }

    　　}

    　　document.onmouseup =function(){

       　　 document.onmousemove = null;

  　　  }

　　}

11.数组的搜索功能

var fruits = ['apple','banana','grapes','mango','orange'];、

function filterItems(query) {

    return fruits.filter(function(el) {

        return el.toLowerCase().indexOf(query.toLowerCase()) > -1;

    })

}

console.log(filterItems('ap')); 

// ['apple', 'grapes']

11.求数组的最大值

//最大值

Array.prototype.max = function() { 

        var max = this[0];

        var len = this.length; 

        for (var i = 1; i < len; i++){ 

            if (this[i] > max) { 

            max = this[i]; 

        } 

    } 

    return max;

}

12.删除数组某一个元素

Array.prototype.remove = function(val){

    var index = this.indexOf(val);

    if(index !=0){

        this.splice(index,1)

    }

}

[1,3,4].remove(3)

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

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-几个简单实用的javascript代码块分享全部内容，希望文章能够帮你解决js实例教程-几个简单实用的javascript代码块分享所遇到的问题。

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

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