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"/>

4000
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
1148c
(a) {
switch (a) {
case "yyyy":
return tf(t.getFullYear());
break;
case "MM":
return tf(t.getMonth() + 1);
break;
}
});
},

13、JavaScript：操作 cookie

/**
* [获得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);