当前位置：首页 > JavaScript

js实现表白

2026-02-02 06:18:12JavaScript

以下是用JavaScript实现表白效果的几种创意方法，结合动画、交互和视觉效果：

js实现表白

基础弹窗表白

alert("我喜欢你！");
confirm("可以做我的男/女朋友吗？") 
  ? alert("❤️ 爱你！") 
  : alert("😭 我会继续努力的！");

页面动态爱心效果

<style>
  .heart {
    position: absolute;
    transform: rotate(45deg);
    background: red;
    animation: beat 1s infinite;
  }
  @keyframes beat {
    0% { transform: rotate(45deg) scale(1); }
    50% { transform: rotate(45deg) scale(1.5); }
  }
</style>
<script>
  function createHeart() {
    const heart = document.createElement('div');
    heart.className = 'heart';
    heart.style.width = '20px';
    heart.style.height = '20px';
    heart.style.left = Math.random() * window.innerWidth + 'px';
    heart.style.top = Math.random() * window.innerHeight + 'px';
    document.body.appendChild(heart);

    setTimeout(() => {
      heart.remove();
    }, 3000);
  }
  setInterval(createHeart, 300);
</script>

打字机效果文字

const message = "我喜欢你很久了...";
let i = 0;
const typing = setInterval(() => {
  document.body.innerHTML += message[i];
  i++;
  if (i >= message.length) clearInterval(typing);
}, 200);

点击生成爱心

document.addEventListener('click', (e) => {
  const heart = document.createElement('div');
  heart.innerHTML = '❤️';
  heart.style.position = 'absolute';
  heart.style.left = e.clientX + 'px';
  heart.style.top = e.clientY + 'px';
  heart.style.fontSize = Math.random() * 30 + 10 + 'px';
  document.body.appendChild(heart);

  setTimeout(() => {
    heart.remove();
  }, 1000);
});

高级版表白页面

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background: pink;
      text-align: center;
      padding-top: 100px;
      font-family: Arial;
    }
    #message {
      font-size: 24px;
      margin: 20px;
    }
    button {
      padding: 10px 20px;
      margin: 10px;
      font-size: 18px;
    }
    #yes {
      background: lightgreen;
    }
    #no {
      background: pink;
      position: relative;
    }
  </style>
</head>
<body>
  <h1>我喜欢你！</h1>
  <div id="message">你愿意和我在一起吗？</div>
  <button id="yes">愿意</button>
  <button id="no">不愿意</button>

  <script>
    document.getElementById('yes').addEventListener('click', () => {
      document.getElementById('message').innerHTML = '❤️ 太棒了！我爱你！ ❤️';
    });

    document.getElementById('no').addEventListener('mouseover', () => {
      this.style.position = 'absolute';
      this.style.left = Math.random() * window.innerWidth * 0.8 + 'px';
      this.style.top = Math.random() * window.innerHeight * 0.8 + 'px';
    });
  </script>
</body>
</html>

这些代码可以根据需要组合使用或单独实现，效果会随着创意和个性化调整而提升。

标签: js