程序员浪漫--恋爱计时器（动画网页 表白 情人节 礼物）

一、效果展示

戳链接预览效果：恋爱计时器

网页点开后，效果如下
第一部分用动画显示表情符号与当前时间；
第二部分显示恋爱的时间；
第三部分引用一段台词或者情诗。

二、核心代码

Drawing

 S.Drawing = (function () {
        var canvas,
            context,
            renderFn,
            requestFrame = window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback) {
                    window.setTimeout(callback, 1000 / 60);
                };

        return {
            init: function (el) {
                canvas = document.querySelector(el);
                context = canvas.getContext('2d');
                this.adjustCanvas();

                window.addEventListener('resize', function (e) {
                    S.Drawing.adjustCanvas();
                });
            },
            loop: function (fn) {
                renderFn = !renderFn ? fn : renderFn;
                this.clearFrame();
                renderFn();
                requestFrame.call(window, this.loop.bind(this));
            },
            adjustCanvas: function () {
                canvas.width = window.innerWidth - 80;
                canvas.height = window.innerHeight -340;
            },
            clearFrame: function () {
                context.clearRect(0, 0, canvas.width, canvas.height);
            },
            getArea: function () {
                return {w: canvas.width, h: canvas.height};
            },
            drawCircle: function (p, c) {
                context.fillStyle = c.render();
                context.beginPath();
                context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true);
                context.closePath();
                context.fill();
            }
        };
    }());

UI

S.UI = (function () {
        var interval,
            currentAction,
            time,
            maxShapeSize = 30,
            sequence = [],
            cmd = '#';

        function formatTime(date) {
            var h = date.getHours(),
                m = date.getMinutes(),
                m = m < 10 ? '0' + m : m;
            return h + ':' + m;
        }

        function getValue(value) {
            return value && value.split(' ')[1];
        }

        function getAction(value) {
            value = value && value.split(' ')[0];
            return value && value[0] === cmd && value.substring(1);
        }

        function timedAction(fn, delay, max, reverse) {
            clearInterval(interval);
            currentAction = reverse ? max : 1;
            fn(currentAction);

            if (!max || (!reverse && currentAction < max) || (reverse && currentAction > 0)) {
                interval = setInterval(function () {
                    currentAction = reverse ? currentAction - 1 : currentAction + 1;
                    fn(currentAction);

                    if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) {
                        clearInterval(interval);
                    }
                }, delay);
            }
        }

        function performAction(value) {
            var action,
                value,
                current;

            sequence = typeof (value) === 'object' ? value : sequence.concat(value.split('|'));

            timedAction(function (index) {
                current = sequence.shift();
                action = getAction(current);
                value = getValue(current);

                switch (action) {
                    case 'countdown':
                        value = parseInt(value) || 10;
                        value = value > 0 ? value : 10;

                        timedAction(function (index) {
                            if (index === 0) {
                                if (sequence.length === 0) {
                                    S.Shape.switchShape(S.ShapeBuilder.letter(''));
                                } else {
                                    performAction(sequence);
                                }
                            } else {
                                S.Shape.switchShape(S.ShapeBuilder.letter(index), true);
                            }
                        }, 1000, value, true);
                        break;

                    case 'rectangle':
                        value = value && value.split('x');
                        value = (value && value.length === 2) ? value : [maxShapeSize, maxShapeSize / 2];

                        S.Shape.switchShape(S.ShapeBuilder.rectangle(Math.min(maxShapeSize, parseInt(value[0])), Math.min(maxShapeSize, parseInt(value[1]))));
                        break;

                    case 'circle':
                        value = parseInt(value) || maxShapeSize;
                        value = Math.min(value, maxShapeSize);
                        S.Shape.switchShape(S.ShapeBuilder.circle(value));
                        break;

                    case 'time':
                        var t = formatTime(new Date());

                        if (sequence.length > 0) {
                            S.Shape.switchShape(S.ShapeBuilder.letter(t));
                        } else {
                            timedAction(function () {
                                t = formatTime(new Date());
                                if (t !== time) {
                                    time = t;
                                    S.Shape.switchShape(S.ShapeBuilder.letter(time));
                                }
                            }, 1000);
                        }
                        break;

                    default:
                        S.Shape.switchShape(S.ShapeBuilder.letter(current[0] === cmd ? 'HacPai' : current));
                }
            }, 2000, sequence.length);
        }

        return {
            simulate: function (action) {
                performAction(action);
            }
        };
    }());

源码下载与学习

CSDN下载：恋爱计时器（动画网页 表白 情人节 礼物）

戳链接预览效果：恋爱计时器