0
0

【爱心代码大全】——情人节表白代码送给她属于我们程序员的浪漫

👴大多数人以为的程序员——发量少，身穿格子褂，坐在电脑前就是码字。一点也不懂浪漫！

cb49028e643c4afb81c7f404f0b9a902.png

谁说我们不懂浪漫的？ 不！ 你错了 程序员一旦浪漫起来，真没其他人啥事了！！！

浪漫表白一

e2f9febda15d40f18098f2a6337e1cd0.gif

代码部分

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>爱心表白</title>
  7. <style type="text/css">
  8. @font-face {
  9.     font-family: digit;
  10.     src: url('digital-7_mono.ttf') format("truetype");
  11. }
  12. </style>
  14. <link href="css/default.css" type="text/css" rel="stylesheet">
  15. <script type="text/javascript" src="js/jquery.js"></script>
  16. <script type="text/javascript" src="js/garden.js"></script>
  17. <script type="text/javascript" src="js/functions.js"></script>
  19. </head>
  21. <body>
  23. <div id="mainDiv">
  24.     <div id="content">
  25.         <div id="code">
  26.             <span class="comments">/**</span><br />
  27.             <span class="space"/><span class="comments">*2022—02-10,</span><br />
  28.             <span class="space"/><span class="comments">*2022—02-10.</span><br />
  29.             <span class="space"/><span class="comments">*/</span><br />
  30.             Boy name = <span class="keyword">Mr</span> LI<br />
  31.             Girl name = <span class="keyword">Mrs</span> ZHANG<br />
  32.             <span class="comments">// Fall in love river. </span><br />
  33.             The boy love the girl;<br />
  34.             <span class="comments">// They love each other.</span><br />
  35.             The girl loved the boy;<br />
  36.             <span class="comments">// AS time goes on.</span><br />
  37.             The boy can not be separated the girl;<br />
  38.             <span class="comments">// At the same time.</span><br />
  39.             The girl can not be separated the boy;<br />
  40.             <span class="comments">// Both wind and snow all over the sky.</span><br />
  41.             <span class="comments">// Whether on foot or 5 kilometers.</span><br />
  42.             <span class="keyword">The boy</span> very <span class="keyword">happy</span>;<br />
  43.             <span class="keyword">The girl</span> is also very <span class="keyword">happy</span>;<br />
  44.             <span class="placeholder"/><span class="comments">// Whether it is right now</span><br />
  45.             <span class="placeholder"/><span class="comments">// Still in the distant future.</span><br />
  46.             <span class="placeholder"/>The boy has but one dream;<br />
  47.             <span class="comments">// The boy wants the girl could well have been happy.</span><br />
  48.             <br>
  49.             <br>
  50.             I want to say:<br />
  51.             Baby, I love you forever;<br />
  52.         </div>
  53.         <div id="loveHeart">
  54.             <canvas id="garden"></canvas>
  55.             <div id="words">
  56.                 <div id="messages">
  57.                     执子之手
  58.                     <div id="elapseClock"></div>
  59.                 </div>
  60.                 <div id="loveu">
  61.                     与子偕老<br/>
  62.                     <div class="signature">- 爱你的人</div>
  63.                 </div>
  64.             </div>
  65.         </div>
  66.     </div>
  67.     <div id="copyright">
  68.         <a href="#">....</a><br />
  69.         <a href="#">....</a><br />
  70.         
  71.     </div>
  72. </div>
  74. <script type="text/javascript">
  75. var offsetX = $("#loveHeart").width() / 2;
  76. var offsetY = $("#loveHeart").height() / 2 - 55;
  77. var together = new Date();
  78. together.setFullYear(2013, 2, 28);
  79. together.setHours(20);
  80. together.setMinutes(0);
  81. together.setSeconds(0);
  82. together.setMilliseconds(0);
  84. if (!document.createElement('canvas').getContext) {
  85.     var msg = document.createElement("div");
  86.     msg.id = "errorMsg";
  87.     msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+"; 
  88.     document.body.appendChild(msg);
  89.     $("#code").css("display", "none")
  90.     $("#copyright").css("position", "absolute");
  91.     $("#copyright").css("bottom", "10px");
  92.     document.execCommand("stop");
  93. } else {
  94.     setTimeout(function () {
  95.         startHeartAnimation();
  96.     }, 5000);
  98.     timeElapse(together);
  99.     setInterval(function () {
  100.         timeElapse(together);
  101.     }, 500);
  103.     adjustCodePosition();
  104.     $("#code").typewriter();
  105. }
  106. </script>
  108. </body>
  109. </html>

浪漫表白二

435350db7faf4e3da2a8a6e663f95de0.gif

代码部分

  1. <!DOCTYPE html>
  3. <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>我爱你</title>
  7. <link type="text/css" rel="stylesheet" href="renxi/default.css">
  8. <script type="text/javascript" src="renxi/jquery.min.js"></script>
  9. <script type="text/javascript" src="renxi/jscex.min.js"></script>
  10. <script type="text/javascript" src="renxi/jscex-parser.js"></script>
  11. <script type="text/javascript" src="renxi/jscex-jit.js"></script>
  12. <script type="text/javascript" src="renxi/jscex-builderbase.min.js"></script>
  13. <script type="text/javascript" src="renxi/jscex-async.min.js"></script>
  14. <script type="text/javascript" src="renxi/jscex-async-powerpack.min.js"></script>
  15. <script type="text/javascript" src="renxi/functions.js" charset="utf-8"></script>
  16. <script type="text/javascript" src="renxi/love.js" charset="utf-8"></script>
  17. <style type="text/css">
  18. <!--
  19. .STYLE1 {
  20.     color: #666666
  21. }
  22. -->
  23. </style>
  24. </head>
  25. <body>
  26. <audio autoplay="autopaly">
  27.   <source src="renxi.mp3" type="audio/mp3" />
  28. </audio>
  29. <div id="main">
  30.   <div id="error">本页面采用HTML5编辑，目前您的浏览器无法显示，请换成谷歌(<a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)浏览器，或者其他游览器的最新版本。</div>
  31.   <div id="wrap">
  32.     <div id="text">
  33.       <div id="code"> <font color="#FF0000"> <span class="say">亲爱的宝宝，我爱你</span><br>
  34.         <span class="say"> </span><br>
  35.         <span class="say"> 我知道我不会甜言蜜语，</span><br>
  36.         <span class="say"> </span><br>
  37.         <span class="say"> 但是我会用行动证明一切</span><br>
  38.         <span class="say"> </span><br>
  39.     <div id="clock-box"> <span class="STYLE1"></span><font color="#FF4500">亲爱的宝宝，我爱你</font> <span class="STYLE1">已经是……</span>
  40.       <div id="clock"></div>
  41.     </div>
  42.     <canvas id="canvas" width="1100" height="680"></canvas>
  43.   </div>
  44. </div>
  45. <script>
  46.     </script>
  47. <script>
  48.     (function () {
  49.         var canvas = $('#canvas');
  51.         if (!canvas[0].getContext) {
  52.             $("#error").show();
  53.             return false;
  54.         }
  55.         var textAnimate = eval(Jscex.compile("async", function () {
  56.             var together = new Date();
  57.             together.setFullYear(2010, 3,1);             //时间年月日
  58.             together.setHours(16);                        //小时    
  59.             together.setMinutes(53);                    //分钟
  60.             together.setSeconds(0);                    //秒前一位
  61.             together.setMilliseconds(2);                //秒第二位
  63.             $("#code").show().typewriter();
  64.             $("#clock-box").fadeIn(500);
  65.             while (true) {
  66.                 timeElapse(together);
  67.                 $await(Jscex.Async.sleep(1000));
  68.             }
  69.         }));
  70.         var runAsync = eval(Jscex.compile("async", function () {
  71.             $await(seedAnimate());
  72.             $await(growAnimate());
  73.             $await(flowAnimate());
  74.             $await(moveAnimate());
  76.             textAnimate().start();
  78.             $await(jumpAnimate());
  79.         }));
  81.         runAsync().start();
  82.     })();
  83.     </script>
  84. </body>
  85. </html>

怎么样，浪漫吧，还不抓紧收藏起来！！！【源码评论区留言或者私信博主哦，都是各位大佬贡献的源码啦】

没看够？别急，再给大家看看程序员大佬的浪漫~

浪漫表白三 原文连接https://www.jq22.com/jquery-info18876体验一下

f91dc590753249eaa22842eba9a623e8.gif

浪漫表白四

原文连接https://www.jq22.com/jquery-info14520体验一下

d5887acd4ce24cfaa7a636c6d0db368c.gif

浪漫表白五

原文连接https://www.jq22.com/jquery-info14031体验一下

42c94f7ce8ab4cb091633c52edee6ded.gif

怎么样，浪漫吧，还不抓紧收藏起来！！！【源码评论区留言或者私信博主哦，都是各位大佬贡献的源码啦】

b780b895f7ec4abba39d4750c3a2e15e.gif

标签： xhtml javascript html
本文转载自: https://blog.csdn.net/weixin_42306958/article/details/122869886
版权归原作者 超梦梦梦梦 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【爱心代码大全】——情人节表白代码送给她属于我们程序员的浪漫”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。