【无标题】蛇年祝福祝福语见文章链接免费下载

最新推荐文章于 2025-11-24 03:12:01 发布

原创最新推荐文章于 2025-11-24 03:12:01 发布 · 517 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

设计了一个简单的HTML界面，使用JavaScript轮询显示蛇年祝福语。以下是完整的代码：

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 { font-family: 'Arial', sans-serif; background-color: #f4f4f9; margin: 0; padding: 0; text-align: center; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); max-width: 600px; width: 100%; } h1 { color: #4CAF50; font-size: 32px; } .blessing { font-size: 24px; color: #333; margin-top: 20px; } .container button { background-color: #4CAF50; color: white; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 5px; margin-top: 30px; } .container button:hover { background-color: #45a049; } </style> </head> <body> <div class="container"> <h1>蛇年祝福语</h1> <div class="blessing" id="blessingText">  </div> <button onclick="nextBlessing()">显示下一个祝福</button> </div> <script> const blessings = [ "蛇年大吉，事业腾飞", "蛇年如意，财源广进", "蛇年安康，平安幸福", "蛇年吉祥，万事如意", "蛇年好运，步步高升", "蛇年福到，运势旺盛", "蛇年顺心，财运亨通", "蛇年喜庆，吉星高照", "蛇年幸福，家庭美满", "蛇年瑞气，福星高照", "蛇年富贵荣华，家和万事兴", "蛇年春风得意，笑容满面", "蛇年一帆风顺，富贵荣华", "蛇年心如止水，万事如意", "蛇年吉星高照，财源滚滚", "蛇年吉祥如意，财源滚滚" ]; let currentBlessing = 0; function nextBlessing() { document.getElementById('blessingText').innerHTML = blessings[currentBlessing]; currentBlessing = (currentBlessing + 1) % blessings.length; } // 默认显示第一个祝福语 nextBlessing(); </script> </body> </html>