🌻 记录自己写的一言
要实现这个功能,需要完成以下几个步骤:
创建hitokoto.txt文件,并在其中添加你想要显示的句子。
编写hitokoto.php脚本,用于随机读取hitokoto.txt中的一句话。
在index.html中调用hitokoto.php,并使用JavaScript实现每隔五秒更新一次内容。
以下是具体的实现方法:
步骤1:创建 hitokoto.txt
在你的服务器上创建一个名为hitokoto.txt的文件,内容如下(每行一个句子):
例如:
人生苦短,赶快独霸时间线。
山重水复疑无路,柳暗花明又一村。
...
步骤2:编写 hitokoto.php
<?php
// 设置文件编码为UTF-8
header('Content-Type: text/html; charset=utf-8');
// 读取hitokoto.txt文件内容
$hitokoto_lines = file('hitokoto.txt', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
// 随机获取一句
$random_line =$hitokoto_lines[array_rand($hitokoto_lines)];
// 输出结果
echo $random_line;
?>
步骤3:编写index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>一言页面</title>
<script>
function updateHitokoto() {
// 使用jQuery的ajax方法获取hitokoto.php的内容
$.ajax({
url: 'hitokoto.php', // hitokoto.php的路径
success: function(data) {
// 将获取到的内容设置到id为hitokoto_text的元素上
$('#hitokoto_text').text(data);
}
});
}
// 页面加载完成后执行
$(document).ready(function() {
// 初始更新一言
updateHitokoto();
// 设置定时器,每隔五秒更新一次
setInterval(updateHitokoto, 5000);
});
</script>
</head>
<body>
<div id="hitokoto_text"></div>
<!-- 引入jQuery库 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
这样,你的 index.html 页面就会从 hitokoto.php 获取一句随机句子,并显示在页面上。确保你的服务器支持 PHP 和 UTF-8 编码,并且 hitokoto.txt 文件位于 hitokoto.php 可以访问的路径下。