超甜！用 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: #ACDEFF; font-family: 'Arial', sans-serif; text-align: center; transition: background-color 0.5s; } .container { background-color: #F9FFFF; padding: 30px; border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width: 80%; } h1 { color: #e91e63; margin-bottom: 30px; } .image-container { margin-bottom: 20px; height: 200px; display: flex; justify-content: center; align-items: center; } .image-container img { max-height: 100%; max-width: 100%; display: none; } .image-container img.active { display: block; } .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="image-container"> <img src="https://s3.bmp.ovh/imgs/2025/07/26/1d40e20226747686.jpg" class="active" alt="可以成为千一的恋人吗"> <img src="https://s3.bmp.ovh/imgs/2025/07/26/5422e5281214f40c.jpg" alt="真的不可以嘛？"> <img src="https://s3.bmp.ovh/imgs/2025/07/26/132a2d971d0b9a5b.jpg" alt="不要嘛，再想一想"> <img src="https://s3.bmp.ovh/imgs/2025/07/26/77ed0e5e589807fb.jpg" alt="不行，你必须当千一的恋人"> <img src="https://s3.bmp.ovh/imgs/2025/07/26/215a4d774c7d26ef.jpg" alt="千一真的真的超爱你的"> </div> <div class="buttons"> <button id="yesBtn">可以</button> <button id="noBtn">不要</button> </div> </div> <script> const yesBtn = document.getElementById('yesBtn'); const noBtn = document.getElementById('noBtn'); const images = document.querySelectorAll('.image-container img'); const body = document.querySelector('body'); const bgColors = ['#ACDEFF', '#D1EEED', '#DBF3FE', '#F9FFFF', '#E0F7FA']; let fontSize = 16; let clickCount = 0; noBtn.addEventListener('click', function() { clickCount++; fontSize += 8; yesBtn.style.fontSize = `${fontSize}px`; yesBtn.style.padding = `${fontSize/2}px ${fontSize}px`; const maxX = window.innerWidth - noBtn.offsetWidth - 50; const maxY = window.innerHeight - noBtn.offsetHeight - 50; const randomX = Math.max(0, Math.floor(Math.random() * maxX)); const randomY = Math.max(0, Math.floor(Math.random() * maxY)); noBtn.style.position = 'absolute'; noBtn.style.left = `${randomX}px`; noBtn.style.top = `${randomY}px`; images.forEach(img => img.classList.remove('active')); const imgIndex = Math.min(clickCount, images.length - 1); images[imgIndex].classList.add('active'); body.style.backgroundColor = bgColors[imgIndex % bgColors.length]; }); yesBtn.addEventListener('click', function() { alert('千一真的真的超爱你的！٩(๛ ˘ ³˘)۶♥'); images.forEach(img => img.classList.remove('active')); images[images.length - 1].classList.add('active'); body.style.backgroundColor = bgColors[bgColors.length - 1]; }); </script> </body> </html> ``` ## 功能说明 1. 页面加载时显示第一张图片和问题 2. 每次点击"不要"按钮时： - "可以"按钮尺寸增大 - "不要"按钮随机移动 - 切换到下一张图片 - 颜色循环变化 3. 点击"可以"按钮时： - 显示确认消息 - 切换到最后的爱心图片 - 变为最后的颜色 ## 使用说明 1. 复制全部代码 2. 保存为HTML文件（如`qianyi_love.html`） 3. 双击文件在浏览器中打开 4. 尝试点击"不要"按钮观察效果 ## 注意事项 1. 图片需要网络连接才能加载 2. 按钮增长有上限（受限于屏幕尺寸） 3. 移动端可能需要调整图片容器高度 4. 颜色循环使用您提供的配色方案 ######[AI写代码神器 | 1411点数解答 | 2025-07-26 08:37:17]

服务商

更多选项

快捷项

自定义