超有趣！“成为恋人”HTML页面，越拒绝“可以”按钮越大

# 恋人确认页面HTML源码以下是一个有趣的HTML页面，它会显示"可以成为我的恋人吗"的问题，并且"可以"按钮会在每次拒绝时变大，直到用户点击"可以"为止： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>可以成为我的恋人吗？</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #ffebee; font-family: 'Arial', sans-serif; text-align: center; } .container { background-color: white; padding: 30px; border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } h1 { color: #e91e63; margin-bottom: 30px; } .buttons { display: flex; justify-content: center; gap: 20px; } #yesBtn { background-color: #4caf50; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; transition: all 0.3s; } #noBtn { background-color: #f44336; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; transition: all 0.3s; } #yesBtn:hover, #noBtn:hover { opacity: 0.8; } </style> </head> <body> <div class="container"> <h1>可以成为我的恋人吗？</h1> <div class="buttons"> <button id="yesBtn">可以</button> <button id="noBtn">不要</button> </div> </div> <script> const yesBtn = document.getElementById('yesBtn'); const noBtn = document.getElementById('noBtn'); let fontSize = 16; noBtn.addEventListener('click', function() { // 增加"可以"按钮的尺寸 fontSize += 5; yesBtn.style.fontSize = `${fontSize}px`; yesBtn.style.padding = `${fontSize/2}px ${fontSize}px`; // 移动"不要"按钮到随机位置 const maxX = window.innerWidth - noBtn.offsetWidth; const maxY = window.innerHeight - noBtn.offsetHeight; const randomX = Math.floor(Math.random() * maxX); const randomY = Math.floor(Math.random() * maxY); noBtn.style.position = 'absolute'; noBtn.style.left = `${randomX}px`; noBtn.style.top = `${randomY}px`; }); yesBtn.addEventListener('click', function() { alert('太好了！我很开心！❤️'); }); </script> </body> </html> ``` ## 代码说明 1. 页面布局使用flexbox居中显示问题容器 2. "可以"按钮初始字体大小为16px 3. 每次点击"不要"按钮时： - "可以"按钮的字体大小增加5px - 按钮内边距按比例增加 - "不要"按钮会随机移动到页面其他位置 4. 点击"可以"按钮会显示一个开心的提示 ## 使用说明 1. 将上述代码复制到文本编辑器中 2. 保存为`.html`文件（例如`love_question.html`） 3. 双击该文件在浏览器中打开 4. 尝试点击"不要"按钮，观察"可以"按钮的变化 ## 注意事项 1. 按钮尺寸增长没有上限，可能会超出屏幕 2. 随机位置算法可能导致按钮部分显示在屏幕外 3. 移动端设备上可能需要调整触摸区域大小 ######[AI写代码神器 | 932点数解答 | 2025-07-26 08:21:33]

服务商

更多选项

快捷项

自定义