彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 学会党委 > 做的一个HTML表白页面,HTML表白页面

做的一个HTML表白页面,HTML表白页面

发布时间:2019-08-30 09:31编辑:学会党委浏览(113)

    做的一个HTML表白页面,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">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 = "" + days + " days " + hours + " hours " + minutes + " minutes " + seconds + " 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;
        }
    

    页面地址: 目录文件结构: index.html html xmlns="...

    页面地址:

     

     

    目录文件结构:

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

    本文由彩世界平台发布于学会党委,转载请注明出处:做的一个HTML表白页面,HTML表白页面

    关键词:

上一篇:没有了

下一篇:没有了