程序员的浪漫故事

最近用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
		}
	}
};

 

效果图:

程序员的浪漫故事

 

上一篇:将8000秒换算成小时分钟秒的形式(C++)


下一篇:css 设置连续数字、连续英文字母强制换行和多行显示省略号的方法