js utils 封装

• 解决小数相加的误差

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;
}
# 解决小数相减的误差

```js
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);
}

• 精确的除法结果

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

• 精确的乘法结果

- 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)
}

• 防抖

/**
 * @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);
        }
    }
}

• 节流

/**
 * @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)
            }
        }
    }
}

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

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

• 判断一个值是数组还是对象

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是对象');
    } 
}

• 深拷贝

// 定义一个深拷贝函数  接收目标target参数
function deepClone(target) {
  // 定义一个变量
   let result;
   // 如果当前需要深拷贝的是一个对象的话
   if (typeof target === 'object') {
   // 如果是一个数组的话
       if (Array.isArray(target)) {
           result = []; // 将result赋值为一个数组，并且执行遍历
           for (let i in target) {
               // 递归克隆数组中的每一项
               result.push(deepClone(target[i]))
           }
        // 判断如果当前的值是null的话；直接赋值为null
       } else if(target===null) {
           result = null;
        // 判断如果当前的值是一个RegExp对象的话，直接赋值    
       } else if(target.constructor===RegExp){
           result = target;
       }else {
        // 否则是普通对象，直接for in循环，递归赋值对象的所有值
           result = {};
           for (let i in target) {
               result[i] = deepClone(target[i]);
           }
       }
    // 如果不是对象的话，就是基本数据类型，那么直接赋值
   } else {
       result = target;
   }
    // 返回最终结果
   return result;
}

• 监听网页打印事件

 var beforePrint = function () {
        console.log('Functionality to run before printing.');
    };

    var afterPrint = function () {
        console.log('Functionality to run after printing');
    };

    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function (mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }
    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;

• 导出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"; }

• 获取路由参数（将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);

• 日期格式转换

/**
 * @description 获取 日期 || 时间  或  传入时间戳 获取转换后得 时间格式
 * @param {String} type 
 * date     2022-11-11 
 * time     12:13:14 
 * dateTime     2022-11-11 12:13:14
 * cdate        2022年11月11日
 * ctime        11时11分11秒
 * cdateTime    2022年11月11日 11时11分11秒
 * y  2022
 * m  12
 * d  12
 * @param {String} timer 时间
 */
export function getTimer(type, timer) {
    if (!['date', 'time', 'dateTime', 'cdate', 'ctime', 'cdateTime', 'y', 'm', 'd'].includes(type)) new Error('getTimer type error');
    const time = timer ? new Date(timer) : new Date();
    var y = time.getFullYear();
    var m = (time.getMonth() + 1).toString().padStart(2, 0);
    var d = time.getDate().toString().padStart(2, 0);
    var h = time.getHours().toString().padStart(2, 0);
    var mm = time.getMinutes().toString().padStart(2, 0);
    var s = time.getSeconds().toString().padStart(2, 0);

    const obj = {
        'y': y,
        'm': m,
        'd': d,
        'date': y + "-" + m + "-" + d,
        'time': h + "-" + mm + "-" + s,
        'dateTime': y + "-" + m + "-" + d + " " + h + ":" + mm + ":" + s,
        'cdate': y + '年' + m + '月' + d + '日',
        'ctime': h + '时' + mm + '分' + s + '秒',
        'cdateTime': y + '年' + m + '月' + d + '日' + " " + h + '时' + mm + '分' + s + '秒'
    }

    return obj[type]
}

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

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

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

/**
 * 判断上传的文件是否为图片与图片的大小
 * @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;
            }
        }
    }
};

• 时间戳转换时间（x天x小时x分钟x秒）

/**
 * @description 获取 天 小时 分钟 秒
 * @param {String|number} timestamp 时间戳
 * 
 * type 
 * d         天
 * d-h       天-小时
 * d-h-m     天小时分钟
 * d-h-m-s   天-小时-分钟-秒
 * 
 */
export function getTimed(type, timestamp) {
    if (!['d', 'd-h', 'd-h-m', 'd-h-m-s'].includes(type)) new Error('getTimer type error');
    if (!isNumber(Number(timestamp)) || timestamp == 0) return '--'
    var seconds = Math.floor(timestamp / 1000 % 60);
    var minutes = Math.floor(timestamp / 1000 / 60 % 60);
    var hours = Math.floor(timestamp / 1000 / 60 / 60 % 24);
    var days = Math.floor(timestamp / 1000 / 60 / 60 / 24);
    const obj = {
        'd': days + '天',
        'd-h': days + '天' + hours + '小时',
        'd-h-m': days + '天' + hours + '小时' + minutes + '分钟',
        'd-h-m-s': days + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒'
    }
    return obj[type]
}

• 数组对象去重

let map = new Map();
for (let item of res.data) {
    map.set(item.nodeId, item);
}
let list = [...map.values()]

• 导出流数据函数

/**
 * @description 导出流数据函数
 * @param data 流 
 * @param {String} fileName 文件名 --- 带后缀
 * @param {String} typeInfo 是否为 image/png true 不是图片 false或不传 是图片
 */
export function exportExcel(data, fileName, typeInfo) {
    const link = document.createElement('a')
    var ext = /\.[^\.]+$/.exec(fileName);
    const blob = new Blob([data], {
        type: typeInfo ? getResponseType(ext[0].split('.')[1]) : 'image/png'
    })
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)

    link.download = fileName // 下载的文件名
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
}

function getResponseType(ext) {
    var responseType = {
        'abw': 'application/x-abiword',
        'arc': 'application/x-freearc',
        'avi': 'video/x-msvideo',
        'azw': 'application/vnd.amazon.ebook',
        'bin': 'application/octet-stream',
        'bmp': 'image/bmp',
        'bz': 'application/x-bzip',
        'bz2': 'application/x-bzip2',
        'csh': 'application/x-csh',
        'css': 'text/css',
        'csv': 'text/csv',
        'doc': 'application/msword',
        'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        'eot': 'application/vnd.ms-fontobject',
        'epub': 'application/epub+zip',
        'gif': 'image/gif',
        'htm': 'text/html',
        'html': 'text/html',
        'ico': 'image/vnd.microsoft.icon',
        'ics': 'text/calendar',
        'jar': 'application/java-archive',
        'jpeg': 'image/jpeg',
        'jpg': 'image/jpeg',
        'js': 'text/javascript',
        'json': 'application/json',
        'jsonld': 'application/ld+json',
        'mid': 'audio/midi audio/x-midi',
        'midi': 'audio/midi audio/x-midi',
        'mjs': 'text/javascript',
        'mp3': 'audio/mpeg',
        'mpeg': 'video/mpeg',
        'mpkg': 'application/vnd.apple.installer+xml',
        'odp': 'application/vnd.oasis.opendocument.presentation',
        'ods': 'application/vnd.oasis.opendocument.spreadsheet',
        'odt': 'application/vnd.oasis.opendocument.text',
        'oga': 'audio/ogg',
        'ogv': 'video/ogg',
        'ogx': 'application/ogg',
        'otf': 'font/otf',
        'png': 'image/png',
        'pdf': 'application/pdf',
        'ppt': 'application/vnd.ms-powerpoint',
        'pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
        'rar': 'application/x-rar-compressed',
        'rtf': 'application/rtf',
        'sh': 'application/x-sh',
        'svg': 'image/svg+xml',
        'swf': 'application/x-shockwave-flash',
        'tar': 'application/x-tar',
        'gz': 'application/x-tar',
        'tif': 'image/tiff',
        'tiff': 'image/tiff',
        'ttf': 'font/ttf',
        'txt': 'text/plain',
        'vsd': 'application/vnd.visio',
        'wav': 'audio/wav',
        'weba': 'audio/webm',
        'webm': 'video/webm',
        'webp': 'image/webp',
        'woff': 'font/woff',
        'woff2': 'font/woff2',
        'xhtml': 'application/xhtml+xml',
        'xls': 'application/vnd.ms-excel',
        // 'xls':'application/x-xls',
        'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        'xml': 'text/xml',
        'xul': 'application/vnd.mozilla.xul+xml',
        'zip': 'application/zip',
        '3gp': 'video/3gpp',
        '3g2': 'video/3gpp2',
        '7z': 'application/x-7z-compressed',
    };
    // if (responseType.hasOwnProperty(ext)) {
    //     console.log('文件类型[' + ext + ']未找到ResponseType');
    //     return ext;
    // }
    return responseType[ext];
}

• 获取元素的margin值

.text {
    margin: 5px 10px 15px 20px;
    padding: 25px 10px 5px 3px;
}

<div class="container">
    <p class="text">text</p>
</div>

var textNode = document.querySelector('.text')

// 获取 width、marginTop、paddingTop等
function getStyle(obj,attr){ 
  if(obj.currentStyle){ 
    return obj.currentStyle[attr]; 
  } 
  else{ 
    return document.defaultView.getComputedStyle(obj,null)[attr]; 
  } 
}

var width = getStyle(textNode, 'width')
var marginTop = getStyle(textNode, 'marginTop')

• ajax封装

function ajaxFun(opt){

    //初始化
    var type = "post"; // 发送方式post|get
    var asyn = true; // 是否异步
    var withCredentials = false; // 跨域
    var data = {}; // 查询参数
    var url = ""; // 访问地址
    var outtime = 10000; // 超时时间 单位毫秒
    var success = function(){}; // 返回成功后的处理函数
    var error = function(){};  // 错误后的处理函数
    var onouttime = function(){};  // 超时后的处理函数

    if(!opt.url){
        console.log('必填访问地址');
        return false;
    }

    //替换传入值
    if(opt.type){ type = opt.type; } 
    if(opt.asyn){ asyn = opt.asyn; } 
    if(opt.withCredentials){ withCredentials = opt.withCredentials; } 
    if(opt.data){ data = opt.data; } 
    if(opt.url){ url = opt.url; } 
    if(opt.outtime){ outtime = opt.outtime; } 
    if(opt.success){ success = opt.success; } 
    if(opt.error){ error = opt.error; } 
    if(opt.onouttime){ onouttime = opt.onouttime; }

    //拼接查询字符串
    var datastr = "";
    for(key in data){
        if(datastr) { datastr += "&"; }
        datastr = datastr + `${key}=${data[key]}`;
    }

    // 获取 XMLHttpRequest对象
    var xmlHttp = new XMLHttpRequest();

    // 连接服务器
    xmlHttp.open(type, url, asyn); //api地址

    // 跨域
    if(withCredentials){
        xmlHttp.withCredentials = withCredentials;
    }

    // 设置请求头的Content-Type
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    // 发送数据
    xmlHttp.send(datastr);

    // 回调函数  success
    xmlHttp.onreadystatechange = function () {

        if (this.readyState == 4 && this.status == 200) {

            success(this.responseText);

        }
    };

    xmlHttp.ontimeout = function(){
        onouttime();
    };

    xmlHttp.onerror = function (){
        error();
        console.log(arguments);
    }                

}

//调用
ajaxFun({
    type : "post",
    asyn : true,
    withCredentials : true,
    data : {"id":3,"proid":5},
    url : "api.txt",
    success : function(re){
        console.log(re);
    },
    outtime : 2000,
    onouttime : function(){
        console.log('超时了');
    }
})

• 轮播图

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .clearfix::after {
        content: "";
        display: block;
        clear: both;
    }

    .focus {
        width: 1200px;
        height: 800px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        border: 5px solid #ccc;
    }

    .focus-ul {
        /* width: 7000px; */
        height: 800px;
        position: absolute;
        top: 0;
        left: 0;

    }

    .focus-ul li {
        cursor: pointer;
        width: 1200px;
        height: 800px;
        float: left;
    }

    .left {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        font-size: 24px;
        padding: 15px 30px;
        background-color: rgba(0, 0, 0, .3);
        color: #fff;
        z-index: 9;
        display: none;
    }

    .right {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        font-size: 24px;
        padding: 15px 30px;
        background-color: rgba(0, 0, 0, .3);
        color: #fff;
        z-index: 9;
        display: none;
    }

    .focus-ol {
        display: inline-block;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .focus-ol li {
        cursor: pointer;
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 0 10px;
        border: 1px solid #fff;
        border-radius: 50%;
    }

    .current {
        background-color: #fff;
    }
</style>

<body>
    <div class="focus">
        <!-- 左右按钮  -->
        <a class="left" href="javascript:;">&lt;</a>
        <a class="right" href="javascript:;">&gt;</a>
        <!-- 内容 -->
        <ul class="clearfix focus-ul">
            <li><img src="./img/banner1.jpg" alt=""></li>
            <li><img src="./img/banner2.jpg" alt=""></li>
            <li><img src="./img/banner3.jpeg" alt=""></li>
            <li><img src="./img/banner4.jpg" alt=""></li>
        </ul>
        <!-- 小圆圈 -->
        <ol class="focus-ol"></ol>
    </div>

    <script>
        //获取元素
        var focus = document.querySelector('.focus');//最外层div
        var left = document.querySelector('.left');//左按钮
        var right = document.querySelector('.right');//右按钮
        var focus_ul = document.querySelector('.focus-ul');//ul
        var focus_ul_li = document.querySelectorAll('.focus-ul li')//ul里的所有li
        var focus_ol = document.querySelector('.focus-ol');//ol
        var focus_ol_li; //获取所有ol中的li
        var focusWidth = focus.offsetWidth;//最外层div宽度
        var index = 0;//点击按钮移动图片下标
        var circle = 0;//点击按钮移动小圆点下标
        var timer;//定时器
        var flag = true;//创建节流阀控制点击事件触发

        //ul的长度
        ulLength();

        //鼠标移入显示左右按钮
        showBtn();

        //添加小圆点
        circles();

        //小圆点添加点击事件
        circlesClick();

        //点击小圆点移动图片
        circlesClickMove();

        //复制第一张图片到最后面
        cloneImg();

        //点击右按钮
        rightBtn();

        //点击左按钮
        leftBtn();

        //创建定时器让图片不断移动
        creationInterval();

        //ul的长度
        function ulLength(){
            focus_ul.style.width = focusWidth * focus_ul_li.length + focusWidth + 'px';
        }

        //鼠标移入显示左右按钮
        function showBtn() {
            focus.addEventListener('mouseenter', function () {
                left.style.display = 'block';
                right.style.display = 'block';
                //清除定时器
                clearInterval(timer);
            });
            focus.addEventListener('mouseleave', function () {
                left.style.display = 'none';
                right.style.display = 'none';
                //创建定时器
                creationInterval();
            });
        }

        //添加小圆点
        function circles() {
            for (let i = 0; i < focus_ul.children.length; i++) {
                let li = document.createElement('li');
                focus_ol.appendChild(li);
            }
            focus_ol.children[0].classList.add('current');
            focus_ol_li = focus_ol.children;
        }

        //小圆点添加点击事件
        function circlesClick() {
            for (let i = 0; i < focus_ol_li.length; i++) {
                focus_ol_li[i].addEventListener('click', function () {
                    //点击添加样式
                    for (let j = 0; j < focus_ol_li.length; j++) {
                        focus_ol_li[j].classList.remove('current');
                    }
                    this.classList.add('current');
                })
            }
        }

        //小圆点点击移动图片
        function circlesClickMove() {
            for (let i = 0; i < focus_ol_li.length; i++) {
                focus_ol_li[i].addEventListener('click', function () {
                    animate(focus_ul, -i * focusWidth)
                })
            }
        }

        //复制第一张图片
        function cloneImg() {
            let first_img = focus_ul_li[0].cloneNode(true);
            focus_ul.appendChild(first_img);
        }

        //点击右按钮
        function rightBtn() {
            right.addEventListener('click', function () {
                rightBtnMove();
            })
        }

        //点击右按钮移动
        function rightBtnMove() {
            if (flag) {
                flag = false;
                if (index >= focus_ul_li.length) {
                    index = 0;
                    focus_ul.style.left = 0;
                }
                index++;
                animate(focus_ul, -index * focusWidth, function () {
                    flag = true;
                });
                rightBtnClickCirclesConversion();
            }
        }
        //点击左按钮
        function leftBtn() {
            left.addEventListener('click', function () {
                leftBtnMove();
            })
        }

        //点击左按钮移动
        function leftBtnMove() {
            if (flag) {
                flag = false;
                if (index == 0) {
                    index = focus_ul_li.length;
                    focus_ul.style.left = -index * focusWidth + 'px';
                }
                index--;
                animate(focus_ul, -index * focusWidth, function () {
                    flag = true;
                });
                leftBtnClickCirclesConversion();
            }
        }

        //点击右按钮小圆点变换
        function rightBtnClickCirclesConversion() {
            circle++;
            if (circle >= focus_ol_li.length) {
                circle = 0;
            }
            btnCircleStyle();
        }

        //点击左按钮小圆点变换
        function leftBtnClickCirclesConversion() {
            if (circle == 0) {
                circle = focus_ol_li.length;
            }
            circle--;
            btnCircleStyle();
        }

        //点击左右按钮，小圆点添加样式
        function btnCircleStyle() {
            for (let i = 0; i < focus_ol_li.length; i++) {
                for (let j = 0; j < focus_ol_li.length; j++) {
                    focus_ol_li[j].classList.remove('current');
                }
                focus_ol_li[circle].classList.add('current');
            }
        }

        //图片移动动画
        function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                //步长值写到定时器的里面
                //把步长值改为整数 不要出现小数问题
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    //停止定时器
                    clearInterval(obj.timer);
                    //回调函数写在定时器结束里面
                    // if(callback){
                    //     callback();
                    // }
                    callback && callback();
                }
                //把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在位置) / 10 
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15);
        }

        //创建定时器
        function creationInterval() {
            timer = setInterval(function () {
                right.click();
            }, 2000)
        }
    </script>
</body>

</html>