正文

学会JS，用代码写出一见钟情的表白情书

/0 浏览量
0601 
# 用JavaScript代码写一见钟情的表白情书

在数字化时代，用代码来表达爱意也是一种独特而有趣的方式。下面，我将用JavaScript代码为你写一封一见钟情的表白情书。这封情书会在网页上以动画的形式展现，希望它能传达你心中的那份情感。

### HTML结构

首先，我们需要一个简单的HTML结构来承载我们的JavaScript代码和动画效果。

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>一见钟情的表白情书</title>
<style>
  body {
    text-align: center;
    font-family: 'Arial', sans-serif;
    background-color: #f7f7f7;
    margin-top: 50px;
  }
  #love-letter {
    font-size: 24px;
    color: #333;
    margin-top: 20px;
  }
</style>
</head>
<body>
  <div id="love-letter"></div>
  <script src="love-letter.js"></script>
</body>
</html>

JavaScript代码

接下来是JavaScript部分。我们将使用setTimeout函数来逐步显示情书的内容，并添加一些简单的动画效果。

// love-letter.js
document.addEventListener('DOMContentLoaded', function() {
  const loveLetter = document.getElementById('love-letter');
  const message = "从那一刻起，你的笑容就刻在我的心间，我无法抗拒这份一见钟情的魔力。";
  let index = 0;

  function typeLetter() {
    if (index < message.length) {
      loveLetter.textContent += message.charAt(index);
      index++;
      setTimeout(typeLetter, 100); // 每个字母间隔100毫秒显示
    }
  }

  typeLetter();
});

动画效果

为了使情书更具吸引力，我们可以为每个字母的添加添加一个简单的淡入动画。我们可以使用CSS来实现这一点。

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#love-letter span {
  animation: fadeIn 1s ease-out forwards;
  opacity: 0;
  margin-right: 5px;
}

完整代码

将上面的HTML和JavaScript代码合并，并添加CSS动画样式，你将得到一个简单的网页，它会在网页上逐字显示你的表白情书。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>一见钟情的表白情书</title>
<style>
  body {
    text-align: center;
    font-family: 'Arial', sans-serif;
    background-color: #f7f7f7;
    margin-top: 50px;
  }
  #love-letter {
    font-size: 24px;
    color: #333;
    margin-top: 20px;
  }
  #love-letter span {
    animation: fadeIn 1s ease-out forwards;
    opacity: 0;
    margin-right: 5px;
  }
</style>
</head>
<body>
  <div id="love-letter"></div>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const loveLetter = document.getElementById('love-letter');
      const message = "从那一刻起，你的笑容就刻在我的心间，我无法抗拒这份一见钟情的魔力。";
      let index = 0;

      function typeLetter() {
        if (index < message.length) {
          const letter = document.createElement('span');
          letter.textContent = message.charAt(index);
          loveLetter.appendChild(letter);
          index++;
          setTimeout(typeLetter, 100);
        }
      }

      typeLetter();
    });
  </script>
</body>
</html>

当你运行这段代码时，一个充满爱意的情书将逐字出现在网页上，每个字母都会有一个淡入的动画效果，让你的表白更加温馨和特别。

-- 展开阅读全文 --