来源：http://www.hengtaiboyuan.com 作者：恒泰博远 时间：2016-02-29
每个人都有属于自己的爱情，那么追求爱情，怎么给自己心爱的女孩子制造浪漫，确是有不同的真心和创意体现，而做为程序员的们该如何发挥自己的优势呢？我看看下面这个程序员的浪漫程序员HTML5开发出来的爱心表白。
在线演示：http://www.html5tricks.com/demo/jiaoben1892/index.html
下载代码：http://zjdx1.sc.chinaz.com/Files/DownLoad/webjs1/201401/jiaoben1892.rar
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jquery+html5烂漫爱心表白动画-站长素材</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">*2013—02-14,</span><br/>
<spanclass="space"/><spanclass="comments">*2013-02-28.</span><br/>
<spanclass="space"/><spanclass="comments">*/</span><br/>
Boyname=<spanclass="keyword">Mr</span>LI<br/>
Girlname=<spanclass="keyword">Mrs</span>ZHANG<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,Iloveyouforever;<br/>
</div>
<divid="loveHeart">
<canvasid="garden"></canvas>
<divid="words">
<divid="messages">
亲爱的，这是我们相爱在一起的时光。
<divid="elapseClock"></div>
</div>
<divid="loveu">
爱你直到永永远远。<br/>
<divclass="signature">-李先生</div>
</div>
</div>
</div>
</div>
</div>
<scripttype="text/javascript">
varoffsetX=$("#loveHeart").width()/2;
varoffsetY=$("#loveHeart").height()/2-55;
vartogether=newDate();
together.setFullYear(2013,2,28);
together.setHours(20);
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();
},5000);
timeElapse(together);
setInterval(function(){
timeElapse(together);
},500);
adjustCodePosition();
$("#code").typewriter();
}
</script>
<divstyle="text-align:center;clear:both">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.不支持IE8及以下浏览器。</p>
<p>来源：<ahref="http://sc.chinaz.com/"target="_blank">站长素材</a></p>
</div>
</body>
</html>
关注恒泰博远官方微信，即可免费体验微信定制功能，HTML5营销游戏和场景应用，以及免费的微信企业号功能使用
想免费体验微信企业号，无需注册微信企业号、无需安装APP、也可体验，关注恒泰博远官方微信后，点击-企业号-快速体验，输入相关信息，即可免费体验。
恒泰博远为助力企业发展，旗下微赢企业号平台，所有功能免费用。想要开通企业号功能使用，请拨打：010-82969001
本文链接：http://www.hengtaiboyuan.com/jsdt/content_1274 转载请注明来自北京恒泰博远科技有限公司
您的位置 :