share555

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
AmazingCounters.com
查看: 109|回复: 0

HTML5适合的情人节礼物有纪念日期功能

[复制链接]

377

主题

741

帖子

2101

积分

金牌会员

Rank: 6Rank: 6

积分
2101
发表于 2021-3-15 09:39:21 | 显示全部楼层 |阅读模式

前言

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

具体的HTML代码

具体只要修改代码里面的男某某和女某某 文字段也可自行修改,还有代码下半部分的JS代码需要修改一下起始日期 注意月份为0~11月 也就是月份需要减一。
当然只有一部分HTML和JS代码不够运行的,文章最下面还附加了完整代码的下载地址

  1. <!DOCTYPE html>
  2. <html xml:lang=&quot;en&quot;><head><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;>
  3. <title>男某某与女某某日期纪念功能</title>
  4. <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;./index_files/default.css&quot;>
  5. <script type=&quot;text/javascript&quot; src=&quot;./index_files/jquery.min.js&quot;></script>
  6. <script type=&quot;text/javascript&quot; src=&quot;./index_files/jscex.min.js&quot;></script>
  7. <script type=&quot;text/javascript&quot; src=&quot;./index_files/jscex-parser.js&quot;></script>
  8. <script type=&quot;text/javascript&quot; src=&quot;./index_files/jscex-jit.js&quot;></script>
  9. <script type=&quot;text/javascript&quot; src=&quot;./index_files/jscex-builderbase.min.js&quot;></script>
  10. <script type=&quot;text/javascript&quot; src=&quot;./index_files/jscex-async.min.js&quot;></script>
  11. <script type=&quot;text/javascript&quot; src=&quot;./index_files/jscex-async-powerpack.min.js&quot;></script>
  12. <script type=&quot;text/javascript&quot; src=&quot;./index_files/functions.js&quot; charset=&quot;utf-8&quot;></script>
  13. <script type=&quot;text/javascript&quot; src=&quot;./index_files/love.js&quot; charset=&quot;utf-8&quot;></script>
  14. <style type=&quot;text/css&quot;>
  15. <!--
  16. .STYLE1 {color: #666666}
  17. -->
  18. </style>
  19. </head>
  20. <body>
  21. <div id=&quot;main&quot;>
  22. <div id=&quot;error&quot;>本页面采用HTML5编辑,目前您的浏览器无法显示,请换成谷歌(<a href=&quot;http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI&quot;>Chrome</a>)或者火狐(<a href=&quot;http://firefox.com.cn/download/&quot;>Firefox</a>)浏览器,或者其他游览器的最新版本。</div>
  23. <div id=&quot;wrap&quot;>
  24. <div id=&quot;text&quot;>
  25. <div id=&quot;code&quot;>
  26. * 致女某某: *<br>
  27. <br>
  28. &middot; 女某某,情人节快乐!<br>
  29. <br>
  30. &middot; 不经意相识, 或许是缘分,或许是注定的。<br>
  31. <br>
  32. &middot; 虽然......,但依......!<br>
  33. <br>
  34. &middot; 虽然......,但......!<br>
  35. <br>
  36. &middot; 虽然......,但......!<br>
  37. <br>
  38. &middot; 虽然......<br>
  39. <br>
  40. &middot; 无论如何,只要你我依旧喜欢对方,我会一直陪着你。<br>
  41. <br>
  42. &middot; You are my only girlfriend.<br>
  43. <br>
  44. &middot; I love you,&times;&times;&times;!<br>
  45. <br>
  46. --@author 男某某--
  47. </div>
  48. </div>
  49. <div id=&quot;clock-box&quot;>
  50. 现在是男某某 &#10084; 女某某相恋
  51. <div id=&quot;clock&quot;></div>
  52. </div>
  53. <canvas id=&quot;canvas&quot; width=&quot;1100&quot; height=&quot;680&quot;></canvas>
  54. </div>
  55. </div>
  56. <script>
  57. </script>
  58. <script>
  59. (function(){
  60. var canvas = $('#canvas');
  61. if (!canvas[0].getContext) {
  62. $(&quot;#error&quot;).show();
  63. return false;
  64. }
  65. var width = canvas.width();
  66. var height = canvas.height();
  67. canvas.attr(&quot;width&quot;, width);
  68. canvas.attr(&quot;height&quot;, height);
  69. var opts = {
  70. seed: {
  71. x: width / 2 - 20,
  72. color: &quot;rgb(190, 26, 37)&quot;,
  73. scale: 2
  74. },
  75. branch: [
  76. [535, 680, 570, 250, 500, 200, 30, 100, [
  77. [540, 500, 455, 417, 340, 400, 13, 100, [
  78. [450, 435, 434, 430, 394, 395, 2, 40]
  79. ]],
  80. [550, 445, 600, 356, 680, 345, 12, 100, [
  81. [578, 400, 648, 409, 661, 426, 3, 80]
  82. ]],
  83. [539, 281, 537, 248, 534, 217, 3, 40],
  84. [546, 397, 413, 247, 328, 244, 9, 80, [
  85. [427, 286, 383, 253, 371, 205, 2, 40],
  86. [498, 345, 435, 315, 395, 330, 4, 60]
  87. ]],
  88. [546, 357, 608, 252, 678, 221, 6, 100, [
  89. [590, 293, 646, 277, 648, 271, 2, 80]
  90. ]]
  91. ]]
  92. ],
  93. bloom: {
  94. num: 700,
  95. width: 1080,
  96. height: 650,
  97. },
  98. footer: {
  99. width: 1200,
  100. height: 5,
  101. speed: 10,
  102. }
  103. }
  104. var tree = new Tree(canvas[0], width, height, opts);
  105. var seed = tree.seed;
  106. var foot = tree.footer;
  107. var hold = 1;
  108. canvas.click(function(e) {
  109. var offset = canvas.offset(), x, y;
  110. x = e.pageX - offset.left;
  111. y = e.pageY - offset.top;
  112. if (seed.hover(x, y)) {
  113. hold = 0;
  114. canvas.unbind(&quot;click&quot;);
  115. canvas.unbind(&quot;mousemove&quot;);
  116. canvas.removeClass('hand');
  117. }
  118. }).mousemove(function(e){
  119. var offset = canvas.offset(), x, y;
  120. x = e.pageX - offset.left;
  121. y = e.pageY - offset.top;
  122. canvas.toggleClass('hand', seed.hover(x, y));
  123. });
  124. var seedAnimate = eval(Jscex.compile(&quot;async&quot;, function () {
  125. seed.draw();
  126. while (hold) {
  127. $await(Jscex.Async.sleep(10));
  128. }
  129. while (seed.canScale()) {
  130. seed.scale(0.95);
  131. $await(Jscex.Async.sleep(10));
  132. }
  133. while (seed.canMove()) {
  134. seed.move(0, 2);
  135. foot.draw();
  136. $await(Jscex.Async.sleep(10));
  137. }
  138. }));
  139. var growAnimate = eval(Jscex.compile(&quot;async&quot;, function () {
  140. do {
  141. tree.grow();
  142. $await(Jscex.Async.sleep(10));
  143. } while (tree.canGrow());
  144. }));
  145. var flowAnimate = eval(Jscex.compile(&quot;async&quot;, function () {
  146. do {
  147. tree.flower(2);
  148. $await(Jscex.Async.sleep(10));
  149. } while (tree.canFlower());
  150. }));
  151. var moveAnimate = eval(Jscex.compile(&quot;async&quot;, function () {
  152. tree.snapshot(&quot;p1&quot;, 240, 0, 610, 680);
  153. while (tree.move(&quot;p1&quot;, 500, 0)) {
  154. foot.draw();
  155. $await(Jscex.Async.sleep(10));
  156. }
  157. foot.draw();
  158. tree.snapshot(&quot;p2&quot;, 500, 0, 610, 680);
  159. canvas.parent().css(&quot;background&quot;, &quot;url(&quot; + tree.toDataURL('image/png') + &quot;)&quot;);
  160. canvas.css(&quot;background&quot;, &quot;#ffe&quot;);
  161. $await(Jscex.Async.sleep(300));
  162. canvas.css(&quot;background&quot;, &quot;none&quot;);
  163. }));
  164. var jumpAnimate = eval(Jscex.compile(&quot;async&quot;, function () {
  165. var ctx = tree.ctx;
  166. while (true) {
  167. tree.ctx.clearRect(0, 0, width, height);
  168. tree.jump();
  169. foot.draw();
  170. $await(Jscex.Async.sleep(25));
  171. }
  172. }));
  173. //下面修改起始日期
  174. var textAnimate = eval(Jscex.compile(&quot;async&quot;, function () {
  175. var together = new Date();
  176. together.setFullYear(2020, 1, 2); //时间年月日 月份0~11
  177. together.setHours(22); //小时
  178. together.setMinutes(22); //分钟
  179. together.setSeconds(2); //秒前一位
  180. together.setMilliseconds(2); //秒第二位
  181. $(&quot;#code&quot;).show().typewriter();
  182. $(&quot;#clock-box&quot;).fadeIn(500);
  183. while (true) {
  184. timeElapse(together);
  185. $await(Jscex.Async.sleep(1000));
  186. }
  187. }));
  188. var runAsync = eval(Jscex.compile(&quot;async&quot;, function () {
  189. $await(seedAnimate());
  190. $await(growAnimate());
  191. $await(flowAnimate());
  192. $await(moveAnimate());
  193. textAnimate().start();
  194. $await(jumpAnimate());
  195. }));
  196. runAsync().start();
  197. })();
  198. </script>
  199. <iframe src = &quot;./给你们.mp3&quot; allow = &quot;autoplay&quot; hidden /> //自己修改音乐位置
  200. </body>
  201. </html>
复制代码

画面演示:

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

脚本之家-share555HTML5得当的恋人节礼品有怀念日期功能(1)

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

脚本之家-share555HTML5得当的恋人节礼品有怀念日期功能(2)

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

脚本之家-share555HTML5得当的恋人节礼品有怀念日期功能(3)

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

脚本之家-share555HTML5得当的恋人节礼品有怀念日期功能(4)

⑤最后的样子

脚本之家-share555HTML5得当的恋人节礼品有怀念日期功能(5)

完整代码资源

链接: https://pan.baidu.com/s/1Y0N0v76u1LBgW4T9mSse2A 提取码: 3f8n

到此这篇关于HTML5适合的情人节礼物有纪念日期功能的文章就介绍到这了,更多相关html5情人节礼物纪念日期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!


来源:https://www.jb51.net/html5/762070.html
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|分享论坛

GMT+8, 2021-6-13 13:55 , Processed in 0.113471 second(s), 21 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表