Home >Web Front-end >HTML Tutorial >An HTML confession page made_html/css_WEB-ITnose
An HTML confession page made_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:132657browse
Page address: http://myspace123.qiniudn.com/love/index.html
Directory file structure:
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>
jqueryjquery-1.8.3.min.js
jsfunctions.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"); $('#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);} jsgarden.js
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); } }; musicsTo Alice.mp3
To Alice--Beethoven
stylestyle.css
@font-face { font-family: digit; src: url('digital-7_mono.ttf') format("truetype");}ul#wimoban_nav { padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; _zoom:1; }ul#wimoban_nav li{ float:left; display:inline; margin:10px; }ul#wimoban_nav li a{ display:block; font-size:16px; }ul#wimoban_nav li a,#wimoban_p,#wimoban_p a{ color:#000; font-family:"微软雅黑"; }ul#wimoban_nav li a:hover,#wimoban_p a:hover{ color:red; }#wimoban_p{ text-align:center; font-size:14px; clear:both; }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: 14px; }#code .string { color:#2a36ff; }#code .keyword{ color:#7f0055; font-weight:bold; }#code .placeholder{ margin-left:15px; }#code .space { margin-left:7px; }#code .comments { color: rgb(128,128,192); }#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; } Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Drop-down list box_html/css_WEB-ITnoseNext article：Drop-down list box_html/css_WEB-ITnose