用于防止 LCD 屏幕上出现“烧屏”问题的 Javascript答案

【问题标题】：Javascript for preventing "burn-in" problem on lcd screen用于防止 LCD 屏幕上出现“烧屏”问题的 Javascript
【发布时间】：2014-09-17 10:54:18
【问题描述】：

我正在构建一个将用作信息监视器的非公共网络应用程序。因此，它将在一台液晶电视显示器上 24/7 全天候运行。

由于这可能会在 LCD 上产生“烧色”错误，因此我正在寻找能够防止/减少此问题的 Javascript。我想使用类似于他们在机场显示器上使用的东西（一条线周期性地从左到右、从上到下移动并切换颜色）。

你知道任何 Javascript 这样做吗？谢谢！

【问题讨论】：

可以吗？我以为这种问题仅限于 CRT 显示器。
这不是 LCD 的大问题，只是 CRT 和等离子显示器。见compreviews.about.com/od/monitors/a/LCDBurnIn.htm。 @Andreas 等离子同样糟糕 :)
我只能梦想一个更好的解决方案来解决我的“问题”:) tnx 伙计们

标签： javascript lcd

【解决方案1】：

如果您仍然感兴趣：（使用 jQuery）

var $burnGuard = $('<div>').attr('id','burnGuard').css({
    'background-color':'#FF00FF',
    'width':'1px',
    'height':$(document).height()+'px',
    'position':'absolute',
    'top':'0px',
    'left':'0px',
    'display':'none'
}).appendTo('body');

var colors = ['#FF0000','#00FF00','#0000FF'], color = 0, delay = 5000, scrollDelay = 1000;
function burnGuardAnimate()
{
    color = ++color % 3;
    var rColor = colors[color];
    $burnGuard.css({
        'left':'0px',
        'background-color':rColor,
    }).show().animate({
        'left':$(window).width()+'px'
    },scrollDelay,function(){
        $(this).hide();
    });
    setTimeout(burnGuardAnimate,delay);
}
setTimeout(burnGuardAnimate,delay);

在这里找到工作示例：http://www.jsfiddle.net/bradchristie/4w2K3/3/（或full screen version）

【讨论】：

或者我应该解释一下新电视在颜色列表中的橙色/黄色是什么？ ;-p（使用Primary，因为这应该足以刷新像素）。
这个栏应该多久在屏幕上徘徊一次？每秒一次？这种技术背后有什么科学依据吗？
TBH，甚至不确定在这个时代是否有必要。简单地写了它，因为它是被请求的。也就是说，可能值得做一些研究，看看是否有最佳设置。据我了解，这更多是为了避免 CRT 退化。现在一切都是 lcd，不确定它是否适用（led 不会有残余发光）。
刚刚使用它为我们的 Dashing / Smashing 实例添加了一些老化保护（避免？）。我必须手动创建 DIV，并将它的 z-index 设置为一个很大的数字才能让它合作，但它现在工作得很好。感谢分享！

【解决方案2】：

我使用了 Brad 的脚本，但不幸的是我的页面有一个很大的 HTMl 表，它延伸到父容器之外。这使得像素条只能穿过屏幕的一部分。我没有改变我的表格，而是添加了一个边界框脚本来查找 html 表格的实际宽度，然后用它来设置 Brad 脚本中的宽度。

var div = document.getElementById ("HtmlTable-ID");

        if (div.getBoundingClientRect) {       
            var rect = div.getBoundingClientRect ();

            w = rect.right - rect.left;

           // alert ("  Width: " + w );
        }

var $burnGuard = $('<div>').attr('id','burnGuard').css({
    'background-color':'#FF00FF',
    'width':'1px',
    'height':$(document).height()+'px',
    'position':'absolute',
    'top':'0px',
    'left':'0px',
    'display':'none'
}).appendTo('body');

var colors = ['#FF0000','#00FF00','#0000FF'], color = 0, delay = 5000, scrollDelay = 1000;
function burnGuardAnimate()
{
    color = ++color % 3;
    var rColor = colors[color];
    $burnGuard.css({
        'left':'0px',
        'background-color':rColor,
    }).show().animate({
        'left': w +'px'
    },scrollDelay,function(){
        $(this).hide();
    });
    setTimeout(burnGuardAnimate,delay);
}
setTimeout(burnGuardAnimate,delay);

【讨论】：