教你寫代码表白小特效一个比一个浪漫赶紧收藏起来吧！

最新推荐文章于 2024-02-29 09:38:52 发布

易加欢

最新推荐文章于 2024-02-29 09:38:52 发布

阅读量655

点赞数 2

分类专栏： IT 文章标签： javascript html5

本文链接：https://blog.csdn.net/qq13097919232/article/details/120099815

版权

IT 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客展示了程序员如何使用代码创造浪漫，通过一个包含音频和文字的告白小程序，打破了程序员直男、不懂浪漫的刻板印象。文章中的一段HTML和JavaScript代码实现了动态的浪漫表白效果，包括玫瑰花、心形和烟花等元素，证明了程序员也能用代码制造惊喜和感动。

摘要由CSDN通过智能技术生成

十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！

文章简介

文章简介

最近看了一街坊视频，问路人“你眼中的程序员是怎样的?”

然后一堆关键词就出来了“直男、宅、不懂浪漫、秃头、掉发、油头、戴眼镜、瘦、没得休息、枯燥乏味、不修边幅、做事有逻辑、学霸、认真、憨厚老实、可爱哈哈哈哈哈哈”。

说程序员是直男，不可否认，大多数程序员都挺直，因为我们没有那么多弯弯绕绕。有心思兜圈子，不如回去写几行代码。

早年雷军说“我喜欢写代码，代码的世界很简单”

程序员，格子衫，不浪漫，直男，人傻钱多……一点都不懂得浪漫！谁说我们不懂浪漫的？不会制造惊喜的？真的是这样么？不不不你错了程序员一旦浪漫起来，真没其他人啥事了！！！

在这里插入图片描述
程序员的大多数时间都是面对电脑，没有乱七八糟的应酬，缺乏交际的程序员对待一份感情也会非常的认真。程序员也许在生活中会比较宅，但是千万不要说程序猿不懂浪漫。当你不开心了，他可以分分钟做出一个玫瑰花、心形、烟花等告白小程序给你制造小惊喜。

在这里插入图片描述

下面展示一些 内联代码片。

<body>
<audio autoplay="autopaly">
  <source src="renxi.mp3" type="audio/mp3" />
</audio>
<div id="main">
  <div id="wrap">
    <div id="text">
      <div id="code"> <font color="#FF0000"> <span class="say">浮世三千 吾爱有三 日月与卿</span><br>
        <span class="say"> </span><br>
        <span class="say">日为朝  月为暮  卿为朝朝暮暮</span><br>
        <span class="say"> </span><br>
        <span class="say">在这浮浮沉沉的大千世界里 我爱的只有三样</span><br>
        <span class="say"></span><br>
        <span class="say">太阳  月亮和我爱的你</span><br>
		        <span class="say"> </span><br>
        <span class="say">太阳带给我们白昼和希望 月亮带给我们夜幕和宁静  </span><br>
				        <span class="say"> </span><br>
		<span class="say"> 你与我的朝夕相伴 于我而言即是永恒 你是我一生挚爱</span><br>
        <span class="say"></span><br>
        <span class="say">一生爱一人很难，也不丢人</span><br>
             <span class="say"> </span><br>    
				 <span class="say"> 最美的爱情愿景不就是"愿得一心人 白首不相离"嘛</span><br>
				         <span class="say"> </span><br>
						         <span class="say"> 如果可以请牢记当初的爱情承诺 记住最初的美好</span><br>
				        <span class="say"> </span><br>
		<span class="say">愿岁月静好 浅笑安然 一切美好如约而至</span><br>
        <span class="say"> </span><br>
     </font>
     
      </div>
    </div>
    <div id="clock-box"> <span class="STYLE1"></span><font color="#33CC00">愿得一心人，白首不相离</font> <span class="STYLE1">这简单的话语……</span>
      <div id="clock"></div>
    </div>
    <canvas id="canvas" width="1100" height="680"></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(2010,1 , 15); 			//时间年月日
		    together.setHours(16);						//小时	
		    together.setMinutes(53);					//分钟
		    together.setSeconds(0);					//秒前一位
		    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();
    })();
    </script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/1f48f876a8dc4321a494c4bbc0385f59.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5piT5Yqg5qyi,size_20,color_FFFFFF,t_70,g_se,x_16)