做的一个HTML表白页面
页面地址： http://swopl.xicp.net/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");
$('#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);
}
js\garden.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);
}
};
musics\致爱丽丝.mp3
致爱丽丝--贝多芬
style\style.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:;
}
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:;
padding:;
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:;
}
#copyright a {
color:#666;
}
做的一个HTML表白页面的更多相关文章
- 分享学做的一个jsp注册页面
分享一个自己学习时,用bootstrap,多方搜索做的注册页面,包括页面的非空验证.导入相关的bootstrap的js和css文件就可以了.背景很丑,可以自己换一个.后面进一步完善<(￣︶￣)↗ ...
- 今天用css做了一个QQ登录页面
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 用js给闺女做了一个加减乘除的html
下班回家用二十分钟给闺女做了一个加减乘除的页面,顺便记录下代码,时间仓促,后期再来修改吧 目录结构 -yq --menu.html --yq.html --yq50.html --yq70.html ...
- 领导让我重新做一个微信H5页面！
leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...
- 自定义Jquery插件——由于项目需要，对页面中过长的文本进行截取，鼠标移上去有一个title的提示，所以做了一个Jquery过长文本处理的插件
由于项目需要,对页面中过长的文本进行截取,鼠标移上去有一个title的提示,所以做了一个Jquery过长文本处理的插件下面是代码: // 掉用方式支持 $('select').textBeauty(1 ...
- 动手做第一个Chrome插件
Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...
- 做为一个前端工程师，是往node方面转，还是往HTML5方面转
文章背景:问题本身来自于知乎,但是我感觉这个问题很典型,有必要把问题在整理一下,重新分享出来. 当看到这个问题之前,我也碰到过很多有同样疑惑的同学,他们都有一个共同的疑问该学php还是nodejs,包 ...
- 用MVVM做了一个保存网页的工具-上篇
前言: 你是否有过收藏了别人博客或文章,当想用的时候却找不到?你是否有过收藏了别人博客或文章,却因为没有网络而打不开网页?OK,下面是我做的一个工具,有兴趣的同学们可以download 玩下,哈哈^. ...
- 开发日志系列：一个表单页面的呈现与提交（一）——JSON的操作
JSON操作 引子 最近在做一个表单页面,大概是这个样子的 这里打算用一个JSON存储所有的信息,我们可以理解为,所有东西都存在一个字符串里面.方便,快捷,易读,数据库操作也方便了.甚至,可以将很多不 ...
随机推荐
- react-native 学习之Image篇
/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import Rea ...
- Hibernate之HQL添加过滤器查询的用法
HQL查询过程中支持添加过滤器.使用步骤是这样的: 首先在要查询的实体对象的映射中使用<filter-def>标签配置过滤器,并在相对应的<class>标签中添加对应的< ...
- DotNet常用排序算法总结
数据结构和算法对一个程序来说是至关重要的,现在介绍一下几种算法,在项目中较为常用的算法有:冒泡排序,简单选择排序,直接插入排序,希尔排序,堆排序,归并排序,快速排序等7中算法. 现在介绍选择排序算法, ...
- Guava学习-缓存
Guava的缓存是本地缓存,所以我觉得在使用场景上适合那种并非是高一致性的场景中,而且他的实现和ConcurrentHashMap很类似.但是毕竟是缓存嘛,肯定有自动清除的功能.外加一些什么清除策略等 ...
- nginx root和alias指令的区别
# alias location /js/{ alias /static/;}#上述配置,访问/js/目录的时候,nginx自动会去找/static/下面的文件 # rootlocation /js/ ...
- java package一些试验
目录如上图,当前目录下,b是文件夹, a是文件夹. B.java 源码如下: package b; import a.*; public class B{ public static void mai ...
- PHP页面跳转（PHP笔记）
目前学习到三种方法: 1.调用js跳转 2.header()跳转 3.调用HTML方法实现 因为一直在自己学习没有进入项目,并不知道哪个更常使用. 调用js跳转. <?php //这里是跳转方法 ...
- python tornado websocket 实时日志展示
一.主题:实时展示服务器端动态生成的日志文件 二.流程: 1. 客户端浏览器与服务器建立websocket 链接,服务器挂起保存链接实例,等待新内容触发返回动作 2. 日志服务器脚本循环去发现新内容, ...
- 弄一个ajax笔记方便查询-$.ajax()
$.ajax()是所有ajax方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装.这个方法只有一个参数,传递一个各个功能键值对的对象. $.ajax()方法对象参数表: 参数 类型 说 ...
- jQuery网站顶部定时折叠广告
效果体验:http://hovertree.com/texiao/jquery/4.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...