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-DDfunction 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;}});},

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.lengthend = 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.responseif (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);

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

【JavaScript】转载：JS高端奇淫技巧
转自 : https://blog.csdn.net/github_38885296/article/details/91038735 感谢作者(流浪的狗和一坨屎)分享众所周知, JavaScrip ...
JavaScript奇淫技巧：隐写术
JavaScript奇淫技巧:隐写术本文将用JavaScript实现"图片隐写术". 什么是隐写术? 将文本或其它数据写入图片的技术,称为"隐写术". 比如下 ...
JavaScript奇淫技巧：按键精灵
JavaScript奇淫技巧:按键精灵按键精灵之类的自动化工具,可以解放双手,帮我们自动完成许多工作,在很多场景中,可以极大提升生产力. 本文将展示:用JavaScript实现一个"按键精 ...
JavaScript：探索神秘的旁门左道奇淫技巧
引言: JavaScript作为一种广泛使用的编程语言,具有出色的灵活性和强大的功能.除了其常规用途外,它还隐藏着一些奇淫技巧,这些技巧可以让你在编程过程中事半功倍.本文将揭示JavaScript的一 ...
JavaScript奇淫技巧：反调试
JavaScript奇淫技巧:反调试本文,将分享几种JS代码反调试技巧,目标是:实现防止他人调试.动态分析自己的代码. 检测调试,方法一:用console.log检测代码: var c = new ...
JavaScript奇淫技巧：压缩并加密图片
本文将用JavaScript实现两个颇有技术含量的功能:压缩图片.加密图片. 直入正题: 一.压缩图片压缩原理: 将图片读入canvas,并使用canvas的toDataURL方法将图片base64 ...
JavaScript奇淫技巧：把JS编译成exe
JavaScript奇淫技巧:把JS编译成exe 本文,介绍一种一般人不知道的技术:把JS代码编译成exe,而且不使用第三方工具,仅用系统工具完成. 第一:工具准备编译JS代码,使用一个名为jsc. ...
NGINX的奇淫技巧 —— 7. IF实现数学比较功能 (2)
接上文 <NGINX的奇淫技巧 -- 6. IF实现数学比较功能 (1)> NGINX竟然不支持这样的写法.... location = /test/ {default_type html ...
【算法练习】80.字符串轮转——奇淫技巧
[算法练习]80.字符串轮转--奇淫技巧 ⭐加入组队刷题,每日一题,每天进步⭐ 看完大家的操作,感觉自己太傻了 --leetcode此题热评前言哈喽,大家好,我是一条. 糊涂算法,难得糊涂点击跳 ...

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

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

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

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

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

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

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

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

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

9、JavaScript：uploadfied文件上传

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

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

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

13、JavaScript：操作 cookie

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

15、JavaScript：合并对象

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

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

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

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

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

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

最新文章

热门文章

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

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

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

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

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

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

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

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

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

9、JavaScript：uploadfied文件上传

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

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

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

13、JavaScript：操作 cookie

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

15、JavaScript：合并对象

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

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

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

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

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

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

最新文章

热门文章

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