最近用H5做了一个浪漫的页面，用于record our love，

这个页面特适合程序员表白、记录爱情故事、送女友礼物...

如果你也有个女朋友的话，那么可以认真看看下面的代码，或许会对你有帮助哦！

 

字母动画

打开后，可以看到页面的字母是一个字一个字敲出来的，这实际上是利用了一个定时器来实现的。

(function (a) {
	a.fn.typewriter = function () {
		this.each(function () {
			var d = a(this), c = d.html(), b = 0;
			d.html("");
			var e = setInterval(function () {
				var f = c.substr(b, 1);
				if (f == "<") {
					b = c.indexOf(">", b) + 1
				} else {
					b++
				}
				d.html(c.substring(0, b) + (b & 1 ? "_" : ""));
				if (b >= c.length) {
					clearInterval(e)
				}
			}, 75)
		});
		return this
	}
})(jQuery);

 纪念日倒计时

实现方式：首先定义好你们的纪念日，然后获取当前系统时间，然后计算秒数差值，然后将其转化为天数、小时数即可，

关键核心代码实现如下：

function timeElapse(c) {
	var e = Date();
	var f = (Date.parse(e) - Date.parse(c)) / 1000;
	var g = Math.floor(f / (3600 * 24));
	f = f % (3600 * 24);
	var b = Math.floor(f / 3600);
	if (b < 10) {
		b = "0" + b
	}
	f = f % 3600;
	var d = Math.floor(f / 60);
	if (d < 10) {
		d = "0" + d
	}
	f = f % 60;
	if (f < 10) {
		f = "0" + f
	}
	var a = '<span class="digit">' + g + '</span> days <span class="digit">' + b + '</span> hours <span class="digit">' + d + '</span> minutes <span class="digit">' + f + "</span> seconds";
	$("#elapseClock").html(a)
}

 通过一个定时器来实现的时间刷新，每隔 500 毫秒调用一次：

setInterval(function () {
			timeElapse(together);
		}, 500);

 动画心形

实现方式：画的时候巧妙的利用了贝塞尔曲线来绘制一个心形，同时在在画的过程中还加了花开的效果，花开的效果使用了随机数和随机颜色生成。

其中动画画心形的核心代码如下：

Petal.prototype = {
	draw: function () {
		var a = this.bloom.garden.ctx;
		var e, d, c, b;
		e = new Vector(0, this.r).rotate(Garden.degrad(this.startAngle));
		d = e.clone().rotate(Garden.degrad(this.angle));
		c = e.clone().mult(this.stretchA);
		b = d.clone().mult(this.stretchB);
		a.strokeStyle = this.bloom.c;
		a.beginPath();
		a.moveTo(e.x, e.y);
		a.bezierCurveTo(c.x, c.y, b.x, b.y, d.x, d.y);
		a.stroke()
	}, render: function () {
		if (this.r <= this.bloom.r) {
			this.r += this.growFactor;
			this.draw()
		} else {
			this.isfinished = true
		}
	}
};

 

效果图：