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