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

来源：互联网发布：mysql 查询最近一个月编辑：程序博客网时间：2024/06/03 22:07

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 中,有则拿到 indexArray.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_ajaxvar 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;}

0 0