前两天在网上看到了一款情人节表白小程序，是由jianghongfei.com.cn 首创，麦葱(maicong.me) 二次开发的，本人非常喜爱这款小程序，便将它整合在了本人的网站上，下面是关于这款小程序的一些引见。我们假设喜爱的话也可以整合到本人的网站上。
模板文件列表
模版文件列表
/2017
/css
/css/all.css
/fonts
/fonts/RuiHeiXiTi.otf
/img
/img/***.jpg
/img/***.gif
/js
/js/jquery.min.js
/js/brav1toolbox.js
/js/flowtime.js
/js/love.js
/music
/music/saveme.mp3
/music/lovebgm.mp3
index.php
love.php
loveNote.txt
loveTpl.html
- /2017 用于寄存生成的静态页面，若更改，请同时修正 `love.php` 里的途径
- /js/love.min.js 字段获取 JS 文件
- love.php 中心处置文件
- love.js 传参给此文件处置并生成相应静态页面
- loveNote.txt 数据记载
- loveTpl.html 页面模版文件，`love.php` 生成的页面以此文件为模版
程序工作原理
给页面文字增加 span 标签，设置 `id=”text-xx”` 独一特点，运用 `contenteditable=”true”`，开启该元素的修改方法，用 jQuery 特点 `.click()` 判别点击，用 `.text()` 回来此元素的文本内容，并用正则停止判别内容能否合法，然后通过 AJAX POST 给 PHP 处置，PHP 对传入的参数停止过滤，然后读取模版文件，交换模版文件对应内容，保管为新文件并记载操作，最后回来数据给前端，前端处置数据并更新页面。
运用方法
你可以点击这儿下载程序源代码，然后将文件上传至你的网站根目录，通过拜访“http://你的域名/指定目录/”的方法即可拜访制作页面比如我网站的拜访地址为：https://zibuyu.life/sourcecode/love/lovestory/ 。
值得留意的是，这款小程序在挪动端的展现作用不是太好，假设想查看无缺的页面作用还是需求运用PC。
好了，如今就来拜访页面 https://zibuyu.life/sourcecode/love/lovestory/ 为心爱的TA制作属于你俩的表白故事吧。
源码地址：https://github.com/maicong/qiugouda-love