如何使用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

constcanvas=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=newDate('01/01/2020');letobjects=[],startFireworks=false,newYearAlready=false;functionrenderTimeLeft(){letdate=newDate();letdelta=Math.abs(newyear-date)/1000;lethours=Math.floor(delta/3600)%24;delta-=hours*3600;letminutes=Math.floor(delta/60)%60;delta-=minutes*60;letseconds=Math.floor(delta%60)+1;letstring='';letDaysLeft=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}&amp;${MinutesLeft}`;elseif(minutes>0)string=`${MinutesLeft}&amp;${SecondsLeft}`;elsestring=`${SecondsLeft}`;if(DaysLeft>0)string=DaysLeft+'days,'+string;string+='until2020';timeleft.innerHTML=string;}renderTimeLeft();setInterval(function(){letdate=newDate();if(date>=newyear){if(!newYearAlready){year.innerHTML='2022';startFireworks=true;timeleft.innerHTML='HappyNewYear!';}newYearAlready=true;}elserenderTimeLeft();},500);document.body.appendChild(canvas);functionrandom255(){returnMath.floor(Math.random()*100+155);}functionrandomColor(){letr=random255(),g=random255(),b=random255();return`rgb(${r},${g},${b})`;}classPhysicsBody{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;}}classfireworkextendsPhysicsBody{constructor(){super();this.position=vector.create(Math.random()*width,height);letVelocity=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=newDate().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;letp=this.position,lp=this.lastPosition;context.beginPath();context.moveTo(lp.getX(),lp.getY());context.lineTo(p.getX(),p.getY());context.stroke();}funkyfire(){varfunky=this.funky;for(vari=0;i<Math.floor(Math.random()*10);i++){newBlastParticle({firework:this,funky});}}explode(){varfunky=this.funky;for(vari=0;i<this.BlastParticleCount;i++){newBlastParticle({firework:this,funky});}this.deleteObject();}checkExpire(){letnow=newDate().getTime();if(now>=this.TimeExpired)this.explode();}render(){if(this.trail)this.draw();if(this.funky)this.funkyfire();this.checkExpire();}}classBlastParticleextendsPhysicsBody{constructor({firework,funky}){super();this.position=firework.position.duplicate();letVelocity=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=newDate().getTime();this.TimeExpired=this.TimeCreated+(Math.random()*4+3.5)*100;}draw(){context.strokeStyle=this.color;context.lineWidth=this.particleSize;letp=this.position,lp=this.lastPosition;context.beginPath();context.moveTo(lp.getX(),lp.getY());context.lineTo(p.getX(),p.getY());context.stroke();}checkExpire(){letnow=newDate().getTime();if(now>=this.TimeExpired)this.deleteObject();}render(){this.draw();this.checkExpire();}}document.body.addEventListener('mousedown',function(e){letcolor=randomColor();for(vari=0;i<Math.floor(Math.random()*20)+25;i++){newBlastParticle({firework:{position:vector.create(e.pageX,e.pageY),velocity:vector.create(0,0),exposionColor:color},funky:false});}});setInterval(function(){if(!startFireworks)return;for(vari=0;i<Math.floor(Math.random()*4);i++){newfirework();}},500);functioncleanupObjects(){objects=objects.filter(o=>o!=undefined);}functionloop(){context.fillStyle='rgba(0,0,0,0.085)';context.fillRect(0,0,width,height);letunusedObjectCount=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。