Hbuilderx里正确读取了
然而当我压缩到一起后
没有读取到novel.txt里的文本,但是img文件夹的背景图片可以正常读取
还有就是music里的音乐效果也没了,但是原本压缩前是有音乐的
是什么导致了压缩后music中.mp3和novel.txt不能正确读取呢
补充novel.html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小说网站</title>
<style>
/* Reset styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Background styles */
html,
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #ad8d41;
}
/* Navigation styles */
.nav-container {
width: 100%;
height: 70px;
background-color: #550000;
position: relative;
margin: 0 auto;
}
/* Reset styles for anchor tags */
a {
color: #55ff00;
}
/* Navigation list styles */
.main-nav > li {
position: relative;
float: left;
list-style-type: none;
height: 70px;
line-height: 70px;
padding: 0 30px;
color: #FFFFFF;
position: relative;
cursor: pointer;
font-size: 20px;
font-weight: bold;
}
/* Hover styles */
.main-nav > li:hover {
background-color: #6c6e0a;
}
/* Sub-navigation container styles */
.sub-nav {
position: absolute;
left: 0;
top: 70px;
background-color: #550000;
display: none;
min-width: 100%;
list-style: none;
}
/* Sub-navigation list item styles */
.sub-nav > li {
position: relative;
background-color: #00557f;
color: #FFFFFF;
padding: 10px;
text-align: center;
height: 45px;
cursor: pointer;
}
/* Sub-navigation hover styles */
.sub-nav > li:hover {
background-color: #fbd7b3;
background-image: url(img/arrow.gif);
background-repeat: no-repeat;
}
/* Show sub-navigation on parent element hover */
.main-nav > li:hover .sub-nav {
display: block;
}
/* Novel content container styles */
.content-container {
margin-top: 20px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border-radius: 5px;
overflow: hidden;
padding: 20px;
}
/* Novel content styles */
.novel-content {
font-size: 20px;
line-height: 1.5;
color: #333;
font-weight: bold;
font-family: "宋体";
}
/* Font size and color adjustment buttons styles */
.adjustment-buttons {
margin-bottom: 20px;
text-align: center;
}
.adjustment-buttons button {
margin-right: 10px;
}
</style>
</head>
<body>
<!-- Navigation -->
<div class="nav-container">
<ul class="main-nav">
<li><a href="index.html">主页</a></li>
<li><a href="game.html">怀旧游戏</a>
<ul class="sub-nav">
<li>魔域</li>
<li>QQ宠物</li>
<li>天书奇谈</li>
<li>极光世界</li>
</ul>
</li>
<li><a href="novel.html">网络小说</a></li>
<li>唯美纯音</li>
<li>经典好书</li>
<li>爱是什么</li>
<li><a href="test.html">进击大厂</a></li>
</ul>
</div>
<!-- Novel content -->
<div class="content-container">
<div class="adjustment-buttons">
<button id="decrease-font-size">A-</button>
<button id="increase-font-size">A+</button>
<button id="change-font-color">改变字体颜色</button>
<button id="change-bg-color">改变背景颜色</button>
<button id="font-sim">宋体</button>
<button id="font-kai">楷体</button>
</div>
<div class="novel-content"></div>
</div>
<!-- JavaScript -->
<script>
let novelContent = document.querySelector('.novel-content');
let increaseFontSizeBtn = document.querySelector('#increase-font-size');
let decreaseFontSizeBtn = document.querySelector('#decrease-font-size');
let changeFontColorBtn = document.querySelector('#change-font-color');
let changeBgColorBtn = document.querySelector('#change-bg-color');
let fontSimBtn = document.querySelector('#font-sim');
let fontKaiBtn = document.querySelector('#font-kai');
// Read the novel content from file
fetch('novel.txt')
.then(response => response.text())
.then(data => {
novelContent.innerHTML = data;
});
// Increase font size
increaseFontSizeBtn.addEventListener('click', function () {
let currentSize = parseInt(novelContent.style.fontSize) || 20;
currentSize += 2;
novelContent.style.fontSize = `${currentSize}px`;
});
// Decrease font size
decreaseFontSizeBtn.addEventListener('click', function () {
let currentSize = parseInt(novelContent.style.fontSize) || 20;
if (currentSize > 2) {
currentSize -= 2;
novelContent.style.fontSize = `${currentSize}px`;
}
});
// Change font color
changeFontColorBtn.addEventListener('click', function () {
let currentColor = getComputedStyle(novelContent).color;
let newColor = currentColor === 'rgb(255, 0, 0)' ? '#000' : 'rgb(255, 0, 0)';
novelContent.style.color = newColor;
});
// Change background color
changeBgColorBtn.addEventListener('click', function () {
let currentColor = getComputedStyle(document.body).backgroundColor;
let newColor = currentColor === 'rgb(173, 141, 65)' ? '#fff' : 'rgb(173, 141, 65)';
document.body.style.backgroundColor = newColor;
});
// Switch to SimSun font
fontSimBtn.addEventListener('click', function () {
novelContent.style.fontFamily = "SimSun";
});
// Switch to KaiTi font
fontKaiBtn.addEventListener('click', function () {
novelContent.style.fontFamily = "KaiTi";
});
</script>
</body>
</html>
补充index.html源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>主页</title>
<style>
/* 定义CSS样式 */
/*页面主题背景图片*/
body {
background-image: url(img/bg.png);
background-size: cover;
background-repeat: no-repeat;
}
* {
margin: 0px; /* 去除外边距 */
padding: 0px; /* 去除内边距 */
}
.container {
width: 100%;
height: 70px;
background-color: #550000;
position: fixed; /* 导航栏固定在页面顶部 */
z-index: 1; /* 设置导航栏层级为最高 */
}
/*CSS伪类: 取消链接文本的默认渲染成蓝色, 并改成绿色*/
a {
color: #55ff00;
/*text-decoration: none; /*去掉下划线*/
}
.firseNav > li {
float: left; /* 列表左浮动，实现水平排列 */
list-style-type: none; /* 去除列表项默认圆点标记 */
height: 70px;
line-height: 70px; /* 列表项行高 */
padding: 0 30px; /* 列表项内边距-左右 */
color: #FFFFFF; /* 字体白色 */
position: relative; /* 相对定位 */
cursor: pointer; /* 鼠标放上变为手型 */
font-size: 20px;
font-weight: bold;
}
.firseNav > li:hover { /* 鼠标放上时显示样式 */
background-color: #6c6e0a;
}
.secondeNav {
position: absolute; /* 绝对定位，相对于父元素.container */
left: 0; /* 距离父元素左边位置为0 */
top: 70px; /* 下拉菜单固定在导航栏下方 */
background-color: #550000;
display: none; /* 初始隐藏 */
min-width: 150px; /* 最小宽度 */
list-style: none;
}
.secondeNav > li {
position: relative; /* 相对定位 */
background-color: #00557f;
color: #FFFFFF; /*字体颜色*/
padding: 10px; /*内边距*/
text-align: center;
height: 45px;
cursor: pointer;
}
.secondeNav > li:hover { /* 鼠标放上显示样式 */
background-color: #fbd7b3;
background-image: url(img/arrow.gif);
background-repeat: no-repeat;
}
.firseNav > li:hover .secondeNav { /* 鼠标放上显示样式 */
display: block; /* 显示下一级导航 */
}
</style>
</head>
<body> <!-- 网页主体 -->
<div class=container> <!-- 容器.container，用于包含导航栏 -->
<ul class=firseNav> <!-- 一级导航 -->
<li><a href="index.html">主页</a></li>
<li><a href="game.html">怀旧游戏</a>
<ul class=secondeNav> <!-- 二级导航 -->
<li>魔域<!-- 第一个列表项 --></li>
<li>QQ宠物</li>
<li>天书奇谈</li>
<li>极光世界</li>
</ul>
</li>
<li><a href="novel.html">网络小说</a></li>
<li>唯美纯音</li>
<li>经典好书</li>
<li>爱是什么</li>
<li><a href="test.html">进击大厂</a></li>
</ul>
</div>
<!-- 图片轮播部分 -->
<div class="carousel" style="margin-top: 30px; margin-left: 10px;">
<img src="img/1.png" id="carouselImg" width="600" height="400" style="margin-top: 20px;">
<button onclick="previousImage()" style="position: absolute; top: 250px; left: 0; background-color: rgba(0,0,0,0.5); color: white; border none; padding: 10px 20px; cursor: pointer;"><</button>
<button onclick="nextImage()" style="position: absolute; top: 250px; left: 552px; background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px 20px; cursor: pointer;">></button>
</div>
<p style="text-align: center; position: absolute; margin-top: 10px; margin-left:230px; font-weight: bold;">点击<span style="color: green;">主页</span>播放音乐</p>
<script>
//图片数组
var images = [
"img/1.png",
"img/2.png",
"img/3.png"
];
//音乐数组
var musics = [
"music/sad1.mp3",
"music/sad2.mp3",
"music/sad3.mp3"
];
//初始显示的图片索引为0，初始播放的音乐索引为0
var indexImg = 0;
var indexMusic = 0;
//新建一个Audio对象并播放
var music = new Audio(musics[indexMusic]);
music.play();
//监听音乐播放结束事件
music.addEventListener("ended", function() {
//音乐切换下一首
indexMusic++;
//判断是否超出音乐数组长度，超出则重新开始循环
if(indexMusic >= musics.length) {
indexMusic = 0;
}
//新建一个Audio对象并播放下一首音乐
music = new Audio(musics[indexMusic]);
music.play();
//图片切换下一张
indexImg++;
//判断是否超出数组长度, 超出则重新开始循环
if(indexImg >= images.length){
indexImg = 0;
}
//设置当前显示图片
document.getElementById("carouselImg").src = images[indexImg];
});
//每2500ms自动轮播图片
setInterval(function() {
indexImg++;
//判断是否超出数组，超出则重新循环
if(indexImg >= images.length) {
indexImg = 0;
}
//设置当前显示图片
document.getElementById("carouselImg").src = images[indexImg];
}, 2500);
//每100ms检测音乐是否播放结束，并处理ended事件来自动播放下一首音乐
setInterval(function() {
if(music.ended) {
//音乐切换下一首
indexMusic++;
if(indexMusic >= musics.length) {
indexMusic = 0;
}
music = new Audio(musics[indexMusic]);
playMusic();
}
}, 100);
//播放音乐
function playMusic() {
music.play();
}
//程序启动时播放第一首歌曲
var music = new Audio(musics[indexMusic]);
playMusic();
//上一张图片
function previousImage() {
//图片索引-1
indexImg--;
//判断是否超出数组长度，超出则循环到数组末尾
if(indexImg < 0) {
indexImg = images.length - 1;
}
//设置显示当前图片
document.getElementById("carouselImg").src = images[indexImg];
}
//下一张图片
function nextImage() {
//图片索引+1
indexImg++;
//超出数组长度就循环到数组开头
if(indexImg >= images.length) {
indexImg = 0;
}
//设置当前显示图片
document.getElementById("carouselImg").src = images[indexImg];
}
</script>
</body>
</html>
