用html写一个有以下几个选项:西红柿、鸡蛋、米饭、葱、面 请随机选择几种食材,生成对应食物
时间: 2023-07-04 07:16:33 浏览: 216
食物选择器
好的,以下是一个简单的HTML代码,包含一个按钮,点击按钮后会随机生成一个由选中的食材组成的食物名称:
```html
<!DOCTYPE html>
<html>
<head>
<title>随机生成食物</title>
<meta charset="UTF-8">
<script>
function generateFood() {
var ingredients = document.querySelectorAll('input[type=checkbox]:checked');
var foodList = {
"tomato-egg-rice": ["西红柿炒鸡蛋盖饭", ["西红柿", "鸡蛋", "米饭"]],
"scallion-noodles": ["葱油拌面", ["葱", "面"]],
"omelette-rice": ["蛋包饭", ["鸡蛋", "米饭"]],
"tomato-rice": ["西红柿炒饭", ["西红柿", "米饭"]]
};
var foodKeys = Object.keys(foodList);
var randomFoodKey = foodKeys[Math.floor(Math.random() * foodKeys.length)];
var randomFood = foodList[randomFoodKey];
var ingredientsText = randomFood[1].filter(function(ingredient) {
return Array.prototype.some.call(ingredients, function(checkedIngredient) {
return checkedIngredient.value === ingredient;
});
}).join(", ");
if (ingredientsText.length > 0) {
ingredientsText = "使用了" + ingredientsText + "等食材的";
}
document.getElementById("food-result").textContent = ingredientsText + randomFood[0];
}
</script>
</head>
<body>
<h1>随机生成食物</h1>
<p>请选中至少一种食材:</p>
<form>
<label><input type="checkbox" name="ingredient" value="tomato">西红柿</label><br>
<label><input type="checkbox" name="ingredient" value="egg">鸡蛋</label><br>
<label><input type="checkbox" name="ingredient" value="rice">米饭</label><br>
<label><input type="checkbox" name="ingredient" value="scallion">葱</label><br>
<label><input type="checkbox" name="ingredient" value="noodles">面</label><br>
<br>
<button type="button" onclick="generateFood()">生成食物</button>
</form>
<br>
<p id="food-result"></p>
</body>
</html>
```
你可以将此代码复制到一个 HTML 文件中,并在浏览器中打开,即可看到一个复选框列表和一个生成食物的按钮。每次点击按钮时,代码将会随机选择一个食物,并将其名称显示在页面中,同时会根据选中的食材生成食物的说明。例如,如果选中了西红柿和米饭,可能会生成类似于“使用了西红柿、米饭等食材的西红柿炒饭”这样的结果。
阅读全文