利用随机数生成一个惩罚男友的HTML网页,要求在一个页面打印所有的惩罚条目,通过随机高亮显示的方式有过程的选择惩罚项目
时间: 2024-04-10 12:27:17 浏览: 13
您好!以下是基于随机数生成一个惩罚男的HTML网页的示代码:
```html
DOCTYPE html>
<html>
<head>
<title>惩罚男友</title>
<style>
.highlight {
-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<h1>惩罚男友</h1>
<h2>惩罚条目</h2>
<ul id="punishment-list">
<li>洗碗</li>
<li>洗衣服</li>
<li>清理房间</li>
<li>做饭</li>
<li>擦地板</li>
<li>倒垃圾</li>
<li>刷马桶</li>
<li>洗地毯</li>
</ul>
<button onclick="highlightRandomPunishment()">随机选择惩罚项目</button>
<script>
function highlightRandomPunishment() {
var punishments = document.querySelectorAll('#punishment-list li');
var randomIndex = Math.floor(Math.random() * punishments.length);
punishments.forEach(function (punishment) {
punishment.classList.remove('highlight');
});
punishments[randomIndex].classList.add('highlight');
}
</script>
</body>
</html>
```
这个示例代码中,我们使用了一个无序列表 `<ul>` 来展示惩罚条目,并通过 JavaScript 的 `highlightRandomPunishment()` 函数实现随机高亮显示一个惩罚项目。点击页面上的按钮即可实现随机选择并高亮显示一个惩罚项目。
请注意,这只是一个简单的示例,您可以根据实际需求进行修改和美化。希望对您有所帮助!如果您有其他问题,请随时提问。