您当前的位置： 首页 >  CSDN 程序人生 html5

甜甜甜！HTML5 快速实现一颗告白爱心树！| 原力计划

CSDN 程序人生 发布时间：2020-02-20 11:27:18 ，浏览量：3

作者 | Himit_ZH

责编 | 伍杏玲

出品 | CSDN博客

利用HTML5、CSS、JS实现爱心树以及纪念日期的功能，网页有播放音乐功能 以及打字倾诉感情的画面，非常适合送给女朋友。

具体的HTML代码

具体只要修改代码里面的男某某和女某某 文字段也可自行修改，还有代码下半部分的JS代码需要修改一下起始日期 注意月份为0~11月 也就是月份需要减一。

当然只有一部分HTML和JS代码不够运行的，文章最下面还附加了完整代码的下载地址





男某某与女某某日期纪念功能



        



















    



        



    

        

            本页面采用HTML5编辑，目前您的浏览器无法显示，请换成谷歌(Chrome)或者火狐(Firefox)浏览器，或者其他游览器的最新版本。
                                               * 致女某某： *
 
        · 女某某，情人节快乐！
 
                        · 不经意相识, 或许是缘分，或许是注定的。
 
        · 虽然......，但依......！
 
        · 虽然......，但......！
 
        · 虽然......，但......！
 
        · 虽然......
 
        · 无论如何，只要你我依旧喜欢对方，我会一直陪着你。
                         
                        · You are my only girlfriend.
 
· I love you,×××!
 
                        --@author 男某某--         
                
                                     现在是男某某 ❤ 女某某相恋                   
              
                             
                            (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(2020, 1, 2); //时间年月日 月份0~11     together.setHours(22);    //小时     together.setMinutes(22);    //分钟     together.setSeconds(2);    //秒前一位     together.setMilliseconds(2);    //秒第二位     $("#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();     })();           //自己修改音乐位置

画面演示

①点击网页中心的爱心，刚进入网页会自动播放音乐

②会慢慢生成爱心树，速度挺快的

③然后会平移爱心树到最右边，准备生成文章

④会慢慢生成所要说的话 日期设定是2020.02.02 22：22：22

⑤最后的样子

代码：

https://pan.baidu.com/s/1DE2l4fkNdnZUxxme4HS6vw，提取码: i69r

原文链接：https://blog.csdn.net/weixin_43853097/article/details/104240158

技术战“疫”，贾扬清、李飞飞要给程序员直播讲AI技术！

2月18日、2月20日，阿里云CIO学院攻“疫”技术课程正式开启。您将获得与达摩院数据库首席科学家 、阿里巴巴集团副总裁、ACM 杰出科学家李飞飞，Caffe之父、ONNX创始人、阿里巴巴集团副总裁贾扬清，阿里巴巴集团副总裁、阿里 CIO 学院院长胡臣杰等顶级技术专家直播互动的机会。

热 文 推 荐

☞“删库跑路”这件事情真的发生了 ，还是技术总监干的！

☞掌握此文，面试再也不怕红黑树！

☞10 万阿里人都爱用的网红工具，语雀如何“用保护钱包的技术在保护文档安全”？

☞大神如何一招完美解决Hadoop集群无法正常关闭的问题！| 博文精选

☞一文读懂拜占庭将军问题

☞超赞的PyTorch资源大列表，GitHub标星9k+，中文版也上线了

你点的每个“在看”，我都认真当成了喜欢

点击阅读原文，即刻报名以上直播活动！

关注
打赏
查看更多评论

CSDN 程序人生

暂无认证

  • 3浏览

    0关注

    1989博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

[ 申请 ]友情链接：

传奇私服 南島屋 My命理学 快连vpn 快连vpn 搜外友链 笔趣阁 爱思助手 ClashX教程 绘画宝宝 配音宝宝
立即登录/注册

微信扫码登录