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

十方魔

于 2017-11-01 19:15:34 发布

阅读量471

点赞数

CC 4.0 BY-SA版权

分类专栏：前端/Javascript 前端/CSS 文章标签：闭包 css 十六进制颜色颜色渐变 setTimeout

本文链接：https://blog.youkuaiyun.com/github_36487770/article/details/78417421

前端/Javascript 同时被 2 个专栏收录

45 篇文章

订阅专栏

前端/CSS

24 篇文章

订阅专栏

本文介绍如何使用JavaScript模拟CSS颜色渐变效果，通过设置内部变量控制变化方式，利用setTimeout实现颜色从#ffffcc到#ff00ff的平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)