Make an HTML confession page

Page Address: http://myspace123.qiniudn.com/love/index.html

Directory File Structure:

Index.html

+ View Code

　　

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 * (Math.pow (Math.sin (t), 3));    var y =-X * (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 >=) {clearinterval (Animationtimer);        Showmessages ();        } else {angle + = 0.2; }}, interval);} (function ($) {$.fn.typewriter = function () {This.each (function () {var $ele = $ (this), str = $ele. h            Tml (), 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 <) {hours = "0" + hours;    } seconds = seconds% 3600;    var minutes = Math.floor (SECONDS/60);    if (minutes <) {minutes = "0" + minutes;    } seconds = seconds% 60;    if (seconds <) {seconds = "0" + seconds; } var result = "<span class=\" digit\ ">" + days + "</span> days <span class=\" digit\ ">" + hours + "&lt ;/span> hours <span class=\ "digit\" > "+ minutes +" </span> minutes <span class=\ "digit\" > "+ seconds     + "</span> seconds"; $ ("#elapseClock"). HTML (result);}    function Showmessages () {adjustwordsposition (); $ (' #messages '). FadeIn (, 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.grow Factor;                    /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.petalStr Etch.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, Gar Den.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:1             0}, 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, R            Max));            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\ to Alice MP3.

To Alice--Beethoven

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:1;     }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: "Microsoft Jas Black";    }ul#wimoban_nav li A:hover, #wimoban_p a:hover{color:red;     } #wimoban_p {text-align:center;     font-size:14px;    Clear:both;    }body{margin:0;    padding:0;    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:0;    } #copyright A {color: #666; }

Make an HTML declaration page