怎么用HTML+CSS+JavaScript实现在线表白神器

2024-10-26 技术教程

这篇文章主要介绍了怎么用HTML+CSS+JavaScript实现在线表白神器的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么用HTML+CSS+JavaScript实现在线表白神器文章都会有所收获，下面我们一起来看看吧。

HTML源码：

<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>W3Cschool-亿速云</title><styletype="text/css">@font-face{font-family:digit;src:url('digital-7_mono.ttf')format("truetype");}</style><linkhref="css/default.css"type="text/css"rel="stylesheet"><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript"src="js/garden.js"></script><scripttype="text/javascript"src="js/functions.js"></script></head><body><divid="mainDiv"><divid="content"><divid="code"><spanclass="comments">/**</span><br/><spanclass="space"/><spanclass="comments">*2020—02-19,</span><br/><spanclass="space"/><spanclass="comments">*2021_03_09.</span><br/><spanclass="space"/><spanclass="comments">*/</span><br/>Boyname=<spanclass="keyword">Mr</span>Leo<br/>Girlname=<spanclass="keyword">Mrs</span>Jenny<br/><spanclass="comments">//Fallinloveriver.</span><br/>Theboylovethegirl;<br/><spanclass="comments">//Theyloveeachother.</span><br/>Thegirllovedtheboy;<br/><spanclass="comments">//AStimegoeson.</span><br/>Theboycannotbeseparatedthegirl;<br/><spanclass="comments">//Atthesametime.</span><br/>Thegirlcannotbeseparatedtheboy;<br/><spanclass="comments">//Bothwindandsnowalloverthesky.</span><br/><spanclass="comments">//Whetheronfootor5kilometers.</span><br/><spanclass="keyword">Theboy</span>very<spanclass="keyword">happy</span>;<br/><spanclass="keyword">Thegirl</span>isalsovery<spanclass="keyword">happy</span>;<br/><spanclass="placeholder"/><spanclass="comments">//Whetheritisrightnow</span><br/><spanclass="placeholder"/><spanclass="comments">//Stillinthedistantfuture.</span><br/><spanclass="placeholder"/>Theboyhasbutonedream;<br/><spanclass="comments">//Theboywantsthegirlcouldwellhavebeenhappy.</span><br/><br><br>Iwanttosay:<br/>Baby,Iwouldloveyouforever;<br/></div><divid="loveHeart"><canvasid="garden"></canvas><divid="words"><divid="messages">亲爱的，这是我们在一起走过的时光。<divid="elapseClock"></div></div><divid="loveu">Loveyouforever!!!<br/><divclass="signature">-Loving</div></div></div></div></div></div><scripttype="text/javascript">varoffsetX=$("#loveHeart").width()/2;varoffsetY=$("#loveHeart").height()/2-55;vartogether=newDate();together.setFullYear(2020,01,19);//月份一栏的数据填入是0-11，即01为2月份。together.setHours(0);together.setMinutes(0);together.setSeconds(0);together.setMilliseconds(0);if(!document.createElement('canvas').getContext){varmsg=document.createElement("div");msg.id="errorMsg";msg.innerHTML="Yourbrowserdoesn'tsupportHTML5!<br/>RecommenduseChrome14+/IE9+/Firefox7+/Safari4+";document.body.appendChild(msg);$("#code").css("display","none")$("#copyright").css("position","absolute");$("#copyright").css("bottom","10px");document.execCommand("stop");}else{setTimeout(function(){startHeartAnimation();},3000);timeElapse(together);setInterval(function(){timeElapse(together);//elapse:计算时间差函数；},500);adjustCodePosition();$("#code").typewriter();}</script></body></html>

css源码：

body{margin:0;padding:0;background:#ffe;font-size:12px;overflow:auto}#mainDiv{width:100%;height:100%}#loveHeart{float:left;width:670px;height:625px}#garden{width:100%;height:100%}#elapseClock{text-align:right;font-size:18px;margin-top:10px;margin-bottom:10px}#words{font-family:"sans-serif";width:500px;font-size:24px;color:#666}#messages{display:none}#elapseClock.digit{font-family:"digit";font-size:36px}#loveu{padding:5px;font-size:22px;margin-top:80px;margin-right:120px;text-align:right;display:none}#loveu.signature{margin-top:10px;font-size:20px;font-style:italic}#clickSound{display:none}#code{float:left;width:440px;height:400px;color:#333;font-family:"Consolas","Monaco","BitstreamVeraSansMono","CourierNew","sans-serif";font-size:12px}#code.string{color:#2a36ff}#code.keyword{color:#7f0055;font-weight:bold}#code.placeholder{margin-left:15px}#code.space{margin-left:7px}#code.comments{color:#3f7f5f}#copyright{margin-top:10px;text-align:center;width:100%;color:#666}#errorMsg{width:100%;text-align:center;font-size:24px;position:absolute;top:100px;left:0}#copyrighta{color:#666}

JavaScript源码：

//function.jsvar$window=$(window),gardenCtx,gardenCanvas,$garden,garden;varclientWidth=$(window).width();varclientHeight=$(window).height();$(function(){//setupgarden$loveHeart=$("#loveHeart");varoffsetX=$loveHeart.width()/2;varoffsetY=$loveHeart.height()/2-55;$garden=$("#garden");gardenCanvas=$garden[0];gardenCanvas.width=$("#loveHeart").width();gardenCanvas.height=$("#loveHeart").height()gardenCtx=gardenCanvas.getContext("2d");gardenCtx.globalCompositeOperation="lighter";garden=newGarden(gardenCtx,gardenCanvas);$("#content").css("width",$loveHeart.width()+$("#code").width());$("#content").css("height",Math.max($loveHeart.height(),$("#code").height()));$("#content").css("margin-top",Math.max(($window.height()-$("#content").height())/2,10));$("#content").css("margin-left",Math.max(($window.width()-$("#content").width())/2,10));//renderLoopsetInterval(function(){garden.render();},Garden.options.growSpeed);});$(window).resize(function(){varnewWidth=$(window).width();varnewHeight=$(window).height();if(newWidth!=clientWidth&&newHeight!=clientHeight){location.replace(location);}});functiongetHeartPoint(angle){vart=angle/Math.PI;varx=19.5*(16*Math.pow(Math.sin(t),3));vary=-20*(13*Math.cos(t)-5*Math.cos(2*t)-2*Math.cos(3*t)-Math.cos(4*t));returnnewArray(offsetX+x,offsetY+y);}functionstartHeartAnimation(){varinterval=50;varangle=10;varheart=newArray();varanimationTimer=setInterval(function(){varbloom=getHeartPoint(angle);vardraw=true;for(vari=0;i<heart.length;i++){varp=heart[i];vardistance=Math.sqrt(Math.pow(p[0]-bloom[0],2)+Math.pow(p[1]-bloom[1],2));if(distance<Garden.options.bloomRadius.max*1.3){draw=false;break;}}if(draw){heart.push(bloom);garden.createRandomBloom(bloom[0],bloom[1]);}if(angle>=30){clearInterval(animationTimer);showMessages();}else{angle+=0.2;}},interval);}(function($){$.fn.typewriter=function(){this.each(function(){var$ele=$(this),str=$ele.html(),progress=0;$ele.html('');vartimer=setInterval(function(){varcurrent=str.substr(progress,1);if(current=='<'){progress=str.indexOf('>',progress)+1;}else{progress++;}$ele.html(str.substring(0,progress)+(progress&1?'_':''));if(progress>=str.length){clearInterval(timer);}},75);});returnthis;};})(jQuery);functiontimeElapse(date){varcurrent=Date();varseconds=(Date.parse(current)-Date.parse(date))/1000;vardays=Math.floor(seconds/(3600*24));seconds=seconds%(3600*24);varhours=Math.floor(seconds/3600);if(hours<10){hours="0"+hours;}seconds=seconds%3600;varminutes=Math.floor(seconds/60);if(minutes<10){minutes="0"+minutes;}seconds=seconds%60;if(seconds<10){seconds="0"+seconds;}varresult="<spanclass=\"digit\">"+days+"</span>days<spanclass=\"digit\">"+hours+"</span>hours<spanclass=\"digit\">"+minutes+"</span>minutes<spanclass=\"digit\">"+seconds+"</span>seconds";$("#elapseClock").html(result);}functionshowMessages(){adjustWordsPosition();$('#messages').fadeIn(5000,function(){showLoveU();});}functionadjustWordsPosition(){$('#words').css("position","absolute");$('#words').css("top",$("#garden").position().top+195);$('#words').css("left",$("#garden").position().left+70);}functionadjustCodePosition(){$('#code').css("margin-top",($("#garden").height()-$("#code").height())/2);}functionshowLoveU(){$('#loveu').fadeIn(3000);}

//garden.jsfunctionVector(x,y){this.x=x;this.y=y;};Vector.prototype={rotate:function(theta){varx=this.x;vary=this.y;this.x=Math.cos(theta)*x-Math.sin(theta)*y;this.y=Math.sin(theta)*x+Math.cos(theta)*y;returnthis;},mult:function(f){this.x*=f;this.y*=f;returnthis;},clone:function(){returnnewVector(this.x,this.y);},length:function(){returnMath.sqrt(this.x*this.x+this.y*this.y);},subtract:function(v){this.x-=v.x;this.y-=v.y;returnthis;},set:function(x,y){this.x=x;this.y=y;returnthis;}};functionPetal(stretchA,stretchB,startAngle,angle,growFactor,bloom){this.stretchA=stretchA;this.stretchB=stretchB;this.startAngle=startAngle;this.angle=angle;this.bloom=bloom;this.growFactor=growFactor;this.r=1;this.isfinished=false;//this.tanAngleA=Garden.random(-Garden.degrad(Garden.options.tanAngle),Garden.degrad(Garden.options.tanAngle));//this.tanAngleB=Garden.random(-Garden.degrad(Garden.options.tanAngle),Garden.degrad(Garden.options.tanAngle));}Petal.prototype={draw:function(){varctx=this.bloom.garden.ctx;varv1,v2,v3,v4;v1=newVector(0,this.r).rotate(Garden.degrad(this.startAngle));v2=v1.clone().rotate(Garden.degrad(this.angle));v3=v1.clone().mult(this.stretchA);//.rotate(this.tanAngleA);v4=v2.clone().mult(this.stretchB);//.rotate(this.tanAngleB);ctx.strokeStyle=this.bloom.c;ctx.beginPath();ctx.moveTo(v1.x,v1.y);ctx.bezierCurveTo(v3.x,v3.y,v4.x,v4.y,v2.x,v2.y);ctx.stroke();},render:function(){if(this.r<=this.bloom.r){this.r+=this.growFactor;///10;this.draw();}else{this.isfinished=true;}}}functionBloom(p,r,c,pc,garden){this.p=p;this.r=r;this.c=c;this.pc=pc;this.petals=[];this.garden=garden;this.init();this.garden.addBloom(this);}Bloom.prototype={draw:function(){varp,isfinished=true;this.garden.ctx.save();this.garden.ctx.translate(this.p.x,this.p.y);for(vari=0;i<this.petals.length;i++){p=this.petals[i];p.render();isfinished*=p.isfinished;}this.garden.ctx.restore();if(isfinished==true){this.garden.removeBloom(this);}},init:function(){varangle=360/this.pc;varstartAngle=Garden.randomInt(0,90);for(vari=0;i<this.pc;i++){this.petals.push(newPetal(Garden.random(Garden.options.petalStretch.min,Garden.options.petalStretch.max),Garden.random(Garden.options.petalStretch.min,Garden.options.petalStretch.max),startAngle+i*angle,angle,Garden.random(Garden.options.growFactor.min,Garden.options.growFactor.max),this));}}}functionGarden(ctx,element){this.blooms=[];this.element=element;this.ctx=ctx;}Garden.prototype={render:function(){for(vari=0;i<this.blooms.length;i++){this.blooms[i].draw();}},addBloom:function(b){this.blooms.push(b);},removeBloom:function(b){varbloom;for(vari=0;i<this.blooms.length;i++){bloom=this.blooms[i];if(bloom===b){this.blooms.splice(i,1);returnthis;}}},createRandomBloom:function(x,y){this.createBloom(x,y,Garden.randomInt(Garden.options.bloomRadius.min,Garden.options.bloomRadius.max),Garden.randomrgba(Garden.options.color.rmin,Garden.options.color.rmax,Garden.options.color.gmin,Garden.options.color.gmax,Garden.options.color.bmin,Garden.options.color.bmax,Garden.options.color.opacity),Garden.randomInt(Garden.options.petalCount.min,Garden.options.petalCount.max));},createBloom:function(x,y,r,c,pc){newBloom(newVector(x,y),r,c,pc,this);},clear:function(){this.blooms=[];this.ctx.clearRect(0,0,this.element.width,this.element.height);}}Garden.options={petalCount:{min:8,max:15},petalStretch:{min:0.1,max:3},growFactor:{min:0.1,max:1},bloomRadius:{min:8,max:10},density:10,growSpeed:1000/60,color:{rmin:128,rmax:255,gmin:0,gmax:128,bmin:0,bmax:128,opacity:0.1},tanAngle:60};Garden.random=function(min,max){returnMath.random()*(max-min)+min;};Garden.randomInt=function(min,max){returnMath.floor(Math.random()*(max-min+1))+min;};Garden.circle=2*Math.PI;Garden.degrad=function(angle){returnGarden.circle/360*angle;};Garden.raddeg=function(angle){returnangle/Garden.circle*360;};Garden.rgba=function(r,g,b,a){return'rgba('+r+','+g+','+b+','+a+')';};Garden.randomrgba=function(rmin,rmax,gmin,gmax,bmin,bmax,a){varr=Math.round(Garden.random(rmin,rmax));varg=Math.round(Garden.random(gmin,gmax));varb=Math.round(Garden.random(bmin,bmax));varlimit=5;if(Math.abs(r-g)<=limit&&Math.abs(g-b)<=limit&&Math.abs(b-r)<=limit){returnGarden.rgba(rmin,rmax,gmin,gmax,bmin,bmax,a);}else{returnGarden.rgba(r,g,b,a);}};

关于“怎么用HTML+CSS+JavaScript实现在线表白神器”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么用HTML+CSS+JavaScript实现在线表白神器”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。