做一个网页,包含一个按钮,按下之后可以从几十个句子中随机抽取出来一句显示在屏幕上
时间: 2024-05-24 18:12:05 浏览: 16
<!DOCTYPE html>
<html>
<head>
<title>随机句子生成器</title>
<meta charset="utf-8">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f6f6f6;
}
h1 {
text-align: center;
margin-top: 50px;
color: #333;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
.btn {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
margin-bottom: 30px;
}
.result {
font-size: 24px;
text-align: center;
color: #333;
margin-bottom: 50px;
}
</style>
</head>
<body>
<h1>随机句子生成器</h1>
<div class="container">
<button class="btn" onclick="generate()">生成句子</button>
<p class="result" id="result"></p>
</div>
<script>
function generate() {
const sentences = [
"人生如梦,一樽还酹江月。",
"富贵不能淫,贫贱不能移,威武不能屈。",
"青山遮不住,毕竟东流去。",
"天生我材必有用。",
"千里之堤毁于蚁穴,九层之台起于垒土。",
"路漫漫其修远兮,吾将上下而求索。",
"燕雀安知鸿鹄之志哉。",
"天行健,君子以自强不息。",
"读书破万卷,下笔如有神。",
"人生自古谁无死,留取丹心照汗青。",
"知之者不如好之者,好之者不如乐之者。",
"天将降大任于斯人也,必先苦其心志,劳其筋骨。",
"岁月不待人,时光荏苒。",
"君子坦荡荡,小人长戚戚。",
"欲穷千里目,更上一层楼。",
"不积跬步,无以至千里;不积小流,无以成江海。",
"书山有路勤为径,学海无涯苦作舟。"
];
const randomIndex = Math.floor(Math.random() * sentences.length);
const result = document.getElementById("result");
result.innerText = sentences[randomIndex];
}
</script>
</body>
</html>