在html中读取本地txt并显示出来

要做一个网页，里面有音乐跟歌词。歌词要求是从txt里读取进去的。

我在显示歌词的地方建了div：

div#content3 { -moz-opacity: 0.6;opacity: 0.6; filter: alpha(opacity=30);background: #FFF;width:540px; float:left;}

<div id="content3">

歌词

</div>

不知道怎么把txt里面的歌词读进去并显示出来
求各位大神支招QAQ

15 个解决方案

#1

jQuery:

try this Code



$(function(){

  $.Load("abc.txt")

})

#2

引用 1 楼 zhoukang0916 的回复:

jQuery:

try this Code



$(function(){

  $.Load("abc.txt")

})

要怎么把这个用在div中【两天前才刚从最简单的html学起请原谅我QAQ

#3

<html>
<head>
<title></title>
<script type="text/javascript">
function initEvent(){
var divcontents=document.getElementById("content3");
vat txt=document.getElementById("textbox");
divcontents.innerText=txt.value;
}
</script>
</head>
<body onload="initEvent()">
<div id="content3">
</div>
<input type="text" id="textbox" />
</body>
</html>

我不懂如何直接从txt中读取，但是如果你刚开始学习，可以尝试这段代码，是从文本框中读取歌词的。

#4

#5

引用 4 楼 zeng_chong2003 的回复:

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>

</script>

加进去就OK了

我今天回学校了所以一直在坐车现在才看到QAQ。
加进去没有任何变化啊，，歌词还是没有显示出来

#6

直接把全部的代码贴出来了。。不知道为什么就是读不了txt

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

div#container{height:150px; width:1480px}


div#left1 {width:300px;height:750px;  float:left;}

div#content1 { width:300px;height:750px; float:left;}

div#content2 { width:680px;height:150px;  float:left;}

div#content3 { -moz-opacity: 0.6;opacity: 0.6; filter: alpha(opacity=30);background: #FFF;width:540px; float:left;}

div#right1 {width:300px; height:750px; float:left;}


h1 {margin-bottom:0;}

h2 {margin-bottom:0; font-size:14px;}

ul {margin:0;}

li {list-style:none;}

.STYLE2 {

	color: #D4D4D4;

	font-family: "Courier New", Courier, monospace;

	font-weight: bold;

}

.STYLE3 {color: #AAAAAA; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }

.STYLE5 {

	color: #FFFFFF;

	font-family: "Courier New", Courier, monospace;

	font-weight: bold;

}

#content3 .STYLE5 strong {

	color: #000;

}

</style>





</head>



<body background="../image/background.jpg" bgproperties="fixed" >



<div id="container">

<h1 align="center" class="STYLE3"><br><br><br>JJR's Music</h1></div>



<div id="left1"><br><br><br><br><br><br><br><br><br><br>

  <div align="center"><p><a href="../homew.html"><img style="border:0px" src="../image/back.png "width="100" height="80" align="middle" /><span class="STYLE5">Back</span></a></p>

</div>

</div>


<div id="content1">

  <div align="center">

    <p><br><br><br><br><br><br><br><br>

      <img style="border:8px #EEEEEE solid;" src="001.png "width="160" height="160"  /></p>

  </div>

</div>


<div id="content2">

  <div align="left"><br><br><br>

    <audio src="001.mp3" controls></audio><br>

  </div>

</div>




<div id="right1"></div>




</body>


</html>

目前的网页效果是这样的
在html中读取本地txt并显示出来

想要在播放器下面的content3放歌词。。。

#7

你要把geci.txt放到根目录里啊

#8

引用 6 楼 u012416395 的回复:

直接把全部的代码贴出来了。。不知道为什么就是读不了txt

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

div#container{height:150px; width:1480px}


div#left1 {width:300px;height:750px;  float:left;}

div#content1 { width:300px;height:750px; float:left;}

div#content2 { width:680px;height:150px;  float:left;}

div#content3 { -moz-opacity: 0.6;opacity: 0.6; filter: alpha(opacity=30);background: #FFF;width:540px; float:left;}

div#right1 {width:300px; height:750px; float:left;}


h1 {margin-bottom:0;}

h2 {margin-bottom:0; font-size:14px;}

ul {margin:0;}

li {list-style:none;}

.STYLE2 {

	color: #D4D4D4;

	font-family: "Courier New", Courier, monospace;

	font-weight: bold;

}

.STYLE3 {color: #AAAAAA; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }

.STYLE5 {

	color: #FFFFFF;

	font-family: "Courier New", Courier, monospace;

	font-weight: bold;

}

#content3 .STYLE5 strong {

	color: #000;

}

</style>





</head>



<body background="../image/background.jpg" bgproperties="fixed" >



<div id="container">

<h1 align="center" class="STYLE3"><br><br><br>JJR's Music</h1></div>



<div id="left1"><br><br><br><br><br><br><br><br><br><br>

  <div align="center"><p><a href="../homew.html"><img style="border:0px" src="../image/back.png "width="100" height="80" align="middle" /><span class="STYLE5">Back</span></a></p>

</div>

</div>


<div id="content1">

  <div align="center">

    <p><br><br><br><br><br><br><br><br>

      <img style="border:8px #EEEEEE solid;" src="001.png "width="160" height="160"  /></p>

  </div>

</div>


<div id="content2">

  <div align="left"><br><br><br>

    <audio src="001.mp3" controls></audio><br>

  </div>

</div>




<div id="right1"></div>




</body>


</html>

目前的网页效果是这样的
在html中读取本地txt并显示出来

想要在播放器下面的content3放歌词。。。

说好的CONTENT3的div呢？？？

#9

我测试了，没有问题。不行你把文件打包上来。

#10

引用 9 楼 zeng_chong2003 的回复:

我测试了，没有问题。不行你把文件打包上来。

我放在百度云了，html在Gothic文件夹。。大侠拜托了T^T

http://pan.baidu.com/s/1qWM7Dec

#11

引用 9 楼 zeng_chong2003 的回复:

我测试了，没有问题。不行你把文件打包上来。

之前试了jquery不知道怎么了没有显示出来，所以我发的这个是什么都没插进去的版本

#12

给个邮箱，我发给你。

#13

引用 12 楼 zeng_chong2003 的回复:

给个邮箱，我发给你。

私信你啦~

#14

http://pan.baidu.com/s/1gdgS60j

#15

行了，你去网盘下载。 http://pan.baidu.com/s/1gdgS60j

#1

jQuery:

try this Code



$(function(){

  $.Load("abc.txt")

})

#2

引用 1 楼 zhoukang0916 的回复:

jQuery:

try this Code



$(function(){

  $.Load("abc.txt")

})

要怎么把这个用在div中【两天前才刚从最简单的html学起请原谅我QAQ

#3

#4

#5

引用 4 楼 zeng_chong2003 的回复:

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>

</script>

加进去就OK了

我今天回学校了所以一直在坐车现在才看到QAQ。
加进去没有任何变化啊，，歌词还是没有显示出来

#6

直接把全部的代码贴出来了。。不知道为什么就是读不了txt

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

div#container{height:150px; width:1480px}


div#left1 {width:300px;height:750px;  float:left;}

div#content1 { width:300px;height:750px; float:left;}

div#content2 { width:680px;height:150px;  float:left;}

div#content3 { -moz-opacity: 0.6;opacity: 0.6; filter: alpha(opacity=30);background: #FFF;width:540px; float:left;}

div#right1 {width:300px; height:750px; float:left;}


h1 {margin-bottom:0;}

h2 {margin-bottom:0; font-size:14px;}

ul {margin:0;}

li {list-style:none;}

.STYLE2 {

	color: #D4D4D4;

	font-family: "Courier New", Courier, monospace;

	font-weight: bold;

}

.STYLE3 {color: #AAAAAA; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }

.STYLE5 {

	color: #FFFFFF;

	font-family: "Courier New", Courier, monospace;

	font-weight: bold;

}

#content3 .STYLE5 strong {

	color: #000;

}

</style>





</head>



<body background="../image/background.jpg" bgproperties="fixed" >



<div id="container">

<h1 align="center" class="STYLE3"><br><br><br>JJR's Music</h1></div>



<div id="left1"><br><br><br><br><br><br><br><br><br><br>

  <div align="center"><p><a href="../homew.html"><img style="border:0px" src="../image/back.png "width="100" height="80" align="middle" /><span class="STYLE5">Back</span></a></p>

</div>

</div>


<div id="content1">

  <div align="center">

    <p><br><br><br><br><br><br><br><br>

      <img style="border:8px #EEEEEE solid;" src="001.png "width="160" height="160"  /></p>

  </div>

</div>


<div id="content2">

  <div align="left"><br><br><br>

    <audio src="001.mp3" controls></audio><br>

  </div>

</div>




<div id="right1"></div>




</body>


</html>

目前的网页效果是这样的
在html中读取本地txt并显示出来

想要在播放器下面的content3放歌词。。。

#7

你要把geci.txt放到根目录里啊

#8

引用 6 楼 u012416395 的回复:

直接把全部的代码贴出来了。。不知道为什么就是读不了txt

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

div#container{height:150px; width:1480px}


div#left1 {width:300px;height:750px;  float:left;}

div#content1 { width:300px;height:750px; float:left;}

div#content2 { width:680px;height:150px;  float:left;}

div#content3 { -moz-opacity: 0.6;opacity: 0.6; filter: alpha(opacity=30);background: #FFF;width:540px; float:left;}

div#right1 {width:300px; height:750px; float:left;}


h1 {margin-bottom:0;}

h2 {margin-bottom:0; font-size:14px;}

ul {margin:0;}

li {list-style:none;}

.STYLE2 {

	color: #D4D4D4;

	font-family: "Courier New", Courier, monospace;

	font-weight: bold;

}

.STYLE3 {color: #AAAAAA; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }

.STYLE5 {

	color: #FFFFFF;

	font-family: "Courier New", Courier, monospace;

	font-weight: bold;

}

#content3 .STYLE5 strong {

	color: #000;

}

</style>





</head>



<body background="../image/background.jpg" bgproperties="fixed" >



<div id="container">

<h1 align="center" class="STYLE3"><br><br><br>JJR's Music</h1></div>



<div id="left1"><br><br><br><br><br><br><br><br><br><br>

  <div align="center"><p><a href="../homew.html"><img style="border:0px" src="../image/back.png "width="100" height="80" align="middle" /><span class="STYLE5">Back</span></a></p>

</div>

</div>


<div id="content1">

  <div align="center">

    <p><br><br><br><br><br><br><br><br>

      <img style="border:8px #EEEEEE solid;" src="001.png "width="160" height="160"  /></p>

  </div>

</div>


<div id="content2">

  <div align="left"><br><br><br>

    <audio src="001.mp3" controls></audio><br>

  </div>

</div>




<div id="right1"></div>




</body>


</html>

目前的网页效果是这样的
在html中读取本地txt并显示出来

想要在播放器下面的content3放歌词。。。

说好的CONTENT3的div呢？？？

#9

我测试了，没有问题。不行你把文件打包上来。

#10

引用 9 楼 zeng_chong2003 的回复:

我测试了，没有问题。不行你把文件打包上来。

我放在百度云了，html在Gothic文件夹。。大侠拜托了T^T

http://pan.baidu.com/s/1qWM7Dec

#11

引用 9 楼 zeng_chong2003 的回复:

我测试了，没有问题。不行你把文件打包上来。

之前试了jquery不知道怎么了没有显示出来，所以我发的这个是什么都没插进去的版本

#12

给个邮箱，我发给你。

#13

引用 12 楼 zeng_chong2003 的回复:

给个邮箱，我发给你。

私信你啦~

#14

http://pan.baidu.com/s/1gdgS60j

#15

行了，你去网盘下载。 http://pan.baidu.com/s/1gdgS60j

秒客网

在html中读取本地txt并显示出来

15 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

相关文章