console
var $window = $(window),
gardenCtx, gardenCanvas, $garden, garden;
var clientWidth = $(window).width();
var clientHeight = $(window).height();
$(function() {
$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));
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");
$('#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);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
<title>来自程序员的表白</title>
<style type="text/css">
@font-face {
font-family: digit;
src: url('digital-7_mono.ttf') format("truetype");
}
span{font-size: 10px;color:#fff}
body{background:#fff;}
</style>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/garden.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div class="bg">
<div id="mainDiv">
<div id="content">
<div id="code" style="width:200px">
<span class="comments">/**</span><br />
<span class="space"/><span class="comments">*2016—06-26,</span><br />
<span class="space"/><span class="comments">*To Now,</span><br />
<span class="space"/><span class="comments">*/</span><br />
Boy name = <span class="keyword">Mr</span> ZHANG<br />
Girl name = <span class="keyword">Mrs</span> HE<br />
<span class="comments">// Fall in love river. </span><br />
The boy love the girl;<br />
<span class="comments">// They love each other.</span><br />
The girl loved the boy;<br />
<span class="comments">// AS time goes on.</span><br />
The boy can not be separated the girl;<br />
<span class="comments">// At the same time.</span><br />
The girl can not be separated the boy;<br />
<span class="comments">// Both wind and snow all over the sky.</span><br />
<span class="comments">// Whether on foot or 5 kilometers.</span><br />
<span class="keyword">The boy</span> very <span class="keyword">happy</span>;<br />
<span class="keyword">The girl</span> is also very <span class="keyword">happy</span>;<br />
<span class="placeholder"/><span class="comments">// Whether it is right now</span><br />
<span class="placeholder"/><span class="comments">// Still in the distant future.</span><br />
<span class="placeholder"/>The boy has but one dream;<br />
<span class="comments">// The boy wants the girl could well have been happy.</span><br />
<br>
<br>
I want to say:<br />
Baby, I love you forever;<br />
</div>
<div id="loveHeart">
<canvas id="garden" style="width:80%;height:80%"></canvas>
<div id="words">
<div id="messages" style="font-size: 24px;margin-top: -46px;color:#fff">
亲爱的，这是我们相爱在一起的时光。
<div id="elapseClock" style="font-size: 12px;margin: 10px 100px 10px 0; "></div>
</div>
<div id="loveu" style="margin-top: 45px; margin-right: 120px;text-align: center;">
爱你直到永永远远。<br/>
<div class="signature">- 张先生</div>
</div>
</div>
</div>
</div>
</div>
<div>
<audio autoplay="autoplay" loop="loop">
<script type="text/javascript">
document.getElementById('bgaudio').play();
</script>
</audio>
</div>
</div>
<div class="wrapper">
<svg viewBox="0 0 600 300">
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="50%" dy=".35em">张彦   何忆帆</text>
</symbol>
<use xlink:href="#s-text" class="text"></use>
<use xlink:href="#s-text" class="text"></use>
<use xlink:href="#s-text" class="text"></use>
<use xlink:href="#s-text" class="text"></use>
<use xlink:href="#s-text" class="text"></use>
</svg>
</div>
<script type="text/javascript">
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
together.setFullYear(2018,01,08);
together.setHours(24);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);
if (!document.createElement('canvas').getContext) {
var msg = document.createElement("div");
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 () {
startHeartAnimation();
}, 5000);
timeElapse(together);
setInterval(function () {
timeElapse(together);
}, 500);
adjustCodePosition();
$("#code").typewriter();
}
var $window = $(window), gardenCtx, gardenCanvas, $garden, garden;
var clientWidth = $(window).width();
var clientHeight = $(window).height();
$(function () {
$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));
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");
$('#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);
}
</script>
</div>
</body>
</html>
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", "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: floralwhite
}
#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
}
.bg {
background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
background-color: #282828;
background-size: 16px 16px;
width: 250%;
height: 210%;
position: absolute;
z-index: -1
}
html,
body {
height: 100%;
font: 16px Microsoft YaHei;
}
* {
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
height: 100%;
left: -15%;
bottom: 42%;
}
.container {
width: 700px;
height: 450px;
background: rgba(255, 255, 255, .8);
border-radius: 2px;
box-shadow: 0 0 15px #ccc;
text-align: center;
padding: 20px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.text {
fill: none;
stroke-width: 1;
font-size: 35px;
stroke-linejoin: round;
stroke-dasharray: 70 330;
stroke-dashoffset: 0;
-webkit-animation: stroke 6s infinite linear;
animation: stroke 6s infinite linear;
}
.text:nth-child(5n + 1) {
stroke: #f2385a;
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
stroke: #f5a503;
-webkit-animation-delay: -2.4s;
animation-delay: -2.4s;
}
.text:nth-child(5n + 3) {
stroke: #e9f1df;
-webkit-animation-delay: -3.6s;
animation-delay: -3.6s;
}
.text:nth-child(5n + 4) {
stroke: #56d9cd;
-webkit-animation-delay: -4.8s;
animation-delay: -4.8s;
}
.text:nth-child(5n + 5) {
stroke: #3aa1bf;
-webkit-animation-delay: -6s;
animation-delay: -6s;
}
@-webkit-keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}
@keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}
svg {
width: 100%;
height: 100%;
position: absolute;
}
.bg{
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
width:250%;
height:210%;
position:absolute;
z-index:-1
}
html,body {
height: 100%;
font: 16px Microsoft YaHei;
}
* { margin: 0;padding: 0; }
.wrapper {
position: relative;
height: 100%;
left: -15%;
bottom:42%;
}
.container {
width: 700px;
height: 450px;
background: rgba(255,255,255,.8);
border-radius: 2px;
box-shadow: 0 0 15px #ccc;
text-align: center;
padding: 20px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.text {
fill: none;
stroke-width: 1;
font-size: 35px;
stroke-linejoin: round;
stroke-dasharray: 70 330;
stroke-dashoffset: 0;
-webkit-animation: stroke 6s infinite linear;
animation: stroke 6s infinite linear;
}
.text:nth-child(5n + 1) {
stroke: #f2385a;
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
stroke: #f5a503;
-webkit-animation-delay: -2.4s;
animation-delay: -2.4s;
}
.text:nth-child(5n + 3) {
stroke: #e9f1df;
-webkit-animation-delay: -3.6s;
animation-delay: -3.6s;
}
.text:nth-child(5n + 4) {
stroke: #56d9cd;
-webkit-animation-delay: -4.8s;
animation-delay: -4.8s;
}
.text:nth-child(5n + 5) {
stroke: #3aa1bf;
-webkit-animation-delay: -6s;
animation-delay: -6s;
}
@-webkit-keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}
@keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}
svg {
width: 100%;
height: 100%;
position: absolute;