中秋节用Vue.js画诗

2023-10-25 15:07:17

引言

中秋节是我国传统节日之一，也是仅次于春节的第二大节日。中秋节的习俗有很多，比如吃月饼、赏月、猜灯谜等。在这篇文章中，我将使用Vue.js来实现三个功能：绘制一轮明月、让明月出现在屏幕中心、将中秋节相关的古诗词以代码的形式绘制在屏幕上。

使用CSS绘制明月

首先，我们需要使用CSS来绘制一轮明月。我们可以使用下面的代码来实现：

.moon {
  width: 100px;
  height: 100px;
  background-color: #f8f8f8;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这段代码将创建一个100px宽100px高的白色圆形，并将其定位在屏幕的中心。

让明月出现在屏幕中心

接下来，我们需要让明月出现在屏幕中心。我们可以使用下面的代码来实现：

var moon = document.querySelector('.moon');

moon.style.top = (window.innerHeight - moon.offsetHeight) / 2 + 'px';
moon.style.left = (window.innerWidth - moon.offsetWidth) / 2 + 'px';

这段代码将获取到月球元素，然后将其定位在屏幕的中心。

将中秋节相关的古诗词以代码的形式绘制在屏幕上

最后，我们需要将中秋节相关的古诗词以代码的形式绘制在屏幕上。我们可以使用下面的代码来实现：

var poems = [
  '床前明月光，疑是地上霜。举头望明月，低头思故乡。',
  '海上生明月，天涯共此时。情人怨遥夜，竟夕起相思。',
  '露从今夜白，月是故乡明。有情人千里，共婵娟。'
];

var poemContainer = document.querySelector('.poem-container');

poems.forEach(function(poem) {
  var poemElement = document.createElement('div');
  poemElement.classList.add('poem');
  poemElement.innerHTML = poem;
  poemContainer.appendChild(poemElement);
});