javascript 常用应用

星空与猫

已于 2023-08-18 10:45:36 修改

阅读量647

点赞数

分类专栏： js 文章标签： javascript

于 2020-10-30 11:38:07 首次发布

本文链接：https://blog.csdn.net/qq_43388107/article/details/109382193

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、解决小数相加的误差

function add(arg1, arg2) {
    var r1, r2, m;
    try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
    try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
    m = Math.pow(10, Math.max(r1, r2));
    return (arg1 * m + arg2 * m) / m;
}

2、解决小数相减的误差

function accSub(arg1, arg2) {
    var r1, r2, m, n;
    try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
    try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
    m = Math.pow(10, Math.max(r1, r2));
    n = (r1 >= r2) ? r1 : r2;
    return ((arg1 * m - arg2 * m) / m).toFixed(n);
}

3、除法函数，用来得到精确的除法结果

javascript的除法结果会有误差，在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。

function accDiv(arg1, arg2) {
    var t1 = 0, t2 = 0, r1, r2;
    try { t1 = arg1.toString().split(".")[1].length } catch (e) { }
    try { t2 = arg2.toString().split(".")[1].length } catch (e) { }
    with (Math) {
        r1 = Number(arg1.toString().replace(".", ""))
        r2 = Number(arg2.toString().replace(".", ""))
        return (r1 / r2) * pow(10, t2 - t1);
    }
}

4、乘法函数，用来得到精确的乘法结果

javascript的乘法结果会有误差，在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。

function accMul(arg1, arg2) {
    var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
    try { m += s1.split(".")[1].length } catch (e) { }
    try { m += s2.split(".")[1].length } catch (e) { }
    return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
}

5、防抖

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 * 连续点击不执行
 */
function debounce(func,wait,immediate) {
    let timeout;

    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        
        if (immediate) { // 立即执行
            var callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else { // 非立即执行
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

6、节流

/**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版，2 表定时器版
 * 连续点击执行一次
 */
function throttle(func, wait, type) {
    if (type === 1) {
        let previous = 0;
    } else if (type === 2) {
        let timeout;
    }
    return function () {
        let context = this;
        let args = arguments;
        if (type === 1) {
            let now = Date.now(); // 获取当前时间戳

            if (now - previous > wait) {
                func.apply(context, args);
                previous = now;
            }
        } else if (type === 2) {
            if (!timeout) { // 判断定时器的存在决定是否执行
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }
        }
    }
}

7、文件上传前判断文件是否为图片类型以及其大小

1、函数

/**
 * 判断上传的文件是否为图片与图片的大小
 * @param {string}  FileId  文件按钮id
 * @param {number}  maxsize  图片大小（单位/M）
 */
function imgTypeSize(FileId, maxsize) {
	/*获取图片内容对象*/
	var imgFile = document.getElementById(FileId).files[0];
	if(imgFile.name == "") {
		alert("请上传图片");
		return false;
	} else {
		/*图片类型正则验证*/
		var imgStr = /\.(jpg|jpeg|png|bmp|BMP|JPG|PNG|JPEG)$/;
		if(!imgStr.test(imgFile.name)) {
			alert("文件不是图片类型");
			return false;
		} else {
			/*图片大小*/
			var imagSize = imgFile.size;
			if(imagSize < (1024 * 1024 * maxsize)) {
				return true;
			} else {
				alert(imgFile.name + "大小不能超过" + maxsize + "M");
				return false;
			}
		}
	}
};

2、html

<input type="file" name="imgId" id="imgId" value="" />

3、js调用

//判断是否为图片，若为图片，判断其大小是否大于0.5M
imgTypeSize('imgId',0.5)

原文链接：传送门

8、文件上传至本地(刷新页面丢失)

    upload(file) {
      var a = file.file;
      var b = window.URL;
      var c = b.createObjectURL(a);
      console.log(c); //本地文件路径
    },

9、判断一个值是数组还是对象

 function dataType(value) {
    if (Object.prototype.toString.call(value) === "[object Array]") {
         console.log('value是数组');
     } else if (Object.prototype.toString.call(value) === '[object Object]') {
         console.log('value是对象');
     } 
 }

10、导出excel中的数据，生成json格式数据

使用 xlsx.core.min.js 插件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导出excel中的数据</title>
</head>

<body>
    <input type="file" value=" " onchange="importXlsx(this)" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.0/xlsx.core.min.js"></script>

    <script>

        function importXlsx(e) {

            const files = e.files;

            let i, f;

            for (i = 0, f = files[i]; i != files.length; ++i) {

                let reader = new FileReader();

                let name = f.name;

                reader.onload = function (e) {

                    let data = e.target.result;

                    let workbook = XLSX.read(data, {

                        type: typeof FileReader !== "undefined" && (FileReader.prototype || {}).readAsBinaryString ?

                            'binary' : 'array'

                    });

                    //遍历每张表
                    for (let sheet in workbook.Sheets) {
                    
                        if (workbook.Sheets.hasOwnProperty(sheet)) {

                            fromTo = workbook.Sheets[sheet]['!ref'];

                            //每张表导出的数据
                            let xlsxData = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);

                            console.log(xlsxData);

                            //根据需求 进行数据处理
                            var arr = [];

                            //数据转换为json
                            console.log(JSON.stringify(arr));
                        };

                    };

                }

                reader.readAsBinaryString(f);

            }
        } 
    </script>
</body>

</html>

禁止浏览器回退

//禁止回退
window.location.hash = "no-back";
window.location.hash = "Again-No-back-button";
window.onhashchange = function () { window.location.hash = "no-back"; }

获取iframe中元素的内容

$('#iframe的id').contents().find('要获取的元素').html()

获取路由参数（将hash值转换为对象）

function getUrlParms() {
    var args = new Object();
    var query = location.search.substring(1); //获取查询串   
    var pairs = query.split("&"); //在逗号处断开   
    for (var i = 0; i < pairs.length; i++) {
        var pos = pairs[i].indexOf('='); //查找name=value   
        if (pos == -1) continue; //如果没有找到就跳过   
        var argname = pairs[i].substring(0, pos); //提取name   
        var value = pairs[i].substring(pos + 1); //提取value   
        args[argname] = unescape(value); //存为属性   
    }
    return args;
}

文件下载

原文：传送门

 let a = document.createElement("a");
 a.setAttribute("href", url);
 a.setAttribute("target", "_blank");
 let clickEvent = document.createEvent("MouseEvents");
 clickEvent.initEvent("click", true, true);
 a.dispatchEvent(clickEvent);

判断是否为数字