资源分享

分享超炫的表白页面和爱的纪念日源码

Jager · 6月8日 · 2014年 · · · 17462次已读

昨晚弄到三点就是为了 DIY 这 2 个页面,想给老婆一个浪漫的惊喜。

预览地址:

爱情纪念:https://zhang.ge/love

爱的故事:https://zhang.ge/love/forever

在线制作:https://zhang.ge/love/index.php

是别人的源码,没什么好说的,直接贴上作者说明:

一、超炫表白页面:

作者原话:为了预热情人节,麦葱二次开发了个表白程序。程序放在 BAE 上面,因为本地写这个原因,生成的页面过段时间就找不到了,导致链接页面 404,麦葱在此表示歉意。

今天麦葱把这款程序分享出来,如果你需要,可以拿去使用。

分享超炫的表白页面和爱的纪念日源码

①、模版文件说明:
/2014
/css
/css/all.min.css
/fonts
/fonts/RuiHeiXiTi.otf
/img
/img/***.jpg
/img/***.gif
/js
/js/all.min.js
/js/audio.min.js
/js/brav1toolbox.js
/js/flowtime.js
/js/love.min.js
/js/love.src.js
/music
/music/saveme.mp3
/music/lovebgm.mp3
index.php
love.php
loveNote.txt
loveTpl.html

/2014 用于存放生成的静态页面,若更改,请同时修改 love.php 里的路径
/js/love.min.js 字段获取 js 压缩文件
/js/love.src.js 是未压缩的
love.php 核心处理文件,love.min.js 传参给此文件处理并生成相应静态页面
loveNote.txt 数据记录
loveTpl.html 页面模版文件 love.php 生成的页面以此文件为模版

②、程序运行原理:

给页面文字添加 span 标签,设置 id="text-xx"唯一属性,使用 contenteditable="true",开启该元素的编辑模式,用 jQuery 属性.click()判断点击,用.text()返回此元素的文本内容,并用正则进行判断内容是否合法,然后通过 AJAX POST 给 php 处理,php 对传入的参数进行过滤,然后读取模版文件,替换模版文件对应内容,保存为新文件并记录操作,最后返回数据给前端,前端处理数据并更新页面。

③、使用说明:

上传解压后的文件夹 love 到网站根目录,通过 http://你的域名/love/ 进行访问

④、下载和演示:

演示地址:https://zhang.ge/love/forever

在线制作:https://zhang.ge/love/index.php

注:这是一个自动生成表白页面的程序,模版由 jianghongfei.com.cn 原创,麦葱(www.yuxiaoxi.com)做二次开发,仅限娱乐,不得用于商业用途!

 

二、爱的纪念日页面:

从爱 Java 看到的分享,原址:http://aijava.cn/560.html

演示地址:https://zhang.ge/love

 

分享超炫的表白页面和爱的纪念日源码

 

没什么可说的,自己下载慢慢折腾吧!为了心爱之人,怎么折腾都是值得的!

72 条回应
  1. 梦轩丽人 2014-6-9 · 9:01

    爱的纪念日页面蛮不错的,我昨天刚用会会做了一个视频以记录结婚三周年,先下载这个爱的纪念日页面,等会有空我也折腾看看。博主,谢了!

  2. maillot saxo bank 2014-6-9 · 9:30

    这个好赞,我那天就看到了。

    • avatar
      Jager 2014-6-9 · 9:49

      作者的创意和技术都很不错的说~

  3. 半块糖 2014-6-9 · 11:54

    好漂亮的效果,拿走了,可以在某月某日给某人一个惊喜,嘿嘿~

    • avatar
      Jager 2014-6-9 · 12:47

      对,还是挺浪漫的~IT男独有的~

  4. 个人博客leiboy.com 2014-6-9 · 13:03

    唉,目测博主要用这个把一个无知少女感动得稀里哗啦了

    • avatar
      Jager 2014-6-9 · 13:04

      我都要结婚了,还无知少女呢。。其他人拿去追漂亮MM还是可以的。

  5. 捡豆腐'blog 2014-6-9 · 15:59

    Goodbye了~~~

    • avatar
      Jager 2014-6-9 · 16:57

      再找

  6. 三日月 2014-6-9 · 18:49

    这玩意真不错啊,高端大气上档次啊

  7. 三日月 2014-6-9 · 18:56

    等我即使有需要的时候可以弄一个,真心感觉好啊

    • avatar
      Jager 2014-6-9 · 20:23

      赶紧拿去追女孩吧~

      • 三日月 2014-6-9 · 20:38

        没认识的怎么破啊。这方面你是大神了

        • avatar
          Jager 2014-6-9 · 20:50

          呃,天天宅能找到才怪。。

          • 三日月 2014-6-9 · 21:44

            交友圈太小,我不是伤的么,有缘吧

  8. 好运鞋网 2014-6-9 · 20:44

    老婆肯定要高兴了,有如此浪漫的丈夫。

    • avatar
      Jager 2014-6-9 · 21:01

  9. 路人V 2014-6-9 · 23:44

    赞一个,我啥时候才用得上啊

  10. Youth.霖 2014-6-10 · 0:09

    好感人啊···我啥时候才用得上啊

    • avatar
      Jager 2014-6-10 · 14:50

      发现合适的,就赶紧用上,追一个。

  11. 撒哈拉的小猫 2014-6-10 · 8:47

    快五年了是吧。。孩子可以打酱油了把、、-- 来自blog.clmao.com土豪灌水机

  12. yedward 2014-6-10 · 10:21

    额,很久以前我也做了一个,不过我完全没有审美的说,就只是一个简单的页面,http://love.yedward.net。

    • avatar
      Jager 2014-6-10 · 14:48

      哇!帅男美女啊。。

  13. 骁-miniseo.net 2014-6-11 · 13:14

    我不太懂太码看不出这里面的门道,如果不熟悉代码,制作出这样一个功能有可能吗?

    • avatar
      Jager 2014-6-11 · 13:30

      直接上传源码包就可以了,改中文总会吧。。

      • 骁-miniseo.net 2014-6-11 · 14:48

        这个必须会..哈哈 回头仔细琢磨下,也整下来玩玩..

        • avatar
          Jager 2014-6-11 · 14:49

          嗯,里面有详细使用说明。

  14. 开心一刻笑话 2014-6-11 · 21:58

    你能告诉我 你为何这么叼?

    • avatar
      Jager 2014-6-15 · 22:12

  15. 三日月 2014-6-17 · 17:40

    小弄了有点小问题,重新弄下

  16. 糯米汇 2014-6-20 · 21:49

    这个之前在51分享博客里面看到的 没想到出自这里 32个赞啊!

    • avatar
      Jager 2014-6-20 · 22:02

      惭愧,惭愧,不是出自我这里呢,我也是收集整理哦~

      • 糯米汇 2014-6-20 · 22:21

        也不错啊 没有你整理咋个看的到

  17. 瑾瑜 2014-6-21 · 11:43

    赞一个,原来自己也做过纪念日页面,不过比较简单……

  18. 桜満集_CA 2014-7-2 · 4:16

    当某男将图片都改成和心爱之人在一起,然后就在她打开网站的一秒之后,某男从身后出现手捧鲜花的场面,卧槽,我竟然想完了!看来我注定要孤独一生(╯‵□′)╯︵┻━┻

    • avatar
      Jager 2014-7-2 · 7:59

      有想法,有目标就赶紧行动吧。

  19. 百家网络博客 2014-7-3 · 21:05

    已拿走,谢谢分享。

  20. seo论坛 2014-7-8 · 12:28

    不错有点意思 很喜欢这个代码

  21. 贴吧头像 2014-8-25 · 17:46

    哈哈,收下了、、

  22. 不错感谢分享

  23. 飞哥 2014-10-12 · 23:15

    签到成功!签到时间:下午10:54:37,每日签到,生活更精彩哦~

  24. 飞哥 2014-10-12 · 23:16

    怎么用啊。文件夹权限设置不会。虚拟服务器不能更改文件设置。是不是需要服务商帮助啊?

  25. 牛皮厕纸云主机 2014-12-25 · 17:18

    赞一个

    • cuimao 2015-5-21 · 18:36

      无语啊怎么通过了我还是改下吧

  26. 11 2015-4-20 · 19:39

    怎么生成不了,一生成就错误[img]http://yigepengyou.com/20150420193821174.jpg[/img]

    • 11 2015-4-20 · 19:43

      777权限也不行,文件直接上传的

  27. 橙子 2015-5-1 · 0:23

    请问Jager大哥,怎么制作这个表白墙弄到自己的网站上?
    一定回答我!!!

    • avatar
      Jager 2015-5-1 · 13:03

      ③、使用说明:
      上传解压后的文件夹love到网站根目录,通过 http://你的域名/love/ 进行访问

      • 橙子 2015-5-1 · 13:10

        谢谢,Jager大哥。我懂了。[color=red][/color]

  28. 哈哈 2015-5-3 · 9:04

    张哥 请问第二个表白树 纪念日时间要怎么改 我想改成2013年10月2日 但是计算的纪念日时间不对 谢谢 希望回复我

  29. cuimao 2015-5-21 · 1:27

    爱的表白最后不能生成是什么情况呢?

  30. 小崔 2015-5-21 · 18:38

    你好我是cuimao
    下载的代码有好多问题。我又不懂。所以就…………我就把你用的代码下载了修改了一下效果很好。非常感谢、希望博主莫介意啊( ⊙ o ⊙ )这个评论就不要通过审核了吧。我只是告诉您一声。体谅一下小白吧。谢谢
    刚才评论直接通过了我就从新发下

    • avatar
      Jager 2015-5-21 · 19:26

      互联网是开放的,无需拘束

  31. 小崔 2015-5-21 · 19:37

    您好这个图片上的‘第’怎么去掉呢 找不到在哪个地方改 :arrow: 挡着后面的秒了

  32. 蔡定交 2015-6-10 · 14:10

    要是原创能做出这效果,还是有点难度的。

  33. 源码集中营 2015-7-2 · 23:55

    这个表白网页只是其中的一个,给博主介绍个牛逼的 百度搜索 : 我要表白网 第一个就是,可以去看看,哈哈 :grin:

    • avatar
      Jager 2015-7-3 · 12:34

      牛逼,都做成一站式服务了,啥时候婚宴啥的都做起来 :cool:

  34. BeautifulDays 2016-6-13 · 17:03

    不错的效果,拿走啦

  35. 留笔记 2016-11-27 · 17:58

    Jager大大,爱的纪念链接失效了,没法下载 可以再发下吗 谢谢 :oops:

  36. wuyifan 2017-1-20 · 23:25

    链接更新了,有更新吗?

  37. gxuann 2017-7-24 · 14:33

    请问,这个页面的bgm 那个audio里面音乐的文件存在哪才能快速加载呢?我上传到主机以后,每次都是页面打开了好久才能加载出来声音。

    • avatar
      Jager 2017-7-26 · 8:41

      这个和你音乐存放地址的下载速度有关系,你可以试试用七牛CDN存放这些音乐

  38. 程子罗 2018-5-8 · 10:34

    Jager大哥,链接失效了,还请麻烦重新分享下,小弟不胜感激 :razz:

    • avatar
      Jager 2018-5-12 · 16:34

      已更新

  39. Angel 2019-6-4 · 0:22

    大佬 为什么只能在HTML本地运行,效果可以出来,其他外网效果就加载不出来,用的都是谷歌

  40. jobs 2019-8-7 · 15:32

    请教一下,为啥我本地运行没有音乐呀?

  41. lesliehuang 2019-10-16 · 17:36

    好漂亮的效果,拿走了,可以在某月某日给某人一个惊喜,嘿嘿~

  42. 庸人自扰 2020-6-17 · 16:54

    图片显示不出来是怎么回事呀?

  43. 小山子 2021-10-13 · 20:05

    纪念日页面时间不对,在手机上看到天数跟代码给出的时间不对,是我看错了吗