Question

我是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>

问题：

怎么解决这个麻烦？
哪种其他变体可以更好地用于此目标？

Answer 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>

Answer 2

为什么不使用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＆lt; = 7;

之外，所有浏览器都支持它

Answer 3

检查MDN window.status参考。谷歌浏览器没有状态栏，默认情况下Mozilla Firefox会阻止状态栏更改。

您可以在HTML中尝试Sticky Footer并设置其内容。

希望有所帮助......

显示滚动消息 - 不起作用

3 个答案: