javascript工具代码

• javascript工具代码
  • 1. JS面对对象写法
  • 2. 下载文件到本地函数
  • 3. base64编码函数
  • 4. 检查url函数
  • 5. 检查url函数plus
  • 6. js读取本地文件
  • 7. js读取文本防止乱码的实现
  • 8. jquery实时监控输入框
  • 9. 生成随机RGBA颜色
  • 10.格式化获得当前时间
  • 11. 左右滑动动画
  • 12. 滚动条到指定位置滑动效果
  • 13. 滚动条监控
  • 14. textarea输入Tab的处理
  • 15. 快速获得QueryString
  • 16. 计算一个字符串数组中最大宽度
  • 17. 读取Excel表格
  • 18. 获取QueryString的全部参数

javascript工具代码

1. JS面对对象写法

(function (window) {
    //cardManager表示类名
    function cardManager() {
        return new cardManager.prototype.init();
    }
    cardManager.prototype = {
          constructor : cardManager,
          init : function () {
          }
    };
    cardManager.prototype.init.prototype = cardManager.prototype;
    window.cardManager = cardManager;
})(window);

2. 下载文件到本地函数

//下载文件到本地
function download(filename, content) {
    var urlObject = window.URL || window.webkitURL || window;    
    var downloadData = new Blob([content]);  
    var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")   
    save_link.href = rlObject.createObjectURL(downloadData);     
    save_link.download = filename;  
    var ev = document.createEvent("MouseEvents");    			
    ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);    				
    save_link.dispatchEvent(ev);
}

3. base64编码函数

//b64编码
function base64Code(str,isEncode=true) {
  //true编码 false解码
  return isEncode ? btoa(encodeURIComponent(str)) : decodeURIComponent(atob(str));
}

4. 检查url函数

function check_url(_url){
    var str=_url;
    var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
    var objExp=new RegExp(Expression);
    if(objExp.test(str)==true)return true;else return false;
}

5. 检查url函数plus

function isURL(str_url) {// 验证url
	var strRegex = "^((https|http|ftp|rtsp|mms)?://)"
	+ "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" // ftp的user@
	+ "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
	+ "|" // 允许IP和DOMAIN(域名)
	+ "([0-9a-z_!~*'()-]+\.)*" // 域名- www.
	+ "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二级域名
	+ "[a-z]{2,6})" // first level domain- .com or .museum
	+ "(:[0-9]{1,4})?" // 端口- :80
	+ "((/?)|" // a slash isn't required if there is no file name
	+ "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
	var re = new RegExp(strRegex);
	return re.test(str_url);
}

6. js读取本地文件

//js 读取文件
//files是一个input['type="file"']	
function jsReadFiles(files) {
    if (files.length) {
        var file = files[0];
        var reader = new FileReader();//new一个FileReader实例
        if (/text+/.test(file.type)) {//判断文件类型，是不是text类型
            reader.onload = function() {
                $('body').append('<pre>' + this.result + '</pre>');
            }
             reader.readAsText(file);
         } else if(/image+/.test(file.type)) {//判断文件是不是imgage类型
             reader.onload = function() {
                 $('body').append('<img src="' + this.result + '"/>');
             }
             reader.readAsDataURL(file);
         }
     }
 }

7. js读取文本防止乱码的实现

function readFile(file) {
        var reader,$body,type,arr,suffix;
        reader = new FileReader();
        $body = $('body');
        type = file.type;
        arr = file.name.split('.');
        suffix = arr[arr.length -1];
        if(type.indexOf('text')!= -1 || suffix == 'md')
        {
            reader.readAsText(file);
            reader.onload = function() {
                if(this.result.indexOf('�') != -1)
                {
                    reader = new FileReader();
                    reader.readAsText(file,'gb2312');
                    reader.onload = function(){
                        $body.prop('res',this.result);
                    };
                }
                else $body.prop('res',this.result);
            };
        }
        return suffix;
    }

8. jquery实时监控输入框

$('body').on('propetychange input', '输入框选择器', function () {
			//jscode...
        });

9. 生成随机RGBA颜色

function randomRgbaColor(a=1) { //a表示透明度 0~1 之间 随机可以传递函数[Math.random()]
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                return `rgba(${r},${g},${b},${a})`; //返回rgba(r,g,b,a)格式颜色

10.格式化获得当前时间

//得到当前时间并格式化
function getCurrentTime() {
       var myDate,year,mon,date,h,m,s,week,weeks;
       myDate = new Date();
       year = myDate.getFullYear(); //获取当前年
       mon = myDate.getMonth() + 1; //获取当前月
       date = myDate.getDate(); //获取当前日
       h = myDate.getHours();//获取当前小时数(0-23)
       m = myDate.getMinutes();//获取当前分钟数(0-59)
       s = myDate.getSeconds();//获取当前秒
       week = myDate.getDay(); //获取当前星期
       mon = toDouble(mon);
       date = toDouble(date);
       h = toDouble(h);
       m= toDouble(m);
       s = toDouble(s);
       weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
       return (`${year}-${mon}-${date} ${h}:${m}:${s} ${weeks[week]}`);
    }
    function toDouble(n) {
        return n > 9 ? n : '0' + n;
    }

11. 左右滑动动画

//左右滑动动画
function slideAbout($jqObj,speed=300,success=(e)=>{}) {
    $jqObj.animate({width:'show'},speed,function (e) {
        success(e);
    });
}

12. 滚动条到指定位置滑动效果

//滚动条到指定位置滑动效果
function scrollAnimate($container,$target,speed=300){
    $container.animate({scrollTop: getPosition($target[0]).top}, speed);

    //获取元素到文档区域的坐标
    function getPosition(element) {
        let actualLeft = element.offsetLeft,
            actualTop = element.offsetTop,
            current = element.offsetParent; // 取得元素的offsetParent
        // 一直循环直到根元素
        while (current !== null) {
            actualLeft += current.offsetLeft;
            actualTop += current.offsetTop;
            current = current.offsetParent;
        }
        // 返回包含left、top坐标的对象
        return {
            left: actualLeft,
            top: actualTop
        };
    }
}

13. 滚动条监控

function windowEvent() {
    // scrollEvent
    $(window).scroll(function () {
        let dst = $(document).scrollTop();
        //jscode...
    }
}

14. textarea输入Tab的处理

function addTabEvent() {
            $("textarea").on('keydown',function(e){
                if(e.keyCode === 9){
                    e.preventDefault();
                    let
                        indent = '    ', //空格数可选
                        start = this.selectionStart,
                        end = this.selectionEnd,
                        selected = window.getSelection().toString();
                    selected = indent + selected.replace(/\n/g,'\n'+indent);
                    this.value = this.value.substring(0,start) + selected + this.value.substring(end);
                    this.setSelectionRange(start+indent.length,start+selected.length);
                    return false;
                }
            });
        }

15. 快速获得QueryString

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

16. 计算一个字符串数组中最大宽度

function calculateMaxWidth(arr, fontSize="1rem"){
    let width = 0
    let html = document.createElement("span")
    const maxlength = Math.max(...arr.map(s=> s ? s.length : 0))
    const string = arr.find(s=>(s?.length || 0) === maxlength)
    html.innerText = str
    html.className = "getTextWidth"
    html.style.fontSize = fontSize
    document.querySelector('body').appendChild(html)
    width = document.querySelector(".getTextWidth").offsetWidth
    document.querySelector(".getTextWidth").remove()
    return {width,string}
}

17. 读取Excel表格

/***
   * e.g.:
   * document.getElementById('file').onchange = function(){
   *    readExcel(this.files).then(data=>{
   *      console.log(data)
   *    })
   *  }
   * @param files
   * @param rABS
   * @returns {Promise}
   */
  function readExcel(files, rABS=false) {
    function bin2str(data) {
      let o = "",
        l = 0,
        w = 10240;
      for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
      o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
      return o;
    }
    return new Promise((resolve, reject)=>{
      if(!XLSX)reject(new Error('Require Import SheetJS! More Information:http://sheetjs.com'))
      const filesLength = files.length
      const resultList = []
      let cursor = 0
      const handleLoader = e=>{
        try {
          const result = e.target.result
          resultList.push(rABS ? XLSX.read(btoa(bin2str(result)), {type: 'base64'}) :
            XLSX.read(result, {type: 'binary'}))
          if(++cursor === filesLength)
            resolve(resultList)
        }catch (e) {reject(e)}
      }
      [...files].forEach(file=>{
        const reader = new FileReader()
        reader[rABS ? 'readAsArrayBuffer' : 'readAsBinaryString'](file)
        reader.onload = handleLoader
      })
    })
  }
/**
获取表格的行列数
var range = XLSX.utils.decode_range(worksheet['!ref']);
var ncols = range.e.c - range.s.c + 1, 
	rows = range.e.r - range.s.r + 1;
更多API：https://blog.csdn.net/qq_35606400/article/details/112348670
*/

18. 获取QueryString的全部参数

// 获取url拼接参数值
function GetRequest(url) {
	// 获取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;
}