情侣浪漫网页制作

最新推荐文章于 2025-05-17 22:09:15 发布

weixin_33811961

最新推荐文章于 2025-05-17 22:09:15 发布

阅读量7.8k

点赞数 5

文章标签： xhtml javascript ViewUI

本文介绍了一位作者参考他人代码制作的一款浪漫网页，该网页能够记录情侣共度的时光。文章分享了项目的源代码，包括default.css, functions.js, garden.js和love.html等文件。" 101977617,8837075,Windows组策略实践：本地与域控策略详解,"['操作系统', '系统安全', '运维']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

也是参考了别人的代码，制作的一张浪漫网页，实现了记录情侣在一起的时间的功能，实现效果图如下：

下面我把程序的源代码贴出来，仅供参考。

项目目录如下：

default.css如下：

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:12px}
#code .string{
    
    color:#2a36ff}
#code .keyword{
    
    color:#7f0055;font-weight:bold}
#code .placeholder{
    
    margin-left:15px}#code .space{
    
    margin-left:7px}
#code .comments{
    
    color:#3f7f5f}
#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}

View Code

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 * (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 =