js实现浪漫

JavaScript 实现浪漫效果

通过JavaScript可以实现多种浪漫的交互效果，例如爱心动画、浪漫弹幕、情书生成器等。以下是几种常见的浪漫效果实现方法。

爱心动画

创建一个动态的爱心动画，可以使用HTML5 Canvas结合JavaScript：

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

function drawHeart(x, y, size, color) {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.bezierCurveTo(x, y - size / 2, x - size, y - size, x - size, y);
    ctx.bezierCurveTo(x - size, y + size / 2, x, y + size, x, y + size);
    ctx.bezierCurveTo(x, y + size, x + size, y + size / 2, x + size, y);
    ctx.bezierCurveTo(x + size, y - size, x, y - size / 2, x, y);
    ctx.fillStyle = color;
    ctx.fill();
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const time = Date.now() * 0.001;
    const x = canvas.width / 2 + Math.sin(time) * 100;
    const y = canvas.height / 2 + Math.cos(time) * 100;
    drawHeart(x, y, 50, 'red');
    requestAnimationFrame(animate);
}
animate();

浪漫弹幕

在页面上显示漂浮的浪漫文字或爱心：

const words = ['Love', '❤️', 'Forever', 'You & Me'];
const container = document.body;

function createFloatingText() {
    const element = document.createElement('div');
    element.textContent = words[Math.floor(Math.random() * words.length)];
    element.style.position = 'absolute';
    element.style.left = Math.random() * window.innerWidth + 'px';
    element.style.top = Math.random() * window.innerHeight + 'px';
    element.style.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
    element.style.fontSize = (20 + Math.random() * 30) + 'px';
    container.appendChild(element);

    let x = parseFloat(element.style.left);
    let y = parseFloat(element.style.top);
    const speedX = (Math.random() - 0.5) * 2;
    const speedY = (Math.random() - 0.5) * 2;

    function move() {
        x += speedX;
        y += speedY;
        if (x < 0 || x > window.innerWidth || y < 0 || y > window.innerHeight) {
            container.removeChild(element);
            return;
        }
        element.style.left = x + 'px';
        element.style.top = y + 'px';
        requestAnimationFrame(move);
    }
    move();
}

setInterval(createFloatingText, 500);

情书生成器

创建一个简单的交互式情书生成器：

<div id="letter">
    <textarea id="message" placeholder="输入你的浪漫消息..."></textarea>
    <button id="generate">生成情书</button>
    <div id="output"></div>
</div>

<script>
document.getElementById('generate').addEventListener('click', function() {
    const message = document.getElementById('message').value;
    const output = document.getElementById('output');
    output.innerHTML = `
        <div style="border: 2px solid pink; padding: 20px; border-radius: 10px;">
            <h3 style="color: #ff69b4;">给最爱的你</h3>
            <p>${message}</p>
            <p style="text-align: right;">❤️ 爱你的我</p>
        </div>
    `;
});
</script>

背景星空效果

创建一个浪漫的星空背景：

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.style.position = 'fixed';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.zIndex = '-1';
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

const stars = Array(200).fill().map(() => ({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    size: Math.random() * 3,
    speed: Math.random() * 0.5
}));

function drawStars() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'white';
    stars.forEach(star => {
        ctx.beginPath();
        ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
        ctx.fill();
        star.x += star.speed;
        if (star.x > canvas.width) star.x = 0;
    });
    requestAnimationFrame(drawStars);
}
drawStars();

这些代码示例可以直接在网页中使用，创造出浪漫的视觉效果。可以根据需要调整颜色、大小和动画速度等参数。