每到饭点,天天都在纠结吃啥,那就,把选择交给了代码,来看看今天吃啥吧!
运行效果:
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机选择器</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#dish {
margin-top: 20px;
font-size: 24px;
}
</style>
</head>
<body>
<h1>今天吃啥</h1>
<button id="randomDishButton">点我</button>
<p id="dish"></p>
<script>
document.getElementById('randomDishButton').addEventListener('click', function() {
var dishes = [
"凉皮",
"桂林米粉",
"饺子",
"铁板饭",
"渔粉",
"拌饭",
"米线",
"麻辣烫",
"馄饨",
"水果捞",
"零食铺",
"塔斯汀",
"靓汤饭",
"螺蛳粉",
"一楼饭",
"三楼饭",
"水煮饭",
"糖水",
"Yes",
"No"
];
var randomDish = dishes[Math.floor(Math.random() * dishes.length)];
document.getElementById('dish').innerText = "那就:" + randomDish;
});
</script>
</body>
</html>