当前位置:  开发笔记 > 编程语言 > 正文

如何在Javascript循环中重新绘制HTML元素?

如何解决《如何在Javascript循环中重新绘制HTML元素?》经验,为你挑选了1个好方法。

我有一些Javascript"动画"HTML元素的颜色变化,如下所示:

var element = document.getElementById("someid");
while (i < 255) {
    element.style.color = 'rgb(' + i + ',' + i + ',' + i + ')';
    i++;
    slowMeDown(); // This function runs for a few ms to slow the process down
}

正如您所看到的,这会将颜色从黑色更改为白色,通过其间的255个灰色阴影.我想让它明显"淡化",以便用户可以看到文字逐渐消失.

但是,浏览器(Chrome和IE - 尚未在Firefox上测试)仅在功能结束时刷新,因此颜色从黑色变为白色.有没有人知道如何在循环中重新浏览浏览器,以便我可以看到文本淡出?



1> Sean Bright..:
function changeColor()
{
    changeColorIncremental(0);
}

function changeColorIncremental(i)
{
    var element = document.getElementById("someid");

    element.style.color = 'rgb(' + i + ',' + i + ',' + i + ')';

    if (i < 255) {
        // Note the 50 millisecond wait below.  Decrease this to speed up
        // the transition, and increase it to slow it down.
        setTimeout('changeColorIncremental(' + (i + 1) + ')', 50);
    }
}

推荐阅读
mobiledu2402851203
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有