做的一个HTML表白页面

页面地址： http://swopl.xicp.net/love/index.html

目录文件结构：

index.html

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表白</title>
<!--引入开始-->

<link rel="stylesheet" type="text/css" href="style/style.css">
<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/garden.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<!--引入结束-->

<audio src="musics/致爱丽丝.mp3" autoplay="autoplay">
您使用的浏览器不支持HTML5!
</audio> 
</head>	
<body oncontextmenu="return false" ondragstart="return false" style="zoom: 1;">

<!-- 代码开始 -->
<div id="mainDiv">
	<div id="content" style=" 1110px; height: 625px; margin-top: 10px; margin-left: 119.5px;">
		<div id="code" style="margin-top: 50px;">
			<span class="comments">我害怕，</span><br>
			我会永远是那孤独的根号三。<br>
			<span class="comments">三本身是一个多么美妙的数字，</span><br>
			我的这个三，<br>
			<span class="comments">为何躲在那难看的根号下。</span><br>
			我多么希望自己是一个九，<br>
			<span class="comments">因为九只需要一点点小小的运算，</span><br>
			便可摆脱这残酷的厄运。<br>
			<span class="comments">我知道自己很难再看到我的太阳.</span><br>
			就像这无休无止的 1.7321...<br>
            <span class="comments">我不愿我的人生如此可悲。</span><br>
			直到那一天，<br>
            <span class="comments">我看到了，</span><br>
			另一个根号三。<br>
            <span class="comments">如此美丽无瑕，</span><br>
			翩翩舞动而来，<br>
            <span class="comments">我们彼此相乘，</span><br>
			得到那梦寐以求的数字，<br>
            <span class="comments">像整数一样圆满。</span><br>
			我们砸碎命运的枷锁，<br>
            <span class="comments">轻轻舞动爱情的魔杖。</span><br>
			我们的平方根，已经解开。<br>
            <span class="comments">我的爱，重获新生。</span><br>
			我无法保证能给你童话般的世界，<br>
             <span class="comments">也无法保证自己能在一夜之间长大。</span><br>
			但是我保证，<br>
            <span class="comments">你可以像公主一样永远生活在自由，幸福之中。</span><br>
			<br>
			I want to say:<br>
			
			<span class="keyword">for</span> (<span class="keyword">int</span> i=0;;i++)
            <span class="keyword">printf</span>("<span class="comments">I Love You!</span>");<br>
            <span class="keyword">爱你！</span>
			</span></span></span></span></span></span></div>
            <div id="loveHeart">
            <div id="messages" style="display: block;">
            <canvas id="garden"></canvas>
            
				<div id="words">
				<div id="messages">
					
					<div id="elapseClock"></div>
				</div>
				<div id="loveu">
					爱你直到永永远远。<br/>
					<div class="signature">- 谢超然作</div>
				</div>


            <div id="words">
			</div>
            </div>	
				
			
		</div>
	</div>
</div>
<!-- 代码结束 -->
<script type="text/javascript">
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
together.setFullYear(2001, 1, 1);
together.setHours(20);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);

if (!document.createElement('canvas').getContext) {
	var msg = document.createElement("div");
	msg.id = "errorMsg";
	msg.innerHTML = "您使用的浏览器不支持HTML5!"; 
	document.body.appendChild(msg);
	$("#code").css("display", "none")
	$("#copyright").css("position", "absolute");
	$("#copyright").css("bottom", "10px");
	document.execCommand("stop");
} else {
	setTimeout(function () {
		startHeartAnimation();
	}, 5000);

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

	adjustCodePosition();
	$("#code").typewriter();
}

</script>


</body></html>

　　

jqueryjquery-1.8.3.min.js

jsfunctions.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 * (16 * Math.pow(Math.sin(t), 3));
    var y = - 20 * (13 * 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 >= 30) {
            clearInterval(animationTimer);
            showMessages();
        } else {
            angle += 0.2;
        }
    }, interval);
}

(function($) {
    $.fn.typewriter = function() {
        this.each(function() {
            var $ele = $(this), str = $ele.html(), 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 < 10) {
        hours = "0" + hours;
    }
    seconds = seconds % 3600;
    var minutes = Math.floor(seconds / 60);
    if (minutes < 10) {
        minutes = "0" + minutes;
    }
    seconds = seconds % 60;
    if (seconds < 10) {
        seconds = "0" + seconds;
    }
    var result = "<span class="digit">" + days + "</span> days <span class="digit">" + hours + "</span> hours <span class="digit">" + minutes + "</span> minutes <span class="digit">" + seconds + "</span> seconds"; 
    $("#elapseClock").html(result);
}

function showMessages() {
    adjustWordsPosition();
    $('#messages').fadeIn(5000, 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);
}

jsgarden.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.growFactor; // / 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.petalStretch.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, Garden.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: 10
            },
            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, rmax));
            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致爱丽丝.mp3

致爱丽丝--贝多芬

stylestyle.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:"微软雅黑";
    }
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;
    }
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xcr1234/p/4552962.html