如何使用JavaScript實現新年賀卡特效

小編給大家分享一下如何使用JavaScript實現新年賀卡特效，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

動圖演示

一款超級炫酷的2022新年快樂html網頁特效，霓虹的城市夜景和絢爛的煙花很是特別，該html頁面還有交互效果，點擊鼠標就會呈現煙花綻放的特效，唯美不過如此。圖片可以換成自己喜歡的夜景或人物都可以。

主要代碼

圖片選擇引入：

html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: #000;
            font-family: Montserrat, sans-serif;
            background-image: url(img/pexels-photo-219692.jpeg);
            background-size: cover;
            background-position: center;
        }

css樣式

html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: #000;
            font-family: Montserrat, sans-serif;
            background-image: url(img/pexels-photo-219692.jpeg);
            background-size: cover;
            background-position: center;
        }
 
        canvas {
            mix-blend-mode: lighten;
            cursor: pointer;
        }
 
        #hero {
            display: inline;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            mix-blend-mode: color-dodge;
        }
 
        #year {
            font-size: 30vw;
            color: #d0d0d0;
            font-weight: bold;
        }
 
        #timeleft {
            color: #fbfbfb;
            font-size: 2.5vw;
            text-align: center;
            font-family: Lora, serif;
        }

Javascirpt

const canvas = document.createElement('canvas'),
        context = canvas.getContext('2d'),
        width = canvas.width = window.innerWidth,
        height = canvas.height = window.innerHeight,
        HalfPI = Math.PI / 2,
        gravity = vector.create(0, 0.35),
        year = document.getElementById('year'),
        timeleft = document.getElementById('timeleft'),
        newyear = new Date('01/01/2020');
 
    let objects = [],
        startFireworks = false,
        newYearAlready = false;
 
    function renderTimeLeft() {
        let date = new Date();
 
        let delta = Math.abs(newyear - date) / 1000;
 
        let hours = Math.floor(delta / 3600) % 24;
        delta -= hours * 3600;
 
        let minutes = Math.floor(delta / 60) % 60;
        delta -= minutes * 60;
 
        let seconds = Math.floor(delta % 60) + 1;
 
        let string = '';
 
        let DaysLeft = Math.floor((newyear - date) / (1000 * 60 * 60 * 24)),
            HoursLeft = `${hours} ${hours > 1 ? 'hours' : 'hour'}`,
            MinutesLeft = `${minutes} ${minutes > 1 ? 'minutes' : 'minute'}`,
            SecondsLeft = `${seconds} ${seconds > 1 ? 'seconds' : 'second'}`;
 
        if (hours > 0) string = `${HoursLeft} & ${MinutesLeft}`;else
        if (minutes > 0) string = `${MinutesLeft} & ${SecondsLeft}`;else
            string = `${SecondsLeft}`;
 
        if (DaysLeft > 0) string = DaysLeft + ' days, ' + string;
        string += ' until 2020';
 
        timeleft.innerHTML = string;
    }
 
    renderTimeLeft();
 
    setInterval(function () {
        let date = new Date();
        if (date >= newyear) {
            if (!newYearAlready) {
                year.innerHTML = '2022';
                startFireworks = true;
                timeleft.innerHTML = 'Happy New Year!';
            }
 
            newYearAlready = true;
        } else renderTimeLeft();
    }, 500);
 
 
    document.body.appendChild(canvas);
 
    function random255() {
        return Math.floor(Math.random() * 100 + 155);
    }
 
    function randomColor() {
        let r = random255(),
            g = random255(),
            b = random255();
        return `rgb(${r}, ${g}, ${b})`;
    }
 
    class PhysicsBody {
        constructor() {
            objects.push(this);
        }
        PhysicsUpdate() {
            this.lastPosition = this.position.duplicate();
            this.position.addTo(this.velocity);
            this.velocity.addTo(gravity);
        }
        deleteObject() {
            objects[objects.indexOf(this)] = undefined;
        }}
 
 
    class firework extends PhysicsBody {
        constructor() {
            super();
            this.position = vector.create(Math.random() * width, height);
 
            let Velocity = vector.create(0, 0);
            Velocity.setLength(Math.random() * 10 + 15);
            Velocity.setAngle(Math.PI * 1.35 + Math.random() * Math.PI * 0.30);
            this.velocity = Velocity;
 
            this.trail = Math.floor(Math.random() * 4) != 1;
            this.trailColor = this.trail ? randomColor() : undefined;
            this.trailWidth = 2;
 
            this.TimeCreated = new Date().getTime();
            this.TimeExpired = this.TimeCreated + (Math.random() * 5 + 7) * 100;
 
            this.BlastParticleCount = Math.floor(Math.random() * 50) + 25;
            this.funky = Math.floor(Math.random() * 5) == 1;
 
            this.exposionColor = randomColor();
        }
 
        draw() {
            context.strokeStyle = this.trailColor;
            context.lineWidth = this.trailWidth;
 
            let p = this.position,
                lp = this.lastPosition;
 
            context.beginPath();
            context.moveTo(lp.getX(), lp.getY());
            context.lineTo(p.getX(), p.getY());
            context.stroke();
        }
 
        funkyfire() {
            var funky = this.funky;
            for (var i = 0; i < Math.floor(Math.random() * 10); i++) {
                new BlastParticle({ firework: this, funky });
            }
        }
 
        explode() {
            var funky = this.funky;
            for (var i = 0; i < this.BlastParticleCount; i++) {
                new BlastParticle({ firework: this, funky });
            }
            this.deleteObject();
        }
 
        checkExpire() {
            let now = new Date().getTime();
            if (now >= this.TimeExpired) this.explode();
        }
 
        render() {
            if (this.trail) this.draw();
            if (this.funky) this.funkyfire();
            this.checkExpire();
        }}
 
 
    class BlastParticle extends PhysicsBody {
        constructor({ firework, funky }) {
            super();
            this.position = firework.position.duplicate();
 
            let Velocity = vector.create(0, 0);
            if (!this.funky) {
                Velocity.setLength(Math.random() * 6 + 2);
                Velocity.setAngle(Math.random() * Math.PI * 2);
            } else {
                Velocity.setLength(Math.random() * 3 + 1);
                Velocity.setAngle(firework.getAngle + Math.PI / 2 - Math.PI * 0.25 + Math.PI * .5);
            }
 
            this.velocity = Velocity;
 
            this.color = firework.exposionColor;
 
            this.particleSize = Math.random() * 4;
 
            this.TimeCreated = new Date().getTime();
            this.TimeExpired = this.TimeCreated + (Math.random() * 4 + 3.5) * 100;
        }
 
        draw() {
            context.strokeStyle = this.color;
            context.lineWidth = this.particleSize;
            let p = this.position,
                lp = this.lastPosition;
 
            context.beginPath();
            context.moveTo(lp.getX(), lp.getY());
            context.lineTo(p.getX(), p.getY());
            context.stroke();
        }
 
        checkExpire() {
            let now = new Date().getTime();
            if (now >= this.TimeExpired) this.deleteObject();
        }
 
        render() {
            this.draw();
            this.checkExpire();
        }}
 
 
    document.body.addEventListener('mousedown', function (e) {
        let color = randomColor();
        for (var i = 0; i < Math.floor(Math.random() * 20) + 25; i++) {
            new BlastParticle({
                firework: {
                    position: vector.create(e.pageX, e.pageY),
                    velocity: vector.create(0, 0),
                    exposionColor: color },
 
                funky: false });
 
        }
    });
 
    setInterval(function () {
        if (!startFireworks) return;
        for (var i = 0; i < Math.floor(Math.random() * 4); i++) {
            new firework();
        }
    }, 500);
 
    function cleanupObjects() {
        objects = objects.filter(o => o != undefined);
    }
 
    function loop() {
        context.fillStyle = 'rgba(0,0,0,0.085)';
        context.fillRect(0, 0, width, height);
 
        let unusedObjectCount = 0;
        objects.map(o => {
            if (!o) {unusedObjectCount++;return;}
            o.PhysicsUpdate();
            o.render();
        });
        if (unusedObjectCount > 100) cleanupObjects();
 
        requestAnimationFrame(loop);
    }
 
    loop();

javascript是一種什么語言

javascript是一種動態類型、弱類型的語言，基于對象和事件驅動并具有相對安全性并廣泛用于客戶端網頁開發的腳本語言，同時也是一種廣泛用于客戶端Web開發的腳本語言。它主要用來給HTML網頁添加動態功能，現在JavaScript也可被用于網絡服務器，如Node.js。

看完了這篇文章，相信你對“如何使用JavaScript實現新年賀卡特效”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！