ManGe总结的常用js方法

字符串操作

• length 属性返回字符串的长度； str.length;
• indexOf() 方法返回字符串中指定文本首次出现的索引（位置）； str.indexOf(“China”);
• lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引; str.lastIndexOf(“China”);
• search() 方法搜索特定值的字符串，并返回匹配的位置; str.search(“locate”);
• slice() 提取字符串的某个部分并在新字符串中返回被提取的部分; str.slice(7,13);
• substring() 类似于 slice()。不同之处在于 substring() 无法接受负的索引。
• substr() 类似于 slice()。不同之处在于第二个参数规定被提取部分的长度。
• replace() 方法用另一个值替换在字符串中指定的值; str.replace(“a”, “b”);
• toUpperCase() 把字符串转换为大写; str.toUpperCase();
• toLowerCase() 把字符串转换为小写; str.toLowerCase();
• concat() 连接两个或多个字符串; str1.concat(" ",str2);
• trim() 方法删除字符串两端的空白符; str.trim();
• charAt() 方法返回字符串中指定下标（位置）的字符串; str.charAt(0);
• charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码; str.charCodeAt(0);
• split() 将字符串转换为数组,分割字符串；txt.split(",");// 用逗号分隔

数字操作

• toString() 以字符串返回数值； (123).toString();// 从文本 123 返回 123
• toFixed() 返回字符串值，它包含了指定位数小数的数字(四舍五入);
• toPrecision() 返回字符串值，它包含了指定长度的数字(四舍五入);
• Number() 转换为number类型； Number(x);
• parseInt() 解析一段字符串并返回整型;
• parseFloat() 解析一段字符串并返回浮点型;

数组操作

• toString() 把数组转换为数组值（逗号分隔）的字符串； arry.toString();
• join() 拼接数组为字符串； arry.join("");
• pop() 方法从数组中删除最后一个元素;
• push() 方法（在数组结尾处）向数组添加一个新的元素;
• shift() 方法会删除第一个元素;
• unshift() 方法在头向数组添加新元素;
• delete 运算符来删除; delete fruits[0]; // 把 fruits 中的首个元素改为 undefined;
• concat() 合并两个数组;
• slice() 方法用数组的某个片段切出新数组;
• reverse() 将数组中的元素进行反转，倒序显示
• sort() 将数组元素进行排序

json

• eval(’(’ + str + ‘)’); 字符串转json对象
• JSON.parse(str); 字符串转json对象
• JSON.stringify(jsonobj); json对象转换成字符串
• str.parseJSON(); 字符串转换为JSON对象

字典

• var dic = new Array();//通过申明一个Array来做一个字典
• dic[“q”] = “q1”;//设置和修改值
• for (var key in dic) {console.log(key + “:” + dic[key]);} //遍历
• delete dic.q; delete dic[“q”]; 删除一个值

聊天的时间显示

// =============  自定义时间处理
// @ timestamp    时间戳
dateDiff:function(timestamp){
   //console.log(timestamp);
   if (timestamp == 0){return "未聊天";}
   // 补全为13位
   var arrTimestamp = (timestamp + '').split('');
   for (var start = 0; start < 13; start++) {
        if (!arrTimestamp[start]) {
            arrTimestamp[start] = '0';
        }
   }
   timestamp = arrTimestamp.join('') * 1;
   var minute = 1000 * 60;
   var hour = minute * 60;
   var day = hour * 24;
   var halfamonth = day * 15;
   var month = day * 30;
   var now = new Date().getTime();
   var diffValue = now - timestamp;
   // 如果本地时间反而小于变量时间
   if (diffValue < 0) {
      return '不久前';
   }
   // 计算差异时间的量级
   var monthC = diffValue / month;
   var weekC = diffValue / (7 * day);
   var dayC = diffValue / day;
   var hourC = diffValue / hour;
   var minC = diffValue / minute;
   // 数值补0方法
   var zero = function (value) {
       if (value < 10) {
           return '0' + value;
       }
           return value;
    };

    if (monthC > 12) {
       // 超过1年，直接显示年月日
       return (function () {
             var date = new Date(timestamp);
             return date.getFullYear() + '年' + zero(date.getMonth() + 1) + '月' + zero(date.getDate()) + '日';
                    })();
                } else if (monthC >= 1) {
                    return parseInt(monthC) + "月前";
                } else if (weekC >= 1) {
                    return parseInt(weekC) + "周前";
                } else if (dayC >= 1) {
                    return parseInt(dayC) + "天前";
                } else if (hourC >= 1) {
                    return parseInt(hourC) + "小时前";
                } else if (minC >= 1) {
                    return parseInt(minC) + "分钟前";
                }
                return '刚刚';
            },

时间戳转时间字符串

 // =============  时间戳转时间字符串
            // @ timestamp   时间戳
            timestampToTime:function(timestamp) {
                var time = new Date(timestamp)
                var year = time.getFullYear()
                const month = (time.getMonth() + 1).toString().padStart(2, '0')
                const date = (time.getDate()).toString().padStart(2, '0')
                const hours = (time.getHours()).toString().padStart(2, '0')
                const minute = (time.getMinutes()).toString().padStart(2, '0')
                const second = (time.getSeconds()).toString().padStart(2, '0')
                return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
            },

正则判断是否发送有效消息

//发送消息
                    var msg =  $(".inputmsg").html();
                    msg = msg.replace(/ /ig," ");
                    if (msg.length <1){
                        t.$toast("无法发送空消息");return;
                    }
                    if (msg.match(/^[ ]*$/)){
                        t.$toast("无法发送没有内容的消息");return;
                    }
                    if (msg.match(/^[\\n]*$/)){
                        t.$toast("无法发送没有内容的消息");return;
                    }

发送图片并获取宽高

$("#imgfile").change(function(evt){
			    //console.log("sendimg");
			    // 如果浏览器不支持FileReader，则不处理
			    if (!window.FileReader){return};
			    var f = event.target.files[0];
                if (f == undefined){return;}
                if (f.name == ""){return;}

                var fileReader = new FileReader();
                fileReader.readAsDataURL(f);
                fileReader.onload = function(e) {
                    console.log(this.result,'this.result');
                  var base64 = this.result;
                  var img = new Image();
                  img.src = base64;
                  img.onload = function() {
                    this.imgInfo = {
                      width: img.naturalWidth,
                      height: img.naturalHeight
                    };
                    console.log(img,"宽：" + img.naturalWidth + " 高：" + img.naturalHeight);
                    var formdata=new FormData();
                    formdata.append('file',f);
                    //console.log(formdata);
                    $.ajax({....

页面刷新,离开,事件处理

<body class="antialiased" onbeforeunload="checkLeave()">

function checkLeave(e){
    console.log("是否刷新界面，刷新界面弹哪个框");
    //event.returnValue=false;
    
	//doing...

    e = e || window.event;
    if (e) {
        e.returnValue = "您是否确认离开此页面-您输入的数据可能不会被保存";
    }
    return "您是否确认离开此页面-您输入的数据可能不会被保存";
}

window.onbeforeunload = (event) => {
          //doing...
          event.returnValue = "离开此网站不会保存您所做的更改";
        };

发送输入框 粘贴事件的处理

$(".inputmsg").on('paste',function(e){
    
    var e = event || window.event
    // 阻止默认粘贴
    e.preventDefault();

    pastedText = undefined;
    // 兼容IE
    if(window.clipboardData && window.clipboardData.getData) {
        // 获取拷贝进剪切板指定格式的数据 (此处用的Text格式)
         pastedText = window.clipboardData.getData('Text');      
    } else if((e.clipboardData || e.originalEvent.clipboardData) && (e.clipboardData || e.originalEvent.clipboardData).getData) {
          pastedText = (e.originalEvent || e).clipboardData.getData('text/plain')
    }
    console.log(pastedText);
    $(".inputmsg").append(pastedText);
});

返回顶部通用方法

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");

求滚动条的滚动距离

function getScrollOffset() {
    if (window.pageOffset) {
        return {
            x: window.pageXOffset,
            y: window.pageYOffset
        }
    } else {
        return {
            x: document.body.scrollLeft + document.documentElement.scrollLeft,
            y: document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

当前时间的年月日

function getDate() {
    var date = new Date();
    var Year = date.getFullYear();
    var month = date.getMonth();
    var Date1 = date.getDate();

    var Hours = date.getHours();
    var minutes = date.getMinutes();
    var secod = date.getSeconds();
    return Year + "年" + (month + 1) + '月' + Date1 + '日' + Hours + '时' + minutes + '分' + (secod + 1) + '秒';
}

数组去重

function () {
    var obj = {},
        arr1 = []; //返回新的数组
    for (var i = 0; i < this.length; i++) {
        if (!obj[this[i]]) {               //obj没有值的话，undefined 取反说明已经有值
            obj[this[i]] = 'abc';
            arr1.push(this[i]);
        }
    }
    return arr1;
}

返回浏览器的视口尺寸

function getViewprotOffset() {
    if (window.innerWidth) {
        return {
            w: window.innerWidth,
            y: window.innerHeight
        }
    } else {
        if (document.compatMode == "BackCompat") {
            return { 
                w: document.body.clientWidth,
                h: document.body.clientHeight
            }
        } else {
            return {
                w: document.documentElement.clientWidth,
                h: document.documentElement.clientHeight
            }
        }
    }
}

将日期格式转换成时间戳

function timeToTimestamp(time) {
    var date = new Date('2014-04-23 18:55:49:123');
    // 有三种方式获取
    var time1 = date.getTime();
    var time2 = date.valueOf();
    var time3 = Date.parse(date);
    console.log(time1);//1398250549123
    console.log(time2);//1398250549123
    console.log(time3);//1398250549000
}

手机号码正则表达式验证

function checkPhone(){ 
    var phone = document.getElementById('phone').value;
    if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))){ 
        alert("手机号码有误，请重填");  
        return false; 
    } 
}

随机颜色

function randomColor(){
    var col="#";
     for(var i=0;i<6;i++){
         col+=this.randoms(16).toString(16);
     }
     return col;
 }

获取浏览器的名称以及版本

function getBrowserRV(){
     var str=navigator.userAgent;
     // 判断是否是Chrome
     if(str.indexOf("Chrome")>-1){
         var index=str.indexOf("Chrome");
         return str.slice(index,str.indexOf(" ",index+1)).split("/");
     }
      // 判断是否是Firefox
     if(str.indexOf("Firefox")>-1){
         var index=str.indexOf("Firefox");
         return str.slice(index).split("/");
     }
     // 判断是否是IE11
     if(str.indexOf("rv:")>-1 && str.indexOf("Trident")>-1){
         return ["IE","11"];
     }
     // 判断是否是IE10及以下
     if(str.indexOf("Trident")>-1){
         var index=str.indexOf("MSIE");
         return ["IE",str.slice(index,str.indexOf(";",index)).split(" ")[1]];
     }
 }

获取地址栏上的参数

function queryString(values){
     var arr = location.search.slice(1).split("&");
     arr = arr.map((item)=>(
         {key:item.split("=")[0],
         value:item.split("=")[1]}));
     var str = arr.filter(({key})=>key == values);
     return str ? str[0].value : '';
 }