返回

趣味新年签: 来点技术范儿的新年祝福

前端

新年快到了，我们总是希望用特别的方式来表达对亲朋好友的美好祝愿。除了传统的拜年问候，你还可以用一种更有技术范儿的方式来表达你的祝福。那就是 DIY 一个新年签，通过摇一摇的方式，摇出自己的新年运势。

摇一摇新年签

这个小程序的实现原理很简单。首先，我们需要创建一个 HTML 页面，并在其中添加一个按钮。当用户点击这个按钮时，页面就会触发一个 JavaScript 函数。这个函数会生成一个随机数，并根据这个随机数来显示不同的新年祝福。

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>摇一摇新年签</h1>
  <button onclick="shake()">摇一摇</button>

  <div id="result"></div>

  <script src="script.js"></script>
</body>
</html>

#result {
  font-size: 24px;
  text-align: center;
  padding: 20px;
  margin-top: 20px;
  background-color: #eee;
}

function shake() {
  // 生成一个随机数
  var randomNum = Math.floor(Math.random() * 10);

  // 根据随机数显示不同的新年祝福
  var blessing = "";
  switch (randomNum) {
    case 0:
      blessing = "新年快乐，万事如意！";
      break;
    case 1:
      blessing = "身体健康，阖家幸福！";
      break;
    case 2:
      blessing = "学业有成，前程似锦！";
      break;
    case 3:
      blessing = "事业顺利，财源广进！";
      break;
    case 4:
      blessing = "爱情美满，幸福美满！";
      break;
    case 5:
      blessing = "心想事成，万事大吉！";
      break;
    case 6:
      blessing = "福星高照，好运连连！";
      break;
    case 7:
      blessing = "平安吉祥，万事如意！";
      break;
    case 8:
      blessing = "喜气洋洋，财源广进！";
      break;
    case 9:
      blessing = "合家欢乐，幸福美满！";
      break;
  }

  // 将新年祝福显示在页面上
  document.getElementById("result").innerHTML = blessing;
}

这个小程序可以让你和你的朋友在新年期间玩得开心。你也可以根据自己的喜好，对这个小程序进行一些修改。比如，你可以添加更多的新年祝福，或者你可以改变小程序的视觉效果。