1. [文件] index.php
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>我们的爱</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
@font-face {
font-family: digit;
src: url('digital-7_mono.ttf') format("truetype");
}
</style>
<link href="style/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="style/jquery.js"></script>
<script type="text/javascript" src="style/garden.js"></script>
<script type="text/javascript" src="style/functions.js"></script>
</head>
<body>
<?php
if (!isset($_GET['g']) && !isset($_GET['b'])) {
?>
<form action='#' method='get' style="margin:0 auto;width:520px;">
<fieldset width="700px" height="700px">
<legend> 我们的爱 </legend>
<br />
男生姓名：<input id="boy" name='b' value=''>
<br />
<br />
女生姓名：<input id="girl" name='g' value=''>
<br />
<br />
<input type='button' name='submit' onclick="javascript:reg();" value='提交'>
</fieldset>
</form>
<script type="text/javascript">
function reg(){
var b = document.getElementById("boy").value;
var g = document.getElementById("girl").value;
if (b=='') {
alert("请填写男生姓名！");
return ;
}
if (g==''){
alert("请填写女生姓名！");
return ;
}
window.location.href="http://love.yearnfar.com/?b="+b+"&g="+g;
}
</script>
<?php
} else {
$girl = isset($_GET['g']) ? $_GET['g'] : 'girlName';
$boy = isset($_GET['b']) ? $_GET['b'] : 'boyName';
?>
<p id="mainp">
<a style="text-decoration:none;font-size:16px;margin-left:16px;" href="http://love.yearnfar.com">填写信息</a>
<p id="content">
<p id="code">
<span class="comments">/**</span><br />
<span class="space"/><span class="comments">* 我们都是XXX 的屌丝,</span><br />
<span class="space"/><span class="comments">* 所以我写一些代码来显示我对你的爱.</span><br />
<span class="space"/><span class="comments">*/</span><br />
Boy i = <span class="keyword">new</span> Boy(<span class="string">"<?php echo $boy;?>"</span>);<br />
Girl u = <span class="keyword">new</span> Girl(<span class="string">"<?php echo $girl;?>"</span>);<br />
<span class="comments">// <?php echo date('Y年m月d日'); ?>，我告诉你，我爱你. </span><br />
i.love(u);<br />
<span class="comments">// 但是......，你说这是什么意思，我们还是好朋友.</span><br />
u.sayOtherthing();<br />
<span class="comments">// 从那以后，我问你的原因。</span><br />
<span class="keyword">var</span> reason=i.ask(u);<br />
<span class="comments">// 你说我们没有充分理解对方。</span><br />
$("body").append(reason);<br />
<span class="comments">// 你说，这是我们太快成为情人关系。</span><br />
<span class="comments">// 并采取和我们爱的关怀。</span><br />
i.takeCareOf(u);<br />
<span class="comments">// 所以我一直在等待，我有信心，你会的。</span><br />
<span class="keyword">boolean</span> isAccept = <span class="keyword">false</span>;<br />
<span class="keyword">while</span> (isAccept) {<br />
<span class="placeholder"/>i.waitFor(u);<br />
<span class="placeholder"/><span class="comments">// 我认为这是一个重要的决定</span><br />
<span class="placeholder"/><span class="comments">// 你应该忘了之前不开心的事。</span><br />
<span class="placeholder"/>isAccept = u.thinkOver();<br />
}<br />
<span class="comments">// 经过一个爱的声音接受，我们将从此过幸福地生活在一起。</span><br />
u.accept(i);<br />
i.liveHappilyWith(u);<br />
</p>
<p id="loveHeart">
<canvas id="garden"></canvas>
<p id="words">
<p id="messages">
<center></center>
<?php echo $girl;?>，我爱你！520！
<p id="elapseClock" style="display:none"></p>
<a href='#' id="accept">如果接受我，点击我！</a>
</p>
<p id="loveu">
爱你，直到永远。<br/>
<p class="signature">- <?php echo $boy;?></p>
</p>
</p>
</p>
</p>
</p>
<script type="text/javascript">
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
if (!document.createElement('canvas').getContext) {
var msg = document.createElement("p");
msg.id = "errorMsg";
msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";
document.body.appendChild(msg);
$("#code").css("display", "none")
$("#copyright").css("position", "absolute");
$("#copyright").css("bottom", "10px");
document.execCommand("stop");
} else {
setTimeout(function () {
adjustWordsPosition();
startHeartAnimation();
}, 10000);
$("#accept").click(function(){
$(this).hide();
$("#elapseClock").show();
var together = new Date();
timeElapse(together);
setInterval(function () {
timeElapse(together);
}, 500);
})
adjustCodePosition();
$("#code").typewriter();
}
</script>
<?php } ?>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?873bd66e0c366c25266bac9623c4ab1b";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>/*Download by http://www.php.cn/*/
body{margin:0;padding:0;background:#ffe;font-size:12px;overflow:auto}#mainp{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:505px;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}#code{float:left;width:440px;height:400px;color:#333;font-family:"Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","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}#copyright a{color:#666}/*Download by http://www.php.cn/*/
var $window=$(window),gardenCtx,gardenCanvas,$garden,garden;var clientWidth=$(window).width();var clientHeight=$(window).height();$(function(){$loveHeart=$("#loveHeart");var a=$loveHeart.width()/2;var b=$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=new Garden(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));setInterval(function(){garden.render()},Garden.options.growSpeed)});$(window).resize(function(){var b=$(window).width();var a=$(window).height();if(b!=clientWidth&&a!=clientHeight){location.replace(location)}});function getHeartPoint(c){var b=c/Math.PI;var a=19.5*(16*Math.pow(Math.sin(b),3));var d=-20*(13*Math.cos(b)-5*Math.cos(2*b)-2*Math.cos(3*b)-Math.cos(4*b));return new Array(offsetX+a,offsetY+d)}function startHeartAnimation(){var c=50;var d=10;var b=new Array();var a=setInterval(function(){var h=getHeartPoint(d);var e=true;for(var f=0;f<b.length;f++){var g=b[f];var j=Math.sqrt(Math.pow(g[0]-h[0],2)+Math.pow(g[1]-h[1],2));if(j<Garden.options.bloomRadius.max*1.3){e=false;break}}if(e){b.push(h);garden.createRandomBloom(h[0],h[1])}if(d>=30){clearInterval(a);showMessages()}else{d+=0.2}},c)}(function(a){a.fn.typewriter=function(){this.each(function(){var d=a(this),c=d.html(),b=0;d.html("");var e=setInterval(function(){var f=c.substr(b,1);if(f=="<"){b=c.indexOf(">",b)+1}else{b++}d.html(c.substring(0,b)+(b&1?"_":""));if(b>=c.length){clearInterval(e)}},75)});return this}})(jQuery);function timeElapse(c){var e=Date();var f=(Date.parse(e)-Date.parse(c))/1000;var g=Math.floor(f/(3600*24));f=f%(3600*24);var b=Math.floor(f/3600);if(b<10){b="0"+b}f=f%3600;var d=Math.floor(f/60);if(d<10){d="0"+d}f=f%60;if(f<10){f="0"+f}var a='<span class="digit">'+g+'</span> 日 <span class="digit">'+b+'</span> 时 <span class="digit">'+d+'</span> 分 <span class="digit">'+f+"</span> 秒";$("#elapseClock").html(a)}function showMessages(){$("#messages").fadeIn(5000,function(){showLoveU()})}function adjustWordsPosition(){$("#words").css("position","absolute");$("#words").css("top",$("#garden").position().top+195);$("#words").css("left",$("#garden").position().left+70)}function adjustCodePosition(){$("#code").css("margin-top",($("#garden").height()-$("#code").height())/2)}function showLoveU(){$("#loveu").fadeIn(3000)};
/*Download by http://www.php.cn/*/
function Vector(a,b){this.x=a;this.y=b}Vector.prototype={rotate:function(b){var a=this.x;var c=this.y;this.x=Math.cos(b)*a-Math.sin(b)*c;this.y=Math.sin(b)*a+Math.cos(b)*c;return this},mult:function(a){this.x*=a;this.y*=a;return this},clone:function(){return new Vector(this.x,this.y)},length:function(){return Math.sqrt(this.x*this.x+this.y*this.y)},subtract:function(a){this.x-=a.x;this.y-=a.y;return this},set:function(a,b){this.x=a;this.y=b;return this}};function Petal(a,f,b,e,c,d){this.stretchA=a;this.stretchB=f;this.startAngle=b;this.angle=e;this.bloom=d;this.growFactor=c;this.r=1;this.isfinished=false}Petal.prototype={draw:function(){var a=this.bloom.garden.ctx;var e,d,c,b;e=new Vector(0,this.r).rotate(Garden.degrad(this.startAngle));d=e.clone().rotate(Garden.degrad(this.angle));c=e.clone().mult(this.stretchA);b=d.clone().mult(this.stretchB);a.strokeStyle=this.bloom.c;a.beginPath();a.moveTo(e.x,e.y);a.bezierCurveTo(c.x,c.y,b.x,b.y,d.x,d.y);a.stroke()},render:function(){if(this.r<=this.bloom.r){this.r+=this.growFactor;this.draw()}else{this.isfinished=true}}};function Bloom(e,d,f,a,b){this.p=e;this.r=d;this.c=f;this.pc=a;this.petals=[];this.garden=b;this.init();this.garden.addBloom(this)}Bloom.prototype={draw:function(){var c,b=true;this.garden.ctx.save();this.garden.ctx.translate(this.p.x,this.p.y);for(var a=0;a<this.petals.length;a++){c=this.petals[a];c.render();b*=c.isfinished}this.garden.ctx.restore();if(b==true){this.garden.removeBloom(this)}},init:function(){var c=360/this.pc;var b=Garden.randomInt(0,90);for(var a=0;a<this.pc;a++){this.petals.push(new Petal(Garden.random(Garden.options.petalStretch.min,Garden.options.petalStretch.max),Garden.random(Garden.options.petalStretch.min,Garden.options.petalStretch.max),b+a*c,c,Garden.random(Garden.options.growFactor.min,Garden.options.growFactor.max),this))}}};function Garden(a,b){this.blooms=[];this.element=b;this.ctx=a}Garden.prototype={render:function(){for(var a=0;a<this.blooms.length;a++){this.blooms[a].draw()}},addBloom:function(a){this.blooms.push(a)},removeBloom:function(a){var d;for(var c=0;c<this.blooms.length;c++){d=this.blooms[c];if(d===a){this.blooms.splice(c,1);return this}}},createRandomBloom:function(a,b){this.createBloom(a,b,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(a,f,d,e,b){new Bloom(new Vector(a,f),d,e,b,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(b,a){return Math.random()*(a-b)+b};Garden.randomInt=function(b,a){return Math.floor(Math.random()*(a-b+1))+b};Garden.circle=2*Math.PI;Garden.degrad=function(a){return Garden.circle/360*a};Garden.raddeg=function(a){return a/Garden.circle*360};Garden.rgba=function(f,e,c,d){return"rgba("+f+","+e+","+c+","+d+")"};Garden.randomrgba=function(i,n,h,m,l,d,k){var c=Math.round(Garden.random(i,n));var f=Math.round(Garden.random(h,m));var j=Math.round(Garden.random(l,d));var e=5;if(Math.abs(c-f)<=e&&Math.abs(f-j)<=e&&Math.abs(j-c)<=e){return Garden.rgba(i,n,h,m,l,d,k)}else{return Garden.rgba(c,f,j,k)}};
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
