!DOCTYPE html
html lang=zh
head
    meta charset=UTF-8
    meta name=viewport content=width=device-width, initial-scale=1.0
    title独一无二的粒子时钟 - 2025title
    style
        body {
            margin 0;
            overflow hidden;
            background linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            color #fff;
            font-family 'Arial', sans-serif;
            height 100vh;
            display flex;
            justify-content center;
            align-items center;
        }
        canvas {
            position absolute;
            top 0;
            left 0;
            z-index 1;
        }
        #clock {
            position relative;
            z-index 2;
            font-size 4rem;
            text-shadow 0 0 20px rgba(255, 255, 255, 0.8);
            letter-spacing 4px;
        }
        #message {
            position relative;
            z-index 2;
            font-size 1.5rem;
            margin-top 20px;
            opacity 0.8;
        }
    style
head
body
    canvas id=canvascanvas
    div id=clockdiv
    div id=message当前日期：2025年12月27日  独一无二的粒子背景时钟div

    script
         粒子背景效果（独一无二的随机粒子动画）
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        let particles = [];
        const particleCount = 150;

        class Particle {
            constructor() {
                this.x = Math.random()  canvas.width;
                this.y = Math.random()  canvas.height;
                this.size = Math.random()  5 + 1;
                this.speedX = Math.random()  3 - 1.5;
                this.speedY = Math.random()  3 - 1.5;
                this.color = `hsl(${Math.random()  360}, 70%, 60%)`;
            }
            update() {
                this.x += this.speedX;
                this.y += this.speedY;
                if (this.x  canvas.width  this.x  0) this.speedX = -1;
                if (this.y  canvas.height  this.y  0) this.speedY = -1;
            }
            draw() {
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI  2);
                ctx.fill();
            }
        }

        function initParticles() {
            particles = [];
            for (let i = 0; i  particleCount; i++) {
                particles.push(new Particle());
            }
        }

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            particles.forEach(p = {
                p.update();
                p.draw();
            });
            requestAnimationFrame(animate);
        }

        initParticles();
        animate();

        window.addEventListener('resize', () = {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            initParticles();
        });

         实时数字时钟
        function updateClock() {
            const now = new Date();
            const time = now.toLocaleTimeString('zh-CN', { hour12 false });
            document.getElementById('clock').textContent = time;
        }
        updateClock();
        setInterval(updateClock, 1000);
    script
body
html