html爱心表白源码怎么做？程序员浪漫起来没文科生什么事
html爱心表白源码怎么做？程序员浪漫起来没文科生什么事<!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" /> <title>Love</title> <style type="text/css"> @font-face { font-family: digit; src: url('digital-7_mono.ttf') forma
都说程序员是大大的直男，但是一旦程序员浪漫起来，他们会用他们狂拽酷炫吊的技能展现自己的罗曼蒂克实力，那时候就真的没文科男什么事啦！下面我就跟大家分享如何用简单的html制作一个网页版的爱心表白，不管你是不是程序员都能用，手机就可展示。
先来看下效果：
后面会提供给大家源代码，在这里先交大家怎么去根据自己的实际情况去改这个文件。
复制源代码首先大家将我后面的源代码复制下来并且粘贴进一个txt文件就可以。
jquery.js下载不要看到下载就害怕，这个大家只要搜索jquery就能下载了，下载完是一个jquery.js文件，将文件改名为jquery.txt，双击打开将内容复制到下图所示位置。（如果有人不会下，可以私信我索要）
大家根据自己的实际请款更改页面的一些信息，比如姓名，日期、或者是表白内容都可以
最后奉上源码，这里是没有jquery.js的，已经预留空，需要大家复制粘贴进来就行了，最后将txt文件的后缀改为.html就可以了，不管是电脑还是手机都能用哦。
<!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" /> <title>Love</title> <style type="text/css"> @font-face { font-family: digit; src: url('digital-7_mono.ttf') format("truetype"); } 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:#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} </style> <script language="javascript" type="text/javascript"> </script> <script language="javascript" type="text/javascript"> function Vector(x y) { this.x = x; this.y = y; }; Vector.prototype = { rotate: function (theta) { var x = this.x; var y = this.y; this.x = Math.cos(theta) * x - Math.sin(theta) * y; this.y = Math.sin(theta) * x Math.cos(theta) * y; return this; } mult: function (f) { this.x *= f; this.y *= f; 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 (v) { this.x -= v.x; this.y -= v.y; return this; } set: function (x y) { this.x = x; this.y = y; return this; } }; function Petal(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 () { var ctx = this.bloom.garden.ctx; var v1 v2 v3 v4; v1 = new Vector(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; } } } function Bloom(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 () { var p isfinished = true; this.garden.ctx.save(); this.garden.ctx.translate(this.p.x this.p.y); for (var i = 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 () { var angle = 360 / this.pc; var startAngle = Garden.randomInt(0 90); for (var i = 0; i < this.pc; i ) { 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) startAngle i * angle angle Garden.random(Garden.options.growFactor.min Garden.options.growFactor.max) this)); } } } function Garden(ctx element) { this.blooms = []; this.element = element; this.ctx = ctx; } Garden.prototype = { render: function () { for (var i = 0; i < this.blooms.length; i ) { this.blooms[i].draw(); } } addBloom: function (b) { this.blooms.push(b); } removeBloom: function (b) { var bloom; for (var i = 0; i < this.blooms.length; i ) { bloom = this.blooms[i]; if (bloom === b) { this.blooms.splice(i 1); return this; } } } 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) { new Bloom(new Vector(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) { return Math.random() * (max - min) min; }; Garden.randomInt = function (min max) { return Math.floor(Math.random() * (max - min 1)) min; }; Garden.circle = 2 * Math.PI; Garden.degrad = function (angle) { return Garden.circle / 360 * angle; }; Garden.raddeg = function (angle) { return angle / 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) { var r = Math.round(Garden.random(rmin rmax)); var g = Math.round(Garden.random(gmin gmax)); var b = Math.round(Garden.random(bmin bmax)); var limit = 5; if (Math.abs(r - g) <= limit && Math.abs(g - b) <= limit && Math.abs(b - r) <= limit) { return Garden.rgba(rmin rmax gmin gmax bmin bmax a); } else { return Garden.rgba(r g b a); } }; function Vector(x y) { this.x = x; this.y = y; }; Vector.prototype = { rotate: function (theta) { var x = this.x; var y = this.y; this.x = Math.cos(theta) * x - Math.sin(theta) * y; this.y = Math.sin(theta) * x Math.cos(theta) * y; return this; } mult: function (f) { this.x *= f; this.y *= f; 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 (v) { this.x -= v.x; this.y -= v.y; return this; } set: function (x y) { this.x = x; this.y = y; return this; } }; function Petal(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 () { var ctx = this.bloom.garden.ctx; var v1 v2 v3 v4; v1 = new Vector(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; } } } function Bloom(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 () { var p isfinished = true; this.garden.ctx.save(); this.garden.ctx.translate(this.p.x this.p.y); for (var i = 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 () { var angle = 360 / this.pc; var startAngle = Garden.randomInt(0 90); for (var i = 0; i < this.pc; i ) { 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) startAngle i * angle angle Garden.random(Garden.options.growFactor.min Garden.options.growFactor.max) this)); } } } function Garden(ctx element) { this.blooms = []; this.element = element; this.ctx = ctx; } Garden.prototype = { render: function () { for (var i = 0; i < this.blooms.length; i ) { this.blooms[i].draw(); } } addBloom: function (b) { this.blooms.push(b); } removeBloom: function (b) { var bloom; for (var i = 0; i < this.blooms.length; i ) { bloom = this.blooms[i]; if (bloom === b) { this.blooms.splice(i 1); return this; } } } 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) { new Bloom(new Vector(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) { return Math.random() * (max - min) min; }; Garden.randomInt = function (min max) { return Math.floor(Math.random() * (max - min 1)) min; }; Garden.circle = 2 * Math.PI; Garden.degrad = function (angle) { return Garden.circle / 360 * angle; }; Garden.raddeg = function (angle) { return angle / 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) { var r = Math.round(Garden.random(rmin rmax)); var g = Math.round(Garden.random(gmin gmax)); var b = Math.round(Garden.random(bmin bmax)); var limit = 5; if (Math.abs(r - g) <= limit && Math.abs(g - b) <= limit && Math.abs(b - r) <= limit) { return Garden.rgba(rmin rmax gmin gmax bmin bmax a); } else { return Garden.rgba(r g b a); } }; </script> <script language="javascript" type="text/javascript"> 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"); $('#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> </head> <body> <div style="text-align:center;clear:both;"> <script src="https://img.aigexing.com/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="https://img.aigexing.com/follow.js" type="text/javascript"></script> </div> <div id="mainDiv"> <div id="content"> <div id="code"> <span class="comments">/**</span><br /> <span class="space"/><span class="comments">*2009—01-01 </span><br /> <span class="space"/><span class="comments">*2009-01-01.</span><br /> <span class="space"/><span class="comments">*/</span><br /> Boy name = <span class="keyword">Mr</span> A<br /> Girl name = <span class="keyword">Mrs</span> B<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 100 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"></canvas> <div id="words"> <div id="messages"> 亲爱的，这是我们相爱在一起的时光。 <div id="elapseClock"></div> </div> <div id="loveu"> 爱你直到永永远远。<br/> <div class="signature">- A先生</div> </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(2009 01 01); 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 = "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(); } </script> </body> </html>
