2

我是 JavaScript 的初学者，并尝试根据这个Workshop: Displaying a Scrolling Message做简单的核心示例。

但是这个变体滚动消息不起作用。我不明白为什么会这样。我的网络浏览器Google Chrome，编码ANSI。

代码：

<html>
    <head><title>Scrolling Message Example</title>
        <script>
            msg = "This is an example of a scrolling message. Isn't it exciting?";
            msg = "...          ..." + msg;
            pos = 0;

            function ScrollMessage() {
               window.status = msg.substring(pos, msg.length) + msg.substring(0, pos);
               pos++;
               if (pos > msg.length) pos = 0;
               window.setTimeout("ScrollMessage()", 200);
            }

            ScrollMessage();
    </script>
        </head>
        <body>
            <h1>Scrolling Message Example</h1>
            Look at the status line at the bottom of this page. (Don't
            watch it too long, as it may be hypnotic.)
        </body>
</html>

问题：

  • 如何解决这个麻烦？
  • 哪些其他变体更适合用于此目标？
4

3 回答 3

1

请参阅有关JavaScript window.status的这篇文章

显然，出于安全原因，大多数浏览器默认禁用 window.status。

我认为这个练习是关于滚动效果的，而不是关于状态栏的。

如果你更换这个

window.status = msg.substring(pos, msg.length) + msg.substring(0, pos);

和

console.log(msg.substring(pos, msg.length) + msg.substring(0, pos));

您将在控制台中看到创建滚动效果本身的功能运行良好。

如果要显示滚动消息，只需<div>在页面中创建一个要显示消息的位置，并在每次调用滚动函数时更新 div 的内容。

我修改了你的例子：

<html>
    <head><title>Scrolling Message Example</title>
        <script>
            var msg = "This is an example of a scrolling message. Isn't it exciting?";
            msg = "...          ..." + msg;
            var pos = 0;

            function ScrollMessage() {
                document.getElementById("scrollMsgContainer").innerHTML = msg.substring(pos, msg.length) + msg.substring(0, pos);
                pos++;
                if (pos > msg.length) pos = 0;
                window.setTimeout(ScrollMessage, 200);
            }
        </script>
    </head>
    <body>
        <h1>Scrolling Message Example</h1>
        Look at the status line at the bottom of this page. (Don't
        watch it too long, as it may be hypnotic.)

        <div id="scrollMsgContainer" style="position: fixed; bottom: 0; width: 100%; background-color: #DDDDDD">&nbsp;</div>
    </body>
    <script>
        ScrollMessage();
    </script>
</html>
于 2013-04-05T14:03:20.570 回答
0

你为什么不document.title改用：

function ScrollMessage() {
               document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
               pos++;
               if (pos > msg.length) pos = 0;
               window.setTimeout("ScrollMessage()", 200);
            }

除了 IE <= 7; 之外的所有浏览器都支持它

于 2013-04-05T14:18:14.420 回答
0

检查MDN window.status参考。Google Chrome 没有状态栏，Mozilla Firefox 默认阻止状态栏更改。

您可以尝试 HTML 中的Sticky Footer并设置它的内容。

希望有帮助..

于 2013-04-05T14:22:37.790 回答