HTML表白喜欢你和不喜欢你的后果页面示例
时间: 2024-10-29 20:19:39 浏览: 15
我爱你-表白源码html动态图
5星 · 资源好评率100%
HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言,它本身并不能直接用来设计复杂的动态效果,如情感表白的互动页面。然而,你可以使用HTML结构来构建一个静态的页面,展示表白结果的不同情况。例如:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<title>表白结果</title>
<style>
.result {
margin-bottom: 20px;
}
.positive-result {
color: green;
font-weight: bold;
}
.negative-result {
color: red;
}
</style>
</head>
<body>
<h1>表白结果:</h1>
<div class="result" id="likeResult">
<p id="likingStatus">如果你喜欢我,<span class="positive-result">我们会成为最好的朋友。</span></p>
</div>
<div class="result" id="dislikeResult" style="display:none;">
<p id="dislikingStatus"><span class="negative-result">很遗憾,我们还是保持普通朋友的关系吧。</span></p>
</div>
<button onclick="toggleLikeStatus()">点击看结果</button>
<script>
function toggleLikeStatus() {
var likeResult = document.getElementById("likeResult");
var dislikeResult = document.getElementById("dislikeResult");
if (likeResult.style.display === "none") {
likeResult.style.display = "block";
dislikeResult.style.display = "none";
} else {
likeResult.style.display = "none";
dislikeResult.style.display = "block";
}
}
</script>
</body>
</html>
```
在这个示例中,当你点击按钮时,JavaScript会切换两个结果段落的显示状态,模拟表白后的反馈。请注意,这只是一个基本的静态HTML示例,并非真正的交互式应用,如果需要实时反馈或复杂的情感表达,应配合前端框架(如jQuery、Vue.js或React)和服务器端技术(如Node.js)。
阅读全文