美文网首页
js实用方法

js实用方法

作者: 逆_3ec2 | 来源:发表于2018-08-27 18:19 被阅读0次

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<length;i++){
      let vlidateCode = Math.floor(Math.random() * str1.length);
      str += str1.substr(vlidateCode, 1);
  }
  return str;
}
console.log(getRandomVlidateCode(4));

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

相关文章

  • js实用方法

    1、获取元素的样式的方法 2、定时器的兼容写法 3、IE 678的判断 1、添加千位分隔符 2、数据统计效果 3、...

  • 实用的js方法

    Array.find():获取数组中第一个满足条件的元素,找到返回该元素,找不到返回undefinedArray....

  • js原生实用方法集合

    1.webapp检测浏览器类型——面向对象 使用改封装需new Browser()来调用检测是否为微信浏览器,安卓...

  • js相关-实用方法收集

    在有滚动条的情况下,判断页面是否滚动到了底部 $(window).scrollTop(): 获取窗口滚动条的距离$...

  • 比较实用的js方法

    1获取元素 原生JS添加类名 删除类名 检查是否含有某个CSS类名 3获取距离页面的距离getBoundingCl...

  • 原生js日期插件实现

    网上有很多实现日期插件的方法,不过扩展了些,相对于项目实用方法。 html结构及其配置参数 引入css,引入js即...

  • js的Math对象

    js的Math对象里面有很多数学上的方法,很实用http://www.w3school.com.cn/jsref/...

  • Ubuntu 下安装Node.JS的最佳方式

    从Github远程库安装Node.JS (这是我经过反复实践后,得出的最简洁最实用的方法,里面有一些坑的处理方法,...

  • 【Javascript】js实用方法函数整理

    No.1 取URL上的参数 No.2 动态插入 script to html No.3 判断平台 No.4 判断是...

  • 资料大放送

    个人认为比较详细易懂的文章 1. WKWebView ---简单实用,包含iOS与js方法相互调用 2. 取消...

网友评论

      本文标题:js实用方法

      本文链接:https://www.haomeiwen.com/subject/iirqxftx.html