JavaScript：利用JavaScript实现的功能、算法和奇淫技巧（持续更新）

1、JavaScript：输入日期获得从该日期开始的一个月时间

function getNextMonth(time) {
            var arr = time.split(/-|\//),
                year = arr[0],
                month = arr[1],
                other = arr[2];
            //增加一个月的范围
            if (month == 12) {
                year++;
                month = 1;
            } else {
                month++;
            }
            //增加之后小于两位用0补
            if (month < 10) {
                month = "0" + month;
            }
            return arr[0] + "/" + arr[1] + "/" + arr[2] + " - " + year + "/" + month + "/" + other;
        }

这里写图片描述

2、JavaScript：鼠标滚轮实现图片缩放方法

<img src="../../images/picture.jpg" onmousewheel="return zoomImg(this)"/>

使用 onmousewheel 方法。

function zoomImg(obj){
    var zoom = parseInt(obj.style.zoom, 10) || 100;
    zoom += event.wheelDelta/12;
    if(zoom>0)
    obj.style.zoom = zoom + '%';
    return false;
}

3、JavaScript：使对话框的滚动条一直处于最下方

$('.chatting-middle').scrollTop($('.chatting-middle')[0].scrollHeight);

.chatting-middle(对话框部分)

4、JavaScript：如何删除数组中指定的一项

Array.prototype.indexOf = function(val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
        }
        return -1;
    };
//在 Array 原型中植入 remove 方法 remove 中调用 indexOf 判断 str 是否存在 arr 中,有则拿到 index
Array.prototype.remove = function(val) {
        var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
        }
    };
arr.remove('str');

将上面的代码分装起来。arr.remove() 就可直接调用了。

5、JavaScript：图片文件上传base64格式

function upLoadPic(files)  {
            //获取图片资源
            var file =  files[0];

            //只选取图片文件
            if(!file.type.match('image.*')){
                return false;
            }else{
                var reader = new FileReader();

                reader.readAsDataURL(file);//读取文件

                reader.onload = function(arg){//渲染文件
                    // return arg.target.result;
                    console.log(arg.target.result);//输出base64格式
                } 

                console.log($("#img_input").prop("files")[0])
            }       
        }

调用：

<input type="file" id="img_input" accept="image/*" onchange="upLoadPic(this.files)" />

showImg: function() {
   let _this = this;
   var fileInput = document.getElementById('fileInput');

   var file = fileInput.files[0];

  var reader = new FileReader();

 reader.readAsArrayBuffer(file);
      reader.onload = function() {
        var arrayBuffer = reader.result;
        console.log(arrayBuffer)
        let arrayBase = _this._arrayBufferToBase64(arrayBuffer);
        _this.buffer = 'data:image/png;base64,' +  arrayBase;
      }
    },

   _arrayBufferToBase64: function( buffer ) {
      var binary = '';
      var bytes = new Uint8Array( buffer );
      var len = bytes.byteLength;
      for (var i = 0; i < len; i++) {
          binary += String.fromCharCode( bytes[ i ] );
      }
      return window.btoa( binary );
  }  

<input type="file" name="fileInput" id="fileInput" v-on:change="showImg"/>

6、解决jquery中，例如点击事件，点击第一次，执行一次；点击第二次，执行两次，以此类推。

用jQuery 绑定一个按钮click事件后，第一次点击后，一切正常，第二次点击，执行两次，以后点击越多执行的也就越多。

查看文档 jquery click 不是替换原有的function 而是接着添加，所以才会执行次数越来越多。

这有就可以在添加之前要先解除click事件绑定，然后再重新绑定。

    $('#btn').unbind('click');  

    $('#btn').bind('click', function(){  

        alert('仅提示一次！');  

    });

7、JavaScript：前端实现压缩包 rar、zip 上传

利用formData+ajax

<input id="data-file" type="file"/>

upLoadFileEvent: function() {
            //点击数据文件
            $('#data-file').unbind('change');
            $('#data-file').bind('change',function(event) {
                var _this = $(this)
                //调用文件上传方法
                caseSearch.upLoadFile(_this)
                // 关闭
                $('#upLoad-container-box').removeClass('show-box').addClass('hide-box');
            });
            //点击图片文件
            $('#pic-file').unbind('change');
            $('#pic-file').bind('change',function(event) {

var _this = $(this);
                //调用图片上传方法
                caseSearch.upLoadPic(_this)
                });
        },

upLoadPic: function(_this) {
            var dataurl;
            // 获取图片资源
            var file = _this[0].files[0];
            var fileName = _this[0].files[0].name;
            if (!file.type.match('image.*')) {
                return false;
            }else {
                var reader = new FileReader();
                reader.readAsDataURL(file);//读取文件
                reader.onload = function(arg) {
                    dataurl = arg.target.result;
                    //ajax进行图片上传数据库
                    $.ajax({
                        type:"POST",
                        url:"/seral/uploadImage",
                        data: {"Base64":dataurl,"picName":fileName},
                        dataType: "json",
                        success:function(data) {
                            console.log(data)
                        }
                    });
                }
            }   
        },

    upLoadFile: function(_this) {
            var allFiles = _this[0].files;
            // 获取多文件资源
            console.log(_this[0].files)
            var fileList = [];
            $.each(allFiles, function(i) {
                var test = "file" + i;
                test =  {};
                test.file = allFiles[i];
                test.fileName = allFiles[i].name;
                test.fileExt = allFiles[i].name.substring(allFiles[i].name.lastIndexOf('.') + 1);
                fileList.push(test);
            });
            console.log(fileList);

            //获取单文件
            //var file = _this[0].files[0];
            //var fileName = _this[0].files[0].name
            //var fileExt = fileName.substring(fileName.lastIndexOf('.') + 1);
        },


//fromdata_ajax
var formData = new FormData();//new 一个 formdata 对象形式上传数据
formData.append('file',$('#data-file')[0].files[0]);//拿到压缩包对象
formData.append('fileExt',fileExt);//后缀名（可选）
console.log(formData)
$.ajax({
    type: "POST",
    url: "/seral/verifyFileUpload",
    processData: false,
    contentType: false,
    dataType: 'json',
    cache: false,
    data: formData,
    success:function(data) {

    },
    error:function(data) {

    });

8、 JavaScript：判断是否为字符串，最严格写法

Object.prototype.toString.call(String) === "[object String]"

9、JavaScript：uploadfied文件上传

   importEvent: function() {
                    setTimeout(function () {
                        $("#dataFile").uploadify({
                            swf             : '/jquery.uploadify3.2.1/uploadify.swf',
                            uploader        : path + "map/batchImportGrid",
                            buttonClass     : 'some',
                            height          : 34,     //按钮高度
                            width           : 100,    //按钮宽度        
                            queueID         :'fileQueue',
                            method          :"get",
                            //fileTypeExts      : "*.xlsx;*.xls;",           //允许的文件类型
                            fileTypeDesc    : "请选择图片文件",           //文件说明
                            buttonText      : '选择附件',
                            auto            : true,
                            multi           : true,
                            removeCompleted : true, //是否自动将已完成任务从队列中删除，如果设置为false则会一直保留此任务显示。
                            removeTimeout   : 1,    //如果设置了任务完成后自动从队列中移除，则可以规定从完成到被移除的时间间隔。
                             formData: {},
                            onUploadSuccess : function (file , data, response) 
                            {  
                                console.log(data)
                            },
                            onSelectOnce    : function(event,data)
                            {
                                //alert($("#fileQueue").html());
                                //$("#fileQueue_import").html($("#fileQueue").html());
                            },
                            onUploadError   : function(event, queueID, fileObj) 
                            {  
                                alert("文件:" + fileObj.name + " 上传失败");
                            }

                        });
                    },10);
                }

10、JavaScript：前端开发跨域解决方案

1、jsonp

$.ajax({
      dataType: "jsonp",
      jsonpCallback: "Mapcallback",
      url: path + "map/addAdjoin",
      data: { },
      success:function(res) {}
});

2、cors

 $.ajax({
       type: "GET",
       dataType: "json",
       async: true,
       xhrFields:{
             withCredentials:true
       },
       url: path + "map/getAllAdjoin",
       success: function(res) {},
});

这里写图片描述

11、JavaScript：前端开发获取 url 中携带的参数（转发自：麦田守望者）

1、字符串分割法

function GetRequest() {
    var url = location.search; //获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
    var str = url.substr(1);
    strs = str.split("&");
    for(var i = 0; i < strs.length; i ++) {
    theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
    }
}
return theRequest;
}

调用：

var Request = new Object();
Request = GetRequest();
var 参数1,参数2,参数3,参数N;
参数1 = Request['参数1'];
参数2 = Request['参数2'];
参数3 = Request['参数3'];
参数N = Request['参数N'];

2、正则分析法

function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
    var r = window.location.search.substr(1).match(reg);
    if (r!=null) return unescape(r[2]); return null;
}
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));

12、JavaScript：获取当前时间，格式YYYY-MM-DD

//获取当前时间，格式YYYY-MM-DD
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }

     formatTime: function(time, format) {
          var t = new Date(time);
          var tf = function(i) {
            return (i < 10 ? "0" : "") + i;
          };
          return format.replace(/yyyy|MM/g, function(a) {
            switch (a) {
              case "yyyy":
                return tf(t.getFullYear());
                break;
              case "MM":
                return tf(t.getMonth() + 1);
                break;
            }
          });
        },

    /**
     * [获得cookie]
     * @param  {[type]} name
     * @return {[type]}      
     */
    get: function(name) {
       var v = window.document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');

       return v ? v[2] : null;
    },

    /**
     * [写入cookie]
     * @param {[type]} name  [cookie name]
     * @param {[type]} value [cookie value]
     * @param {[type]} days  
     */
    set: function (name, value, days) {
       var d = new Date;
       d.setTime(d.getTime() + 24*60*60*1000*days);

       window.document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
    },

  /**
   * [删除cookie]
   * @param  {[type]} name 
   * @return {[type]} 
   */
  delete: function (name) {
     this.set(name, '', -1);
  }

14、JavaScript：原生添加、移除 className

  addClass(obj, cls) {
    var obj_class = obj.className,//获取 class 内容.
    blank = (obj_class != '') ? ' ' : '';//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.
    var added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.
    obj.className = added;//替换原来的 class.
  },

  removeClass(obj, cls){
    for(var i=0; i<obj.length; i++) {
      var removed;
      var obj_class = ' '+obj[i].className+' ';//获取 class 内容, 并在首尾各加一个空格
      obj_class = obj_class.replace(/(\s+)/gi, ' ');//将多余的空字符替换成一个空格.
      removed = obj_class.replace(' '+cls+' ', ' ');//在原来的 class 替换掉首尾加了空格的 class.
      removed = removed.replace(/(^\s+)|(\s+$)/g, '');//去掉首尾空格. 
      obj[i].className = removed;//替换原来的 class.
    }
  }

15、JavaScript：合并对象

    /**
     * 合并对象
     */
    extend: function(target, source) {
        for (var obj in source) {
            obj = obj.toString();
            target[obj] = source[obj];
        }
        return target;
    }

16、JavaScript：判断是移动端还是pc端

    /**
     * js判断客户端是否是pc还是移动端
     * 返回 flag  true/false
     **/
    IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ['Android', 'iPhone',
            'SymbianOS', 'Windows Phone',
            'iPad', 'iPod'
        ];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }

17、JavaScript：mint-ui中关于操作class

            /* istanbul ignore next */
            function hasClass(el, cls) {
                if (!el || !cls) return false;
                if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
                if (el.classList) {
                    return el.classList.contains(cls);
                } else {
                    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
                }
            };

            /* istanbul ignore next */
            function addClass(el, cls) {
                if (!el) return;
                var curClass = el.className;
                var classes = (cls || '').split(' ');

                for (var i = 0, j = classes.length; i < j; i++) {
                    var clsName = classes[i];
                    if (!clsName) continue;

                    if (el.classList) {
                        el.classList.add(clsName);
                    } else {
                        if (!hasClass(el, clsName)) {
                            curClass += ' ' + clsName;
                        }
                    }
                }
                if (!el.classList) {
                    el.className = curClass;
                }
            };

            /* istanbul ignore next */
            function removeClass(el, cls) {
                if (!el || !cls) return;
                var classes = cls.split(' ');
                var curClass = ' ' + el.className + ' ';

                for (var i = 0, j = classes.length; i < j; i++) {
                    var clsName = classes[i];
                    if (!clsName) continue;

                    if (el.classList) {
                        el.classList.remove(clsName);
                    } else {
                        if (hasClass(el, clsName)) {
                            curClass = curClass.replace(' ' + clsName + ' ', ' ');
                        }
                    }
                }
                if (!el.classList) {
                    el.className = trim(curClass);
                }
            };

18、JavaScript：操作顶级域名和二级域名共享cookie

/**
 * 子域名向顶级域名中设置cookie
 * @param {参数名} c_name
 * @param {参数值} value
 * @param {过期时间} expiredays
 */
set_Cookie(c_name, value, expiredays = 'Tue, 19 Jan 2038 03:14:07 GMT') {
   var exdate = new Date();

   exdate.setDate(exdate.getDate() + expiredays);

   document.cookie = c_name + '=' + escape(value) + ((expiredays == null) ? '' : ';expires=' + exdate.toGMTString()) + ';path=/;domain=onccc.com';
},

/**
 * 子域名向顶级域名中获取cookie
 * @param {参数名} Name
 */
get_cookie(Name) {
   var offset, end;
   var search = Name + '=';
   var returnvalue = '';
   if (document.cookie.length > 0) {
      offset = document.cookie.indexOf(search)
      if (offset != -1) {
        offset += search.length
        end = document.cookie.indexOf(';', offset);
        if (end == -1) {
           end = document.cookie.length;
           returnvalue = (document.cookie.substring(offset, end));
        } else {
           returnvalue = (document.cookie.substring(offset, end));
        }
      }
    }
    return returnvalue;
}

18、JavaScript：封装的async/await 异步请求

import { baseUrl } from './env'

export default async(url = '', data = {}, type = 'GET', method = 'fetch') => {
    if (method == 'fetch') {
        type = type.toUpperCase();
        url = baseUrl + url;

        if (type == 'GET') {
            var dataStr = ''; //数据拼接字符串
            Object.keys(data).forEach(key => {
                dataStr += key + '=' + data[key] + '&';
            })

            if (dataStr !== '') {
                dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
                url = url + '?' + dataStr;
            }
        }

        if (window.fetch && method == 'fetch') {
            var requestConfig = {
                credentials: 'include',
                method: type,
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                mode: 'cors',
                cache: 'force-cache'
            }

            if (type == 'POST' || type == 'PUT' || type == 'DELETE') {
                Object.defineProperty(requestConfig, 'body', {
                    value: JSON.stringify(data)
                })
            }

            try {
                const response = await fetch(url, requestConfig);
                const responseJson = await response.json();
                return responseJson
            } catch (error) {
                throw new Error(error)
            }
        } else {
            return new Promise((resolve, reject) => {
                var requestObj;
                if (window.XMLHttpRequest) {
                    requestObj = new XMLHttpRequest();
                } else {
                    requestObj = new ActiveXObject;
                }

                var sendData = '';

                if (type == 'POST' || type == 'PUT' || type == 'DELETE') {
                    sendData = JSON.stringify(data);
                }

                requestObj.open(type, url, true);
                requestObj.setRequestHeader('Content-type', 'application/json');
                requestObj.send(sendData);

                requestObj.onreadystatechange = () => {
                    if (requestObj.readyState == 4) {
                        if (requestObj.status == 200) {
                            var obj = requestObj.response
                            if (typeof obj != 'object') {
                                obj = JSON.parse(obj);
                            }
                            resolve(obj);
                        } else {
                            reject(requestObj);
                        }
                    }
                }
            })
        }
    }
};

19、数组取最大值和最小值

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
var maxInNumbers = Math.max.apply(Math, numbers); 
var minInNumbers = Math.min.apply(Math, numbers);