如何使用JavaScript实现新年贺卡特效
短信预约 -IT技能 免费直播动态提醒
小编给大家分享一下如何使用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实现新年贺卡特效”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网行业资讯频道，感谢各位的阅读！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
