<!DOCTYPE html>
<html>
<head>
<title>动态表白</title>
<style>
#message {
font-size: 30px;
text-align: center;
margin-top: 200px;
}
#btn {
font-size: 20px;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="message"></div>
<button id="btn">表白</button>
<script>
var btn = document.getElementById('btn');
var message = document.getElementById('message');
btn.addEventListener('click', function() {
var messages = [
'我爱你',
'你是我的唯一',
'我愿意陪你走完一生',
'你让我的世界变得更美好',
'天上的星星都变得黯淡了',
'你是我生命中的阳光',
'我会一直守护着你',
'我想和你一起携手走完人生的旅途',
'你让我感受到了真爱的力量',
'你是我心中永远的女神'
];
var randomIndex = Math.floor(Math.random() * messages.length); // 随机选择一个表白情话
message.innerText = messages[randomIndex];
});
</script>
</body>
</html>