📌  相关文章
📜  新年快乐 - Javascript (1)

📅  最后修改于: 2023-12-03 14:55:04.483000             🧑  作者: Mango

新年快乐 - JavaScript

祝福大家新年快乐！下面让我们一起用 JavaScript 来制作一个新年贺卡吧！

HTML 结构

我们可以使用最简单的 HTML 结构来创建一个页面，如下所示。

<!DOCTYPE html>
<html>
  <head>
    <title>新年快乐</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div id="card"></div>
  </body>
</html>

上面代码中，我们在页面中添加了一个 div 元素，用于显示新年贺卡。

CSS 样式

接下来，在样式表中添加样式。

#card {
  width: 400px;
  height: 300px;
  background-color: #f8c471;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  color: #fff;
  text-align: center;
}

上面代码中，我们设置了显示区域大小、背景颜色、字体大小和文字颜色等。

JavaScript 代码

最后，我们使用 JavaScript 创建新年贺卡。

const card = document.getElementById("card");

const greetings = [
  "祝福新年好！", 
  "身体健康，万事如意！", 
  "阖家幸福，和睦相处！"
];

function getRandomIndex() {
  return Math.floor(Math.random() * greetings.length);
}

function displayGreetings() {
  card.innerHTML = greetings[getRandomIndex()];
}

window.setInterval(displayGreetings, 1000);

上面代码中，我们使用 document.getElementById 方法获取到 div#card 元素，使用数组存储新年祝福语，并定义了两个函数 getRandomIndex 和 displayGreetings。

其中，getRandomIndex 函数用于生成随机数组下标，displayGreetings 函数用于将新年祝福语显示在页面中。

最后，我们使用 window.setInterval 每秒调用一次 displayGreetings 函数，实现新年贺卡自动刷新。

效果预览

最终，我们得到了一个新年贺卡，并实现了自动刷新。

新年贺卡效果

新年到了，祝大家库存充足，顾客满意，财源广进，身体健康，开心快乐！