如何添加景点和活动?
步骤 1:创建景点和活动列表
- 创建一个名为 "Attractions" 的新文件夹。
- 在该文件夹中创建两个文件:
- Attractions.json:这是一个 JSON 文件,其中包含所有景点和活动的 JSON 对象。
- Attractions.html:这是一个 HTML 文件,用于显示景点和活动的列表。
步骤 2:编写 JSON 文件
- 在 Attractions.json 中添加所有景点和活动的 JSON 对象。
- 每项对象应包含以下属性:
- name:景点或活动的名称。
- description:景点或活动的描述。
- image:景点或活动的图片。
- url:景点或活动的网站链接。
- rating:景点或活动的评分。
步骤 3:编写 HTML 文件
- 在 Attractions.html 中添加以下 HTML 代码:
Attractions
Attractions
- 在 Attractions.js 中添加以下 JavaScript 代码:
const attractions = JSON.parse(document.getElementById('attractions').innerHTML);
const list = document.getElementById('attractions');
for (const attraction of attractions) {
const li = document.createElement('li');
li.innerHTML = `
${attraction.name}
`;
list.appendChild(li);
}
步骤 4:运行程序
- 将您的 HTML 文件保存为 index.html。
- 启动运行您的应用程序。
- 在浏览器的地址栏中输入 localhost:8000,其中 8000 是默认端口。
注意:
- 您可以在 Attractions.json 中添加任何您想要添加的景点或活动。
- 您也可以使用任何 HTML 框架或库来简化 HTML 文件的编写。
- 您也可以使用任何 JavaScript 库来动态添加景点和活动。