菜单 搜索
首页 前端知识 HTML爱情树

HTML爱情树

2024-05-26 01:05:28 前端知识 前端哥 477 989 我要收藏

目录

写在前面

完整代码

代码分析

系列推荐

下载代码

写在最后

写在前面

情人节要到咯，小编给大家准备了一些有趣的代码，一起来看看吧！（文末可以免费下载代码哦~）

完整代码

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta content="IE=11.0000" http-equiv="X-UA-Compatible">
    <meta name="keywords" content="" />
    <meta name="description" content="5" />

<body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false"
    onselectstart="event.returnValue=false">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Love</title>
    <link href="static/default.css" rel="stylesheet" type="text/css">
    <script src="static/jquery.min.js" type="text/javascript"></script>

    <script src="static/jscex.min.js" type="text/javascript"></script>

    <script src="static/jscex-parser.js" type="text/javascript"></script>

    <script src="static/jscex-jit.js" type="text/javascript"></script>

    <script src="static/jscex-builderbase.min.js" type="text/javascript"></script>

    <script src="static/jscex-async.min.js" type="text/javascript"></script>

    <script src="static/jscex-async-powerpack.min.js" type="text/javascript"></script>

    <script src="static/functions.js" type="text/javascript" charset="utf-8"></script>

    <script src="static/love.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css">
        .style1 {
            color: #666666
        }
    </style>
    <div id="main">
        <div id="wrap">
            <div id="text">
                <div id="code">
                    <!-- ❤情人节快乐❤ -->
                </div>
            </div>
            <div id="clock-box">我们已经在一起...</span>
                <div id="clock"></div>
            </div>
            <canvas width="1100" height="680" id="canvas"></canvas>
        </div>
    </div>
    <script>

        (function () {
            var canvas = $('#canvas');

            if (!canvas[0].getContext) {
                $("#error").show();
                return false;
            }

            var width = canvas.width();
            var height = canvas.height();

            canvas.attr("width", width);
            canvas.attr("height", height);

            var opts = {
                seed: {
                    x: width / 2 - 20,
                    color: "rgb(190, 26, 37)",
                    scale: 2
                },
                branch: [
                    [535, 680, 570, 250, 500, 200, 30, 100, [
                        [540, 500, 455, 417, 340, 400, 13, 100, [
                            [450, 435, 434, 430, 394, 395, 2, 40]
                        ]],
                        [550, 445, 600, 356, 680, 345, 12, 100, [
                            [578, 400, 648, 409, 661, 426, 3, 80]
                        ]],
                        [539, 281, 537, 248, 534, 217, 3, 40],
                        [546, 397, 413, 247, 328, 244, 9, 80, [
                            [427, 286, 383, 253, 371, 205, 2, 40],
                            [498, 345, 435, 315, 395, 330, 4, 60]
                        ]],
                        [546, 357, 608, 252, 678, 221, 6, 100, [
                            [590, 293, 646, 277, 648, 271, 2, 80]
                        ]]
                    ]]
                ],
                bloom: {
                    num: 700,
                    width: 1080,
                    height: 650,
                },
                footer: {
                    width: 1200,
                    height: 5,
                    speed: 10,
                }
            }

            var tree = new Tree(canvas[0], width, height, opts);
            var seed = tree.seed;
            var foot = tree.footer;
            var hold = 1;

            canvas.click(function (e) {
                var offset = canvas.offset(), x, y;
                x = e.pageX - offset.left;
                y = e.pageY - offset.top;
                if (seed.hover(x, y)) {
                    hold = 0;
                    canvas.unbind("click");
                    canvas.unbind("mousemove");
                    canvas.removeClass('hand');
                }
            }).mousemove(function (e) {
                var offset = canvas.offset(), x, y;
                x = e.pageX - offset.left;
                y = e.pageY - offset.top;
                canvas.toggleClass('hand', seed.hover(x, y));
            });

            var seedAnimate = eval(Jscex.compile("async", function () {
                seed.draw();
                while (hold) {
                    $await(Jscex.Async.sleep(10));
                }
                while (seed.canScale()) {
                    seed.scale(0.95);
                    $await(Jscex.Async.sleep(10));
                }
                while (seed.canMove()) {
                    seed.move(0, 2);
                    foot.draw();
                    $await(Jscex.Async.sleep(10));
                }
            }));

            var growAnimate = eval(Jscex.compile("async", function () {
                do {
                    tree.grow();
                    $await(Jscex.Async.sleep(10));
                } while (tree.canGrow());
            }));

            var flowAnimate = eval(Jscex.compile("async", function () {
                do {
                    tree.flower(2);
                    $await(Jscex.Async.sleep(10));
                } while (tree.canFlower());
            }));

            var moveAnimate = eval(Jscex.compile("async", function () {
                tree.snapshot("p1", 240, 0, 610, 680);
                while (tree.move("p1", 500, 0)) {
                    foot.draw();
                    $await(Jscex.Async.sleep(10));
                }
                foot.draw();
                tree.snapshot("p2", 500, 0, 610, 680);

                canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");
                canvas.css("background", "#ffe");
                $await(Jscex.Async.sleep(300));
                canvas.css("background", "none");
            }));

            var jumpAnimate = eval(Jscex.compile("async", function () {
                var ctx = tree.ctx;
                while (true) {
                    tree.ctx.clearRect(0, 0, width, height);
                    tree.jump();
                    foot.draw();
                    $await(Jscex.Async.sleep(25));
                }
            }));

            var textAnimate = eval(Jscex.compile("async", function () {
                var together = new Date();
                together.setFullYear(2023, 4, 20); 			//年月日（月份要-1）
                together.setHours(0);						//小时	
                together.setMinutes(0);					    //分钟
                together.setSeconds(0);					    //秒前一位
                together.setMilliseconds(0);				//秒第二位

                $("#code").show().typewriter();
                $("#clock-box").fadeIn(500);
                while (true) {
                    timeElapse(together);
                    $await(Jscex.Async.sleep(1000));
                }
            }));

            var runAsync = eval(Jscex.compile("async", function () {
                $await(seedAnimate());
                $await(growAnimate());
                $await(flowAnimate());
                $await(moveAnimate());

                textAnimate().start();

                $await(jumpAnimate());
            }));

            runAsync().start();
        })();
    </script>

    <audio id="bgmMusic" src="http://qzone.haoduoge.com/music/C2C3F0LSXH4D771253124A26CF9C71C939B2A.mp3" preload="auto"
        type="audio/mp3" autoplay loop></audio>


</body>

</html>

第181行可以修改日期哦~

代码分析

这段代码是一个HTML页面，主要实现了一个情人节主题的互动式动画效果。通过JavaScript和一系列插件（如jQuery, Jscex等）结合canvas元素来绘制一棵动态生长、开花的情人节爱心树，并且带有背景音乐和时间流逝计时器功能。以下是代码各部分的主要功能分析：

1. HTML结构：

   - 页面包含一个`<div id="main">`作为主体内容容器，其中`<canvas>`元素用于绘制爱心树。

   - `<div id="clock-box">`和`<div id="clock"></div>`配合JS脚本显示情侣在一起的时间。

2. CSS样式：

   - 设置了`.style1`的颜色属性和其他可能存在的样式（此处未展示全部CSS），并且对 canvas 元素进行了尺寸设置。

3. JavaScript部分：

   - 引入多个JavaScript库文件，如jQuery和Jscex，以及自定义的`functions.js`和`love.js`脚本。

   - 页面加载后执行匿名函数，该函数首先检查浏览器是否支持Canvas API，如果不支持则显示错误信息。

4. Canvas绘图：

   - 定义了一个`Tree`类，它使用给定的canvas元素、宽度和高度以及其他配置参数进行初始化。

   - 使用`Tree`类的方法在点击或鼠标移动事件中控制种子（爱心）的缩放和移动，并开始一系列异步动画任务，包括爱心树的生长、开花、移动以及最终生成静态背景图像。

   - `seedAnimate`、`growAnimate`、`flowAnimate`、`moveAnimate`和`jumpAnimate`函数分别对应爱心树的不同动画阶段，利用Jscex编译的异步函数进行控制。

5. 时间计数器：

   - `textAnimate`函数初始化并启动一个不断更新的时间倒计时，直到指定日期（在这个例子中是2023年5月20日）。

6. 音频播放：

   - 页面底部嵌入了一段背景音乐，自动预加载并在页面加载完成后循环播放。

整体来看，这个网页设计为用户提供了一种有趣而浪漫的方式来表达爱意，随着时间流逝，爱心树会逐渐生长并绽放花朵，同时显示情侣已共度的时间。

系列推荐

序号目录直达链接
1HTML实现3D相册https://want595.blog.csdn.net/article/details/138652869
2HTML元素周期表https://want595.blog.csdn.net/article/details/138653653
3HTML黑客帝国字母雨https://want595.blog.csdn.net/article/details/138654054
4HTML五彩缤纷的爱心https://want595.blog.csdn.net/article/details/138654581
5HTML飘落的花瓣https://want595.blog.csdn.net/article/details/138785324
6HTML哆啦A梦https://want595.blog.csdn.net/article/details/138834877
7HTML爱情树https://want595.blog.csdn.net/article/details/139009594
8HTML新春烟花盛宴https://want595.blog.csdn.net/article/details/139102775
9HTML想见你https://want595.blog.csdn.net/article/details/139135677
10HTML蓝色爱心https://want595.blog.csdn.net/article/details/139136334
11HTML跳动的爱心https://want595.blog.csdn.net/article/details/139137326
12HTML橙色爱心https://want595.blog.csdn.net/article/details/139139511
13HTML大雪纷飞https://want595.blog.csdn.net/article/details/139136829
14
15
16
17
18
19
20
21
22
23
24
25
26
27

下载代码

公众号对话框回复 html011 。

写在最后

可以留下你的小心心嘛~

转载请注明出处或者链接地址：https://www.qianduange.cn//article/9601.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

解决fixed定位z-index层级无效问题

2024-06-01 10:06:45

Node.js毕业设计基于HTML5的互动游戏新闻网站的设计与实现（Express 附源码）

2024-06-01 10:06:33

【前端问题集】安卓手机H5页面加粗失效

2024-06-01 10:06:33

HTML5(二)——获取用户位置Geolocation，万字解析

2024-06-01 10:06:32

html5怎么实现语音搜索

2024-06-01 10:06:32

HTML5

2024-02-27 11:02:15

HTML - 头部元素

2024-06-01 10:06:06

由于一个完整的购物商城代码涉及多个方面（如前端、后端、数据库等），并且每种语言都有其特定的用途和优势，我将为你提供简化的示例代码，分别用前端（HTML/CSS/JavaScript）、后端（Pytho

2024-06-01 10:06:04

web前端之引入外部svg文件、html引入.svg文件、等比缩放、解决裁剪、解决若依框架无法使用img选入svg文件问题、命名空间、阿里巴巴尺量图、object标签、embed标签、iframe标签

2024-06-01 10:06:00

微信小程序实现带刻度简易仪表盘

2024-06-01 10:06:53

大家推荐的文章
1

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
2

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
3

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
4

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
5

UE4.27支持HTML5

2024-05-07 13:05:261000
6

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
7

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
8

jQuery事件处理

2024-03-12 01:03:321000
9

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
10

ECharts 饼状图颜色设置

2024-02-16 14:02:001000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！