具有多个文本文件输入的滚动字幕

问题描述 投票：0回答：1

我一直在尝试使用JavaScript构建滚动字幕，以将其添加到突出显示最新关注者，订阅者等的游戏流中。我正在使用StreamLabels来捕获最新内容的游戏标记并将数据放入文本中每个文件都有标签。要开始构建它，我首先必须确保可以有一个脚本，该脚本可以拉文本并在网页上打印文件数据。但是，我找到的每个Javascript代码都不会在屏幕上输出数据。

我第一次尝试（How to read a local text file?）：

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

并将readTextFile("follower.txt");添加到网页代码中。执行后，该页面对于Chrome，IE和Edge完全空白。

下一个我尝试过（How do I load the contents of a text file into a javascript variable?）：

var client = new XMLHttpRequest();
client.open('GET', '/follower.txt');
client.onreadystatechange = function() {
  alert(client.responseText);
}
client.send();

以及在注释中找到的更新的2019年代码：

fetch('follower.txt')
  .then(response => response.text())
  .then((data) => {
    console.log(data)
  })

每个都与第一个相同：以空白屏幕结尾。

最后，我放弃了使用Javascript读取文本的内容，开始查看<marquee>，据我所知，这是一种过时且过时的方法。 code I found结合了一些用于滚动的Javascript和HTML / CSS来控制文本。我还包括一个<object>将文本文件拖入代码中。我完成的是：

<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script>
  $(function(){
    $('.marquee').marquee({
      allowCss3Support: true,
      css3easing: 'linear',
      easing: 'linear',
      delayBeforeStart: 1000,
      direction: 'left',
      duplicated: true,
      duration: 25000,
      gap: 20,
      pauseOnCycle: false,
      pauseOnHover: false,
      startVisible: false
    });
  });
</script>
<style type="text/css"> 
  .marquee span { 
    margin-right: 100%;
    height: 30px;
    } 
  .marquee p { 
    white-space:nowrap;
    margin-right: 1000px; 
    } 
</style>
</head>

<body>
<div class="marquee" height=20px>
<p>Recent follower: <object type="text/html" data="follower.txt"></object> // Recent donation: <object type="text/html" data="follower.txt"></object><p>
</div>
</body>
</html>

现在此代码有效，但是<object>正在做一些奇怪的事情，并且有间隔，并且直到第二个对象显示在屏幕上时才随机可见。另外，Recent follower:文本和<object>之间在垂直方向上至少有40个像素间隔，与文本数据相比，文本的文本空间非常小（请参见下图）marquee。

我知道上述代码的执行方式有问题，因此，我们将不胜感激。我的假设是使用<object>可能是间距问题的根本原因。我还计划尝试进行文本转换以添加到其中，但是没有任何可用的功能，不确定如何进行。

javascript html css object marquee
1个回答
0
投票

因此，在过去约24小时内使用了相当多的代码并进行了更多研究之后，似乎可以使用JavaScript在本地环境（例如C:\驱动器或本地html）中读取文本文件。 ，Java代码/脚本和文本文档）无效。问题是多方面的：

 - XMLHttpRequest at 'file:///path/file.txt' from origin 'null' has been blocked by CORS policy
 - GET file:///path/file.txt net::ERR_FAILED
 - Uncaught DOMException: Failed to execute 'send' on ...

我尝试安装扩展程序以禁用CORS（甚至从本地文件中禁用），但是它不起作用，并继续出错。在所有三种代码类型上生成的GET file和DOMException错误。

[今天，我尝试使用几个实用程序，包括java.util.scanner。不幸的是，相同的CORS错误继续产生。因此看来，除非您打算在网络服务器之外运行Javascript读取文本脚本，否则那里没有太大希望。

幸运的是，Javascript marquee有效，但是我必须做一些工作来纠正<object>的间距问题，或者找出使用<object>的替代解决方案。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.