首页 Web技术

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

发布时间:2015年05月23日评论数：1 阅读数：6230

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

预览地址：

爱情纪念：http://zhangge.net/love

爱的故事：http://zhangge.net/love/forever

在线制作：http://zhangge.net/love/index.php

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

一、超炫表白页面：

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

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

①、模版文件说明：

		
								1
							
								2
							
								3
							
								4
							
								5
							
								6
							
								7
							
								8
							
								9
							
								10
							
								11
							
								12
							
								13
							
								14
							
								15
							
								16
							
								17
							
								18
							
								19
							
								20
							
								21
							
								22
							
								/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对传入的参数进行过滤，然后读取模版文件，替换模版文件对应内容，保存为新文件并记录操作，最后返回数据给前端，前端处理数据并更新页面。