关注热点事件 写对联留言
技术与开发
天天MM在逛网易时,发现有一个为神七写贺联的功能,非常受访客的欢迎,很多人都在里面写下自己为神七的贺联。她自己有一个卖饰品的论坛,一直人气不够,如果论坛中有了类似的功能,会带来很多流量。
其实网易用的只是一个贺联插件,我们也可以设计(插件下载地址:http://www.shudoo.com/bzsoft),并可以自行修改成相应的内容,例如国庆贺联、生意贺联、股票贺联等。
要设计贺联插件,先要设计的是数据库,它是用来存放网友输入的信息,然后将贺联信息添加到数据库中,数据库会将输入的数据导出并显示在循环滚动显示区域,这样我们便完成了贺联插件的模仿设计。
第一步:新建Access数据库
这里我们使用的是Access数据库,首先打开Access,然后点击“使用设计器创建表”选项,在打开的设计器中添加字段“id”、“dltext”、“ip”,它们分别用来记录贺联的ID号、贺联内容以及网友的IP地址,最后保存即可。另外,可以按照实际需求添加其他的字段,如网友名字、QQ等等。
第二步:设计贺联提交功能
接下来我们来制作贺联的提交功能,新建一张ASP页面作为贺联提交页面,添加用户提交贺联的输入框,然后将用户提交的贺联内容录入数据库中。由于贺联一般字数不能太长,我们在向数据库添加信息时,应该对贺联内容进行字数限制。在页面中输入相关代码,其中关键代码如下所示(完整代码下载地址:http://www.shudoo.com/bzsoft):
〈script language="JavaScript"〉
function dlchecksubmit()/*定义表单检查函数*/
{
var sltext =document.getElementById("sltext").value; /*获得上联内容*/
var xltext =document.getElementById("xltext").value; /*获得下联内容*/
if(sltext =="")
{
alert('请填写上联!'); /*如果网友未写上联,弹出提示*/
return false; /*返回,不添加至数据库*/
}
if(xltext =="")
{
alert('请填写下联!'); /*如果网友未写下联,弹出提示*/
return false; /*返回,不添加至数据库*/
}
document.getElementById("dlbody").value ="上联:"+sltext+“,下联:"+xltext; /*将上联和下联连在一起,添加至数据库*/
return true;
小知识: JavaScript中使用反斜杠来向文本字符串添加特殊字符,如表示回车符。
第三步:以循环滚动方式显示贺联
我们从数据库检索出前10对贺联内容(具体对联数可以自行设置),将这些贺联按时间顺序取出后,放入我们设计好的显示栏中,然后设置这些贺联的循环滚动速度,在第二步代码后接着输入相关代码,其中关键代码如下所示(完整代码下载地址:http://www.shudoo.com/bzsoft):
sql = "Select top 10 id,dltext,ip from diulian order by id DESC"
Set Rs = Conn.Execute(sql) '读取前10对贺联(用户可自行修改)
%〉
〈marquee onMouseOver="this.stop()" onMouseOut="this.start()" scrolldelay=400 direction="up" style="height:100px;"〉 /*设置上下滚动功能*/
〈% if not rs.eof and rs.bof then%〉
〈div style="margin:0 0 6px 0; overflow:hidden;"〉
〈p style="line-height:19px; margin:0;"〉〈span style="color:#666;"〉网友:〈%=rs(ip)%〉:〈/span〉〈%=rs(dltext)%〉〈/p〉
〈/div〉
〈%end if%〉
编后
本文的贺联是上下循环滚动,也可以做成横向滚动的方式,当然大家还可扩展本插件功能,例如添加贺联内容管理后台、添加贺联查找功能等,也可以进行适当修改,做出功能更丰富的祝福墙、我想对你说等富有个性的留言方式。