前端开发常用js函数

作者: zkzhengmeng | 来源:发表于2019-03-28 14:13 被阅读0次

1.获取URL中所传的参数中的值

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;

}

2. 60秒倒计时函数

function codeButton() {
    var code = $("#code");
    code.attr("disabled", "disabled");
    setTimeout(function() {
        code.css("opacity", "0.8");
    }, 1000)
    var time = 60;
    var set = setInterval(function() {
        code.val("(" + --time + ")秒后重新获取");
    }, 1000);
    setTimeout(function() {
        code.attr("disabled", false).val("重新获取验证码");
        clearInterval(set);
    }, 60000);
}

3.判断当月总天数的函数

function getDay(year, month) {
    var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    //如果是润年
    if (year % 4 == 0 && (year % 400 == 0 || year % 100 != 0)) {
        days[1] == 29;
    }
    return days[month];
}

4.获取当前时间，格式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;
}

5.获取当前时间格式 2021-11-25 18:51:58

function getNowFormatDate() {
                var date = new Date();
                var seperator1 = "-";
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var strDate = date.getDate(); 
                let hou =     date.getHours();     // 获取当前小时数(0-23)
                let min =     date.getMinutes();  // 获取当前分钟数(0-59)
                let sin =     date.getSeconds();  // 获取当前分钟数(0-59)
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                if (hou >= 0 && hou <= 9) {
                    hou = "0" + hou;
                }
                if (min >= 0 && min <= 9) {
                    min = "0" + min;
                }
                if (sin >= 0 && sin <= 9) {
                    sin = "0" + sin;
                }
                var currentdate = year + seperator1 + month + seperator1 + strDate +" " +hou+":"+min+":"+sin;
                return currentdate;
            },

6.获取当前时间往前推n天的日期，格式YYYY-MM-DD

function getBeforeDate(n) {
    var n = n;
    var d = new Date();
    var year = d.getFullYear();
    var mon = d.getMonth() + 1;
    var day = d.getDate();
    if (day <= n) {
        if (mon > 1) {
            mon = mon - 1;
        } else {
            year = year - 1;
            mon = 12;
        }
    }
    d.setDate(d.getDate() - n);
    year = d.getFullYear();
    mon = d.getMonth() + 1;
    day = d.getDate();
    s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
    return s;
}

7.计算两个日期间有几天

function getDiffDate(dateString1, dateString2) {
    var startDate = Date.parse(dateString1.replace('/-/g', '/'));
    var endDate = Date.parse(dateString2.replace('/-/g', '/'));
    var diffDate = (endDate - startDate) + 1 * 24 * 60 * 60 * 1000;
    var days = diffDate / (1 * 24 * 60 * 60 * 1000);
    //alert(diffDate/(1*24*60*60*1000));
    return days;
}

8.生成区间随机数

function randombetween(min, max) {
    return min + (Math.random() * (max - min + 1));
}

9.处理input中的空白字符串

function inputValue(text) {
    var _val = text.replace(/^(\s|\u00A0)+/, '').replace(/(\s|\u00A0)+$/, '');
    return _val;
}

10.判断开始时间不能大于结束时间

function time_size(start_time, end_time) {
    var start_time = new Date(start_time.replace(/\-/g, "\/"));
    var end_time = new Date(end_time.replace(/\-/g, "\/"));
    if (start_time > end_time) {
        alert('开始时间不能大于结束时间')
    }
}

11.随机生成颜色值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>随机生成颜色值</title>
        <style type="text/css">
            .start{
                width: 200px;
                height: 200px;
                background: #CCCCCC;
                margin: 100px auto;
            }
        </style>
    </head>
    <body>
        <div class="start">
            <h1 class="title">又是美好的一天</h1>
        </div>
    </body>
    <script type="text/javascript">
        
        var title = document.querySelector('.title');
        title.style.color = randomColor()
        
    
        function randBack(){  //rgb颜色值 reg(255,0,256)
            var r = Math.floor( Math.random() * 256 );
            var g = Math.floor( Math.random() * 256 );    
            var b = Math.floor( Math.random() * 256 );
            return "rgb("+r+','+g+','+b+")";
        }
        
        function randomColor(){ // 16进制颜色值 #ff9900
            var colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
            var colorArray = colorValue.split(",");
            var color = "#";
            for( var i = 0; i < 6; i++ ){
                color += colorArray[ Math.floor( Math.random() * 16 ) ];
            }
            return color;
        }
    </script>
</html>

12.校验密码：只能输入6-20个字母、数字、下划线

function isPasswd(s) {
    var patrn = /^(\w){6,20}$/;
    if (!patrn.exec(s)) return false
    return true
}

13. 获取域名主机 params: url:域名

function getHost(url) {
    var host = "null";
    if (typeof url == "undefined" || null == url) {
        url = window.location.href;
    }
    var regex = /^\w+\:\/\/([^\/]*).*/;
    var match = url.match(regex);
    if (typeof match != "undefined" && null != match) {
        host = match[1];
    }
    return host;
}

14. cookie相关操作

//  设置cookie
function setCookie(name, value) {
    const Days = 30; //一个月
    let exp = new Date();
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
    document.cookie =
        name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}

//  获取cookie
function getCookie(name) {
    let arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
    if (arr != null) {
        return arr[2];
    } else {
        return "";
    }
}

//  删除cookie
function delCookie(name) {
    let exp = new Date();
    exp.setTime(exp.getTime() - 1);
    let cval = getCookie(name);
    if (cval != null) {
        document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
    }
}

15.本地存储相关操作

//  设置sessionStorage    保存后浏览器关闭值即消失
function setSessionStorage(key, value) {
    if (window.sessionStorage) {
        window.sessionStorage.setItem(key, window.JSON.stringify(value));
    }
},

//  获取sessionStorage
function getSessionStorage(key) {
    var json = "";
    if (window.sessionStorage) {
        json = window.sessionStorage.getItem(key);
    }
    return window.JSON.parse(json);
},

//  删除sessionStorage
function deleteItem() {
    sessionStorage.removeItem('userinfo');
    console.log(sessionStorage.getItem('userinfo'));
}

//  设置localStorage   保存后永久有效
function setLocalStorage(key, value) {
    if (window.localStorage) {
        window.localStorage.setItem(key, window.JSON.stringify(value));
    }
},

//  获取localStorage
function getLocalStorage(key) {
    var json = "";
    if (window.localStorage) {
        json = window.localStorage.getItem(key);
    }
    return window.JSON.parse(json);
},

//  删除localStorage
function deleteItem() {
    localStorage.removeItem('userinfo');
    console.log(localStorage.getItem('userinfo'));
}

16.时间倒计时

function getEndTime(endTime) {
    var startDate = new Date(); //开始时间，当前时间
    var endDate = new Date(endTime); //结束时间，需传入时间参数
    var t = endDate.getTime() - startDate.getTime(); //时间差的毫秒数
    var d = 0,
        h = 0,
        m = 0,
        s = 0;
    if (t >= 0) {
        d = Math.floor(t / 1000 / 3600 / 24);
        h = Math.floor((t / 1000 / 60 / 60) % 24);
        m = Math.floor((t / 1000 / 60) % 60);
        s = Math.floor((t / 1000) % 60);
    }
    return "剩余时间" + d + "天 " + h + "小时 " + m + " 分钟" + s + " 秒";
}

17.移动端自适应rem单位

function getFontSize(_client) {
    var doc = document,
        win = window;
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            //如果屏幕大于750（750是根据我效果图设置的，具体数值参考效果图），就设置clientWidth=750，防止font-size会超过100px
            if (clientWidth > _client) {
                clientWidth = _client
            }
            //设置根元素font-size大小
            docEl.style.fontSize = 100 * (clientWidth / _client) + 'px';
        };
    //屏幕大小改变，或者横竖屏切换时，触发函数
    win.addEventListener(resizeEvt, recalc, false);
    //文档加载完成时，触发函数
    doc.addEventListener('DOMContentLoaded', recalc, false);
},

18.清除字符串前后的空格

 function trim(s){
    return s.replace(/(^\s*)|(\s*$)/g, "");
 }

19.把任意时间格式转换成('2019-08-20')格式

function parseTime(time, cFormat) {
  if (arguments.length === 0) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
      time = parseInt(time)
    }
    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return time_str
}

调用案例:
var time = new Date()
   parseTime(time ,'{yyyy}-{mm}-{dd}')

20.将普通json数据格式化成tree类型数据

function transTree(data) {
        let result = [];
        let map = {};
        if (!Array.isArray(data)) {
            return [];
        }
        data.forEach((item) => {
            map[item.id] = item;
            delete item.children;
        });
        data.forEach((item) => {
            let parent = map[item.pid];//pid可根据后台返回自己定义
            if (parent) {
                (parent.children || (parent.children = [])).push(item);
            } else {
                result.push(item);
            }
        });
        console.log(result)
        return result;
    }

21.递归遍历json树结构数据

function setName(datas){ //遍历树  获取id数组
            let arr = []
              for(let i in datas){
                  if(datas[i].show){// 遍历项目满足条件后的操作
                     arr.push(datas[i].id)  
                  }
                if(datas[i].children){  //存在子节点就递归
                  for(let n in  datas[i].children){
                      if(datas[i].children[n].show){
                         arr.push(datas[i].children[n].id)   
                      }
                      this.setName(datas[i].children);
                  }
                }
              }
              return arr
            },

22.文字替代(添加css样式)

function  changeText(name) {
                return name.replace(this.searchName, `<span style='color:#11CA7A;'>${this.searchName}</span>`);
            }

23.获取用户guid

    function Guid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }

23. 遍历原数据转换成json树结构数据

function setName(datas){ //遍历树  获取id数组
    let codeMap = {};
    let treeList = [] ;
     datas.forEach((item, i) => {
        codeMap[item.id] = item;
        let parentNode = codeMap[item.parent];
        if (parentNode) {
        if (parentNode.children && parentNode.children.length > 0) {
            parentNode.children.push(item);
        }else {
                parentNode["children"] = [item];
            }
        } else {
                treeList.push(item);
            }
        });
           return treeList 
    }

24. 根据条件递归循环筛选树结构数据

getCurrentMenu(dataList, roleList){
  let menu = dataList.filter(item =>{
    console.log(roleList.indexOf(item.name) !== -1)
    if(roleList.indexOf(item.name) !== -1){
      if(item.children){
          //递归循环
          item.children=getCurrentMenu(item.children,roleList)
      }
      return item
    }
  })
  return menu
}

25. base64图片缓存到本地,返回本地路径

/**
 * base64图片缓存到本地,返回本地路径
 * */
function base64ToPath(base64) {
  return new Promise(function (resolve, reject) {
    if (typeof window === 'object' && 'document' in window) {
      base64 = base64.split(',')
      var type = base64[0].match(/:(.*?);/)[1]
      var str = atob(base64[1])
      var n = str.length
      var array = new Uint8Array(n)
      while (n--) {
        array[n] = str.charCodeAt(n)
      }
      return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], {
        type: type
      })))
    }
    var extName = base64.match(/data\:\S+\/(\S+);/)
    if (extName) {
      extName = extName[1]
    } else {
      reject(new Error('base64 error'))
    }
    var fileName = Date.now() + '.' + extName
    if (typeof plus === 'object') {
      var bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
      bitmap.loadBase64Data(base64, function () {
        var filePath = '_doc/uniapp_temp/' + fileName
        bitmap.save(filePath, {}, function () {
          bitmap.clear()
          resolve(filePath)
        }, function (error) {
          bitmap.clear()
          reject(error)
        })
      }, function (error) {
        bitmap.clear()
        reject(error)
      })
      return
    }
    if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
      var filePath = wx.env.USER_DATA_PATH + '/' + fileName
      wx.getFileSystemManager().writeFile({
        filePath: filePath,
        data: base64.replace(/^data:\S+\/\S+;base64,/, ''),
        encoding: 'base64',
        success: function () {
          resolve(filePath)
        },
        fail: function (error) {
          reject(error)
        }
      })
      return
    }
    reject(new Error('not support'))
  })
}

26.文件下载

/**
 * 文件下载
 * 
 * @param {String} url 下载的路径 
 * @param {String} fileName 文件名称 带格式后缀
 * 
 */
function download (url, fileName) {
    const link = document.createElement("a");
    link.href =baseUrl + url; //基础路径+后台返回文件地址
    link.target = "_blank";
    link.download = fileName;
    link.style.display = "none";
    document.body.append(link);
    link.click();
    document.body.removeChild(link);
};

27.将base64转换成file对象

 // 将base64转换成file对象
   function dataURLtoFile (dataurl, filename = 'file') {
        let arr = dataurl.split(',')
        let mime = arr[0].match(/:(.*?);/)[1]
        let suffix = mime.split('/')[1]
        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], `${filename}.${suffix}`, {type: mime})
    }

28.复制文本

 //复制文本
    copyText(data){
      let url = data;//需要复制的文本
      //新建一个文本框
      let oInput = document.createElement('input');
      //赋值给文本框
      oInput.value = url;
      document.body.appendChild(oInput);
      // 选择对象;
      oInput.select();
      // 执行浏览器复制命令
      document.execCommand("Copy");
      //复制完成删除掉输入框
      oInput.remove()
      console.log('复制成功')
    }

前端开发常用js函数

1.获取URL中所传的参数中的值

2. 60秒倒计时函数

3.判断当月总天数的函数

4.获取当前时间，格式YYYY-MM-DD

5.获取当前时间格式 2021-11-25 18:51:58

6.获取当前时间往前推n天的日期，格式YYYY-MM-DD

7.计算两个日期间有几天

8.生成区间随机数

9.处理input中的空白字符串

10.判断开始时间不能大于结束时间

11.随机生成颜色值

12.校验密码：只能输入6-20个字母、数字、下划线

13. 获取域名主机 params: url:域名

14. cookie相关操作

15.本地存储相关操作

16.时间倒计时

17.移动端自适应rem单位

18.清除字符串前后的空格

19.把任意时间格式转换成('2019-08-20')格式

20.将普通json数据格式化成tree类型数据

21.递归遍历json树结构数据

22.文字替代(添加css样式)

23.获取用户guid

23. 遍历原数据转换成json树结构数据

24. 根据条件递归循环筛选树结构数据

25. base64图片缓存到本地,返回本地路径

26.文件下载

27.将base64转换成file对象

28.复制文本

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

技术无边界