关注热点事件 写对联留言

技术与开发

天天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%〉

编后

本文的贺联是上下循环滚动,也可以做成横向滚动的方式,当然大家还可扩展本插件功能,例如添加贺联内容管理后台、添加贺联查找功能等,也可以进行适当修改,做出功能更丰富的祝福墙、我想对你说等富有个性的留言方式。