Question

我正在尝试从txt文件中获取ElementById并将其传递到字幕框。我需要一个javascript函数吗？

而且，我无法使用white-space: nowrap。到目前为止，这是我整理的内容。 javascript函数的功劳归功于Sid function readTextFile

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);
        }

@-webkit-keyframes scroll {
	0% {
			-webkit-transform: translate(0 ,0);
		}	
		100%{
				-webkit-transform: translate(-100%, 0);
		}
}

.marquee {
	display:block;
	width:100%
	white-space: nowrap;
	overflow:hidden;
}

.marquee span {
	display:inline-block;
	padding-left:100%;
	-webkit-animation:scroll 15s infinite linear;

<!DOCTYPE html>
<html lang='en'>
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	
		<link rel="stylesheet" href="main.CSS" type="text/CSS">
	</head>
	<body>
		<h1 class="marquee"><span><a href= readTextFile(&quot;file:///:/Users/justair07/Documents/cssmarquee/Message.txt&quot;)"> Test </a>.</span></h1>
	</body>
</html>

非常感谢您的帮助。我是html，javascript和css的新手，但我很高兴学习。

谢谢！

Answer 1

您需要获取span元素并替换其内容（为简单起见，我在span元素中添加了id属性：比较摘要中的前两行-注释较短）。

<a>应该应用于span元素。

删除该readTextFile元素，然后在js代码段中调用您的alert(allText)。将document.getElementsByClassName("marquee")[0].children[0].innerHTML = allText替换为//document.getElementById("mytext").innerHTML = "some test" document.getElementsByClassName("marquee")[0].children[0].innerHTML = "some test" setTimeout(function(){ document.getElementById("mytext").innerHTML = "bla bla bla" }, 7000)（或更简单）
下面的演示显示了如何替换字符串：

@-webkit-keyframes scroll {
	0% {
			-webkit-transform: translate(0 ,0);
		}	
		100%{
				-webkit-transform: translate(-100%, 0);
		}
}

.marquee {
	display:block;
	width:100%
	white-space: nowrap;
	overflow:hidden;
}

.marquee span {
	display:inline-block;
	padding-left:100%;
  white-space: nowrap;
	-webkit-animation:scroll 15s infinite linear;

<!DOCTYPE html>
<html lang='en'>
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	
		<link rel="stylesheet" href="main.CSS" type="text/CSS">
	</head>
	<body>
		<h1 class="marquee"><span id="mytext">Need Text File String Here</span></h1>
	</body>
</html>

{{1}}

txt文件中的getElementById

1 个答案: