您的位置:首页 > Web前端 > CSS

通过闭包和setTimeout让背景颜色从黄变白再变紫红

2017-11-01 19:15 281 查看
CSS的Transition只能计算数值型的变量,但颜色本身其实也是数值,不过遵循的变化规律不同而已。以十六位数字而非RGB表示颜色,可以用JS模拟出COLOR的渐变过程。

技术点:

条件下setTimeout调用自身来渐变。

通过设置内部变量作为flag,决定变化的方式。

var b = document.body.style

function changeColor (s,interval){

s.backgroundColor = '#ffffcc'

var level = 2

var changepoint = false

var step = function(){

if(level === -1 && changepoint){

return;
}

var hex  = level.toString(16)

if(changepoint){

//console.log('now change')

s.backgroundColor = '#ff' + hex + hex + 'ff'

}

else {

s.backgroundColor = '#ffff' + hex + hex

}

if(level <16 && !changepoint) {

level ++

if(level === 16 ) {

changepoint = true
}
}

if(level >= 0 && changepoint){

level--
}

setTimeout(step,interval)

//console.log(level,changepoint)

}

setTimeout(step,interval)

}

changeColor(b,50)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐