用JavaScript写一个个人博客系统
时间: 2023-12-31 15:07:11 浏览: 32
好的,下面是一个简单的个人博客系统的示例代码。
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>My Blog</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">关于我</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>最新文章</h2>
<ul id="latest-posts"></ul>
</section>
<section>
<h2>热门文章</h2>
<ul id="popular-posts"></ul>
</section>
</main>
<footer>
© 2021 My Blog
</footer>
</body>
</html>
```
JavaScript部分:
```javascript
// 定义最新文章和热门文章列表
var latestPosts = [
{ title: "文章标题1", date: "2021-01-01", content: "文章内容1" },
{ title: "文章标题2", date: "2021-01-02", content: "文章内容2" },
{ title: "文章标题3", date: "2021-01-03", content: "文章内容3" }
];
var popularPosts = [
{ title: "文章标题4", date: "2021-01-04", content: "文章内容4" },
{ title: "文章标题5", date: "2021-01-05", content: "文章内容5" },
{ title: "文章标题6", date: "2021-01-06", content: "文章内容6" }
];
// 在页面加载完成后执行以下代码
window.onload = function() {
// 获取最新文章和热门文章列表元素
var latestPostsList = document.getElementById("latest-posts");
var popularPostsList = document.getElementById("popular-posts");
// 在最新文章列表中添加文章
for (var i = 0; i < latestPosts.length; i++) {
var post = latestPosts[i];
var li = document.createElement("li");
li.innerHTML = "<h3>" + post.title + "</h3><p>" + post.date + "</p><p>" + post.content + "</p>";
latestPostsList.appendChild(li);
}
// 在热门文章列表中添加文章
for (var i = 0; i < popularPosts.length; i++) {
var post = popularPosts[i];
var li = document.createElement("li");
li.innerHTML = "<h3>" + post.title + "</h3><p>" + post.date + "</p><p>" + post.content + "</p>";
popularPostsList.appendChild(li);
}
};
```
这个示例代码只是一个简单的个人博客系统,它只包含了最新文章和热门文章列表。你可以根据自己的需要添加更多功能和页面。