如何用javascript读取.txt文件

How to read .txt file with javascript?

本文关键字：txt 文件 读取 javascript 何用      更新时间：2023-09-26

My.txt文件如下所示：

Peter
Joe
Anna
Bob

我有这个代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
	<head>
		<title>Webdesign-Podcast.de - Auslosung</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!-- jQuery einbinden -->
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
		/* Wenn der Body geladen ist werden die enthaltenen Funktionen ausgeführt.
		$(document).ready(function(){ ... }); Alle in dieser enthaltenen Funktionen werden entsprechd erst bei geladenem Body ausgeführt */
		$(document).ready(function(){
			/* Der Button mit der id #auslosungstarten wird mit einer click Funktion belegt. */
			$('#auslosungstarten').click(function(){
				/* Der Button selbst wird ausgeblendet */
				$(this).hide('slow');
 
				/* Ein Interval wird gestartet und die Funktion auslosung() alle 300 Milisekunden ausgeführt */
				intVal = window.setInterval("auslosung()", 300);
				/* Nach 30 Sekunden wird der Gewinner gezogen */
				window.setTimeout("winneris()", 30000);
				/* return false verhindert, dass der href des Links aufgerufen wird */
				return false;
			});
 
			auslosung = function(){
				/* member enthält die Anzahl der Teilnehmer der Verlosung */
				member = $('.member li').length;
				/* 
				Math.random() generiert eine Zufallszahl.
				Diese mit den Teilnehmern multipliziert ergebit den index Wert eines der Teilnehmer.
				 */
				randNum = Math.floor(Math.random()*member);
				/* Die CSS Klasse "win" wird von allen li's entfernt und ... */
				$('.member li').removeClass('win');
				/* ... für den durch die Zufallszahl gewählten Teilnehmer neu gesetzt */
				$('.member li:eq('+randNum+')').addClass('win');
 
				/* Diese Funktion wiederholt sich alle 300 Milisekunden.
				Dadurch entsteht das Muster, dass immer ein anderer Teilnehmer markiert wird.
				*/
			}
 
			winneris = function(){
				/* Nachdem 30 Sekunden lang zufällige Teilnehmer markiert wurden, wird der Intervall nun beendet */
				clearInterval(intVal);
				/* Der zuletzt markierte Teilnehmer wird nun als Gewinner gezogen */
				winner = $('.member li.win').html();
				/* Der Gewinner wird in der #andthewinneris ausgegeben. */
				$('#andthewinneris').html('Gewonnen hat: <strong>'+winner+'<'/strong>');
			}
		});
		</script>
		<style type="text/css">
		/* Das ist der CSS Code zum Verlosungs-System und bedarf meiner Meinung nach keiner weiteren Erklärung */
		*{outline:none;padding:0px;margin:0px;}
		body{padding:40px;font:14px "Myriad Pro";color:#333;}
		
		h1{margin-bottom:20px;font-size:26px;font-weight:normal;}
 
		.member{list-style:none;width: 100%;}
		.member li{padding:10px;width:160px;background:#efefef;border:1px solid #ddd;margin:0 10px 10px 0;float:left;text-align:center;}
		.member li.win{background:#fff9d7;border:1px solid #e2c822;}
		
		#auslosungstarten{padding:10px;width:160px;background:#f24f04;border:1px solid #c13d00;margin:0 10px 10px 0;float:left;text-align:center;font-weight:bold;text-decoration:none;display:block;color:#fff;margin-top:40px;}
		#andthewinneris{margin-top:40px;font-size:26px;font-weight:normal;color: #f24f04;}
		</style>
	</head>
	<body>
		<h1>Webdesign-Podcast.de Aulosungs-System</h1>
		<!-- Dashier ist die Liste der Teilnehmer von der Verlosung -->
		<ul class="member">
			<li>Name 1</li>
			<li>Name 2</li>
			<li>Name 3</li>
			<li>Name 4</li>
		</ul><br clear="all" />
		<!-- Button zum starten der Verlosung -->
		<a href="#" id="auslosungstarten">Auslosung starten...</a>
		<!-- Ausgabe des Gewinners: -->
		<h1 id="andthewinneris"></h1>
	</body>
</html>

有人能解释/告诉我如何使用.txt文件作为"名称1"名称2"的一部分吗。。。"名称n"？

谢谢你的帮助，我只是努力学习；）

您必须首先使用jquery打开文本文件，并将数据存储在字符串中。然后你创建一个逐行存储的数组，这样你就可以在你想要的地方使用它们

$(document).ready(function() {
$("#button").click(function()
{
     var rawFile = new XMLHttpRequest();
   //Here you are opening your text file
    rawFile.open("GET", "YourTextFile.txt", false);
   ///This is testing if there is no error
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
             //Now you are storing the text
                var allText = rawFile.responseText;
             //Here you are storing every line of text in an Array
                var lines = allText.split("'n");
             /// Now to use any of this names, You use lines[i]
             //// Your code
             }
         }
      }
相关文章：