当前位置：首页 > JavaScript

js实现表白

2026-04-06 23:34:48JavaScript

以下是一个简单的JavaScript实现表白效果的代码示例，结合了动态文字和动画效果：

js实现表白

基础文字表白

function showLoveMessage() {
  alert("我喜欢你！");
}

动态文字效果

const messages = ["遇见你是我的幸运", "想和你一起看星星", "你愿意做我女朋友吗？"];
let index = 0;
const element = document.getElementById("loveMessage");

function displayMessages() {
  element.innerHTML = messages[index];
  index = (index + 1) % messages.length;
  setTimeout(displayMessages, 2000);
}
displayMessages();

爱心动画效果

<canvas id="heartCanvas" width="500" height="500"></canvas>
<script>
  const canvas = document.getElementById('heartCanvas');
  const ctx = canvas.getContext('2d');

  function drawHeart(t) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'red';

    for(let i = 0; i < 100; i++) {
      const angle = 0.1 * i;
      const x = 16 * Math.pow(Math.sin(angle), 3);
      const y = -(13 * Math.cos(angle) - 5 * Math.cos(2*angle) - 2 * Math.cos(3*angle) - Math.cos(4*angle));

      ctx.beginPath();
      ctx.arc(250 + x * 10, 250 + y * 10, 5, 0, 2 * Math.PI);
      ctx.fill();
    }

    requestAnimationFrame(drawHeart);
  }

  drawHeart(0);
</script>

点击按钮显示表白

<button id="loveButton">点击查看惊喜</button>
<div id="message" style="display:none; font-size:24px; color:red;">我喜欢你！</div>

<script>
  document.getElementById('loveButton').addEventListener('click', function() {
    document.getElementById('message').style.display = 'block';
    this.style.display = 'none';
  });
</script>

这些代码可以单独使用或组合在一起，创建一个更有趣的表白页面。可以根据需要调整颜色、文字和动画效果。

标签: js