页面地址： http://myspace123.qiniudn.com/love/index.html
目录文件结构：
index.html
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>表白</title><!--引入开始--><link rel="stylesheet" type="text/CSS" href="style/style.css"><script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script><script type="text/Javascript" src="js/garden.js"></script><script type="text/javascript" src="js/functions.js"></script><!--引入结束--><audio src="musics/致爱丽丝.mp3" autoplay="autoplay">您使用的浏览器不支持HTML5!</audio> </head><body oncontextmenu="return false" ondragstart="return false" style="zoom: 1;"><!-- 代码开始 --><div id="mainDiv"><div id="content" style="width: 1110px; height: 625px; margin-top: 10px; margin-left: 119.5px;"><div id="code" style="margin-top: 50px;"><span class="comments">我害怕，</span><br>我会永远是那孤独的根号三。<br><span class="comments">三本身是一个多么美妙的数字，</span><br>我的这个三，<br><span class="comments">为何躲在那难看的根号下。</span><br>我多么希望自己是一个九，<br><span class="comments">因为九只需要一点点小小的运算，</span><br>便可摆脱这残酷的厄运。<br><span class="comments">我知道自己很难再看到我的太阳.</span><br>就像这无休无止的 1.7321...<br> <span class="comments">我不愿我的人生如此可悲。</span><br>直到那一天，<br> <span class="comments">我看到了，</span><br>另一个根号三。<br> <span class="comments">如此美丽无瑕，</span><br>翩翩舞动而来，<br> <span class="comments">我们彼此相乘，</span><br>得到那梦寐以求的数字，<br> <span class="comments">像整数一样圆满。</span><br>我们砸碎命运的枷锁，<br> <span class="comments">轻轻舞动爱情的魔杖。</span><br>我们的平方根，已经解开。<br> <span class="comments">我的爱，重获新生。</span><br>我无法保证能给你童话般的世界，<br> <span class="comments">也无法保证自己能在一夜之间长大。</span><br>但是我保证，<br> <span class="comments">你可以像公主一样永远生活在自由，幸福之中。</span><br><br>I want to say:<br><span class="keyWord">for</span> (<span class="keyword">int</span> i=0;;i++) <span class="keyword">PRintf</span>("<span class="comments">I Love You!</span>");<br> <span class="keyword">爱你！</span></span></span></span></span></span></span></div> <div id="loveHeart"> <div id="messages" style="display: block;"> <canvas id="garden"></canvas> <div id="words"><div id="messages"><div id="elapseClock"></div></div><div id="loveu">爱你直到永永远远。<br/><div class="signature">- 谢超然作</div></div> <div id="words"></div> </div></div></div></div><!-- 代码结束 --><script type="text/javascript">var offsetX = $("#loveHeart").width() / 2;var offsetY = $("#loveHeart").height() / 2 - 55;var together = new Date();together.setFullYear(2001, 1, 1);together.setHours(20);together.setMinutes(0);together.setSeconds(0);together.setMilliseconds(0);if (!document.createElement('canvas').getContext) {var msg = document.createElement("div");msg.id = "errorMsg";msg.innerHTML = "您使用的浏览器不支持HTML5!"; 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></body></html>
jquery/jquery-1.8.3.min.js
js/functions.js
var $window = $(window), gardenCtx, gardenCanvas, $garden, garden;var clientWidth = $(window).width();var clientHeight = $(window).height();$(function () { // setup garden $loveHeart = $("#loveHeart"); var offsetX = $loveHeart.width() / 2; var offsetY = $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)); // renderLoop setInterval(function () { garden.render(); }, Garden.options.growSpeed);});$(window).resize(function() { var newWidth = $(window).width(); var newHeight = $(window).height(); if (newWidth != clientWidth && newHeight != clientHeight) { location.replace(location); }});function getHeartPoint(angle) { var t = angle / Math.PI; var x = 19.5 * (16 * Math.pow(Math.sin(t), 3)); var y = - 20 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)); return new Array(offsetX + x, offsetY + y);}function startHeartAnimation() { var interval = 50; var angle = 10; var heart = new Array(); var animationTimer = setInterval(function () { var bloom = getHeartPoint(angle); var draw = true; for (var i = 0; i < heart.length; i++) { var p = heart[i]; var distance = 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(''); var timer = setInterval(function() { var current = 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); }); return this; };})(jQuery);function timeElapse(date){ var current = Date(); var seconds = (Date.parse(current) - Date.parse(date)) / 1000; var days = Math.floor(seconds / (3600 * 24)); seconds = seconds % (3600 * 24); var hours = Math.floor(seconds / 3600); if (hours < 10) { hours = "0" + hours; } seconds = seconds % 3600; var minutes = Math.floor(seconds / 60); if (minutes < 10) { minutes = "0" + minutes; } seconds = seconds % 60; if (seconds < 10) { seconds = "0" + seconds; } var result = "<span class=/"digit/">" + days + "</span> days <span class=/"digit/">" + hours + "</span> hours <span class=/"digit/">" + minutes + "</span> minutes <span class=/"digit/">" + seconds + "</span> seconds"; $("#elapseClock").html(result);}function showMessages() { adjustWordsPosition(); $('#messages').fadeIn(5000, function() { showLoveU(); });}function adjustWordsPosition() { $('#words').css("position", "absolute
新闻热点
疑难解答
