js实用方法

1、获取元素的样式的方法

// 获取元素样式值的兼容性写法
function getStyle(obj) {
  // currentStyle属性兼容IE，getComputedStyle属性兼容谷歌火狐
  return obj.currentStyle || getComputedStyle(obj);
}

/* js添加行内样式
  注：
      1、单个样式使用驼峰命名法
      2、单个样式的语法：
*/
元素.style.属性名= "属性值";

// js添加多个行内样式的语法：
元素.style.cssText = "属性:属性值;...";

2、定时器的兼容写法

//requestAnimationFrame兼容写法（完整版本）
window.requestAnimationFrame = (function (){
  return window.requestAnimationFrame  ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback){
      window.setTimeout(callback, 1000/60);
    }
})();

//requestAnimationFrame兼容写法（简写版本）
var requestAnimationFrame = window.requestAnimationFrame || 
  function(callback){return setTimeout(callback,1000/60);}

3、IE 678的判断

if(!-[1,]){ 
  // -有隐式转换的功能，转为number类型，在IE678里面[1,]不能识别，会返回为NaN，现代浏览器里面则会返回1
  // 因此-[1,]为false
  console.log("这是IE678");
}

1、添加千位分隔符

/**
 * @param num 数字
 * @param significand  有效数字位数
 * @returns {string}
 */
function numFormat(num, significand){ //  添加千位分隔符
    var numStr = num.toString();
    if (significand != undefined) {
        numStr = parseFloat(num).toFixed(significand).toString();
    }
    var int = numStr.split(".")[0];
    var decimals = numStr.split(".")[1] ? "."+ numStr.split(".")[1] : "";
    var intArr = int.split("").reverse();
    var str = "";
    for (var i = intArr.length; i >= 0; i--) {
        if (intArr[i] != undefined) {
            if (i%3 == 0 && i != 0){
                str += intArr[i]+",";
            } else {
                str += intArr[i];
            }
        }
    }
    return str += decimals;
}

2、数据统计效果

/**
 * @param ele   操作的元素
 * @param value   数值
 * @param significand   有效数字位数
 * @param unit   单位
 * @returns {string}
 */
function countNumber(ele, value, significand, unit) {
            var timer = null;
            var i = 0;
            timer = setInterval(function () {
                i += value/30;
                if (i >= value) {
                    ele.html(value.toFixed(significand) + unit);
                    clearInterval(timer);
                } else {
                    ele.html(i.toFixed(significand) + unit);
                }
            },20);
}

3、生成指定位数的随机验证码

//生成指定位数的随机验证码
function getRandomVlidateCode(length){
  let str1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      str1 += "abcdefghijklmnopqrstuvwxyz";
      str1 += "0123456789-_";
      let str = "";
  for (let i=0;i

4、生成随机颜色

//随机取得min~max之间的整数
const randomInt = (min,max) => Math.floor(Math.random()*(max+1-min)+min);
// 随机的rgb数
const rgb = function(){
  return `rgb(${ randomInt(0,255)},${ randomInt(0,255)},${ randomInt(0,255)})`;
};
//随机rgba数
const rgba = ()=>`rgb(${randomInt(0,255)}, 
 ${randomInt(0,255)}, ${randomInt(0,255)}, ${Math.random().toFixed(1)})`;//取得小数后1位
//随机16进制颜色-1
const color_16 = function(){
  let arr = [0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
  let color = "#";
  for(let i=0;i<6;i++){
    color += arr[randomInt(0,arr.length-1)];//随机的取一个下标值
  }
  return color;
}
//随机16进制颜色-2
const color_16_2 = function(){
  let str = "#";
  for (let i=0;i<6;i++){
    let color = Math.floor(Math.random() * 16).toString(16).toUpperCase();
    str += color;
  }
  return str;
}