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<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;
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,421评论 1 45
  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,114评论 0 13
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • cheneydc阅读 223评论 0 0
  • 昨天做了一个梦,醒来发现自己紧靠着孩子睡,有了孩子的陪伴,这个梦显得就没那么害怕了。 我被人追着跑,老公也在身边,...
    安安木棉阅读 177评论 0 0