用js写一个最新菜谱网页
时间: 2023-10-02 21:04:43 浏览: 48
好的,我可以给你提供一个简单的菜谱网页的代码示例。这个网页会从一个数组中获取菜谱数据,并将其显示在一个HTML表格中。
```html
<!DOCTYPE html>
<html>
<head>
<title>最新菜谱</title>
</head>
<body>
<h1>最新菜谱</h1>
<table>
<thead>
<tr>
<th>菜名</th>
<th>食材</th>
<th>步骤</th>
</tr>
</thead>
<tbody id="recipe-list">
</tbody>
</table>
<script>
// 菜谱数据
var recipes = [
{
name: "麻婆豆腐",
ingredients: "豆腐、肉末、豆瓣酱",
steps: "1. 将豆腐切成小块 2. 炒肉末和豆瓣酱 3. 加入豆腐 4. 煮5分钟"
},
{
name: "宫保鸡丁",
ingredients: "鸡肉、花生、辣椒",
steps: "1. 将鸡肉切成小块 2. 炒花生和辣椒 3. 加入鸡肉 4. 加调料煮熟"
},
{
name: "清炒时蔬",
ingredients: "时蔬、盐、油",
steps: "1. 将时蔬洗净切好 2. 热锅加油 3. 把时蔬放入锅中 4. 加盐翻炒"
}
];
// 在表格中显示菜谱数据
var recipeList = document.getElementById("recipe-list");
for (var i = 0; i < recipes.length; i++) {
var recipe = recipes[i];
var row = recipeList.insertRow();
row.insertCell().innerHTML = recipe.name;
row.insertCell().innerHTML = recipe.ingredients;
row.insertCell().innerHTML = recipe.steps;
}
</script>
</body>
</html>
```
你可以将这段代码保存为一个HTML文件,然后在浏览器中打开它,就可以看到一个简单的菜谱网页了。当然,这只是一个示例,你可以根据自己的需求进行修改和扩展。