屏幕烧伤预防javascript程序[重复]答案

【问题标题】：Screen burn prevention javascript program [duplicate]屏幕烧伤预防javascript程序[重复]
【发布时间】：2015-09-12 03:05:19
【问题描述】：

我正在创建一个信息亭来显示生产信息。屏幕会一直亮着。虽然大表中包含的信息会定期刷新，但我想定期通过屏幕传递一条线以减少烧屏效果。我找到了这段代码，这正是我想做的，但我无法让它工作：

JSFiddle

我创建了一个非常简单的 html 页面。当我检查开发者控制台时，我收到以下错误： ReferenceError: $ 未定义。

我是 JavaScript 新手，我一直在尝试弄清楚如何将代码合并到我的页面中。

var $burnGuard = $('<div>').attr('id','burnGuard').css({

对于上面的这段代码，我是否必须指定“div”或在我的页面中创建一个 div 并提供一个 id？该页面是否还必须包含指向 jQuery 的链接？任何帮助将不胜感激。

【问题讨论】：

它使用了一个叫做“jQuery”的东西。您必须在 HTML 之上包含 jQuery 库才能使其正常工作。
jquery 是一个 javascript 库...您的代码需要它才能正常工作，因为代码使用了来自 jquery 库的东西...

标签： javascript html

【解决方案1】：

正如您在提供的小提琴中所见，jQuery 已包含在内。您需要在文件中包含 jQuery 才能使用它。

jQuery 附加到 $ 符号上，所以这就是您的错误的来源。

【讨论】：

【解决方案2】：

您缺少对 jquery 的引用。这是您需要的代码。也只是告诉你，你总是可以在 jsfiddle url 的末尾添加一个 /show，然后右键单击选择 View Frame source 以查看结果背后的代码！

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by bradchristie</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>



  <style type='text/css'>


  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
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);

});//]]>  

</script>


</head>
<body>



</body>


</html>

【讨论】：

非常感谢。那成功了。我将 'left':$(window).width()+'px' 修改为 'left':$(window).width()-(width of bar)+'px' 这样屏幕就不会跳转刷新。我选择了一个 5px 的条，它运行良好。我的屏幕谢谢你。