/**
* 获取随机数的函数
* @param {number} a 表示范围的数字
* @param {number} b 表示范围的数字
* @returns number 范围内的随机数
*/
function getRandom(a, b) {
var max = a
var min = b
if(a<b) {
max = b
min = a
}
var num = parseInt(Math.random() * (max - min)) + min
return num
}
/**
* 获取随机颜色值的函数
* @param {number} n 必须是16,表示是否获取16进制的颜色值
* @returns 16进制的或rgb的颜色值
*/
function getColor(n) {
if(n === 16) {
var color = '#'
for(var a=0; a<3; a++) {
var num = getRandom(0, 256)
var hex = num.toString(16)
if(hex.length === 1) {
hex = '0' + hex
}
color += hex
}
return color
} else {
var str = 'rgb('
var arr = []
for(var a=0; a<3; a++) {
arr.push(getRandom(0, 256))
}
str += arr.join()
str += ')'
return str
}
}
/**
*
* @param {元素} ele
* @param {样式对象} obj
*/
function setStyle(ele,obj){
for(let key in obj){
ele.style[key]=obj[key]
}
}
/**
* 多项运动函数
* @param {元素} ele
* @param {属性对象} obj
* @param {多个方向} fn
*/
//使用方法:
// box.onclick = function () {
// animate(box, {
// left: 400,
// top: 300,
// opacity: 0.5,
// },
// function(){
// animate(box, {
// left: 0,
// top: 600,
// opacity: 1,
// })
// }
// )
// }
function animate(ele, obj, fn = function () {}) {
var k=0
for (let key in obj) {
k++
let target = obj[key]
let currentStyle=getComputedStyle(ele)[key]
if(key=='opacity'){
target*=100
currentStyle*=100
}
currentStyle=parseInt(currentStyle)
let timer=setInterval(function(){
let speed=(target-currentStyle)/17
speed=speed>0?Math.ceil(speed):Math.floor(speed)
currentStyle+=speed
if(key=='opacity'){
ele.style[key]=currentStyle/100
}else{
ele.style[key]=currentStyle+'px'
}
if(currentStyle==target)
{
clearInterval(timer)
k--
}
if(k==0){
fn()
}
},16)
}
}
原生js工具库
最新推荐文章于 2024-04-30 16:57:21 发布