最近用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
}
}
};
效果图: