陪MM在论坛看流星祈愿
技术与开发
晓亮的女朋友一直嚷着想去看流星,让晓亮很郁闷,流星怎么可能想看就看!最近,他在浏览某个论坛的时候,发现了一种抓“流星”祈愿的小游戏,眼前一亮。看流星还可以在论坛嘛!他也想在自己的论坛拥有这样的功能,给女朋友一个惊喜,可应该怎么设计这个功能呢?
要在论坛中实现流星祈愿的功能,可以使用我们设计的“流星祈愿”插件(插件下载地址:http://www.shudoo.com/bzsoft)。我们先要制作流星划过的动态效果,只有当划过的流星被网友点中时,才允许祈愿,最后将愿望显示出来即可。根据相似原理,我们还可以制作用投币祈愿的许愿池等。
小知识:在第二步的代码中会打开ADO集。当打开ADO记录集时,除非需要获得所有的列,否则不应使用“SELECT * from table”这样的语句。使用单独的列(如SELECT a1 from table),意味着将减少发送到服务器或从服务器取出的数据量。即使需要使用全部列,单独地命名每个列也会获得最佳的性能,因为服务器不必再解释这些列的名字。
第一步 制作流星动态效果
我们利用JavaScript来实现流星划过的动态效果。首先准备几张星星图片,将它们分别放在Div中,随机让星星分布在页面的顶部或左侧。因为流星是斜向划落,在它们划落的时候,我们不仅需要增加它们的纵向坐标形成坠落效果,还需要适当地增加它们的横向坐标形成斜向划落效果。
为了让流星划落速度有所区别,我们随机产生每次增加的纵横坐标的速度值。重复以上步骤,便完成了流星划过的效果。新建一个HTML文件,在
之间输入相关代码,其中关键代码如下所示(完整代码下载地址:http://www.shudoo.com/bzsoft):Ypos=new Array();//记录各个星星纵向位置
Xpos=new Array();//记录各个星星横向位置
Speed=new Array();//记录各个星星的下落速度
//浏览器类型判断
ns=(document.layers)?1:0;
ns6=(document.getElementById&&!document.all)?1:0;
//随机产生星星
if (ns){
for (i = 0; i 〈 Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs = Math.round(Math.random()*WinHeight);
Xpos[i] = Math.round(Math.random()*WinWidth);
Speed[i]= Math.random()*10+3;
第二步 点中流星,完成祈愿
当划落的流星被网友点中时,便弹出祈愿录入页面,该录入页面可以根据需求设置要填写的项目。为了保存网友录入的愿望,我们还要新建一张数据库表来保存录入的内容。新建一张ASP页面,输入相关代码,其中关键代码如下所示(完整代码下载地址:http://www.shudoo.com/bzsoft):
'验证祈愿信息,读者可自行添加选项
if varname="" then
response.redirect "error.asp?msg=你的姓名不能为空"
end if
if varemail="" then
response.redirect "error.asp?msg=你的电子邮件地址不对!!"
end if
if varaddress="" then
response.redirect "error.asp?msg=你的居住地方不能不选!"
end if
if varinfo="" then
response.redirect "error.asp?msg=你的愿望好像忘了写!"
end if
'将许愿信息加入数据库
Set rs = Server.CreateObject("ADODB.Recordset")
sql ="Select name , email,homepage, wishtype,sex,address,info,ip,date From wish where 1〈〉1"
第三步 显示祈愿内容
我们从数据库表中提取最新的一条或者数条愿望放到论坛特定位置并显示出来,也可以通过愿望的ID直接访问该愿望。需要注意的是,通过ID访问愿望,在写程序的时候一定要检查其ID是否为空以及是否包含有非法字符等,防止程序出错或者被SQL注入。新建一个ASP文件,输入相关代码,其中关键代码如下所示(完整代码下载地址:http://www.shudoo.com/bzsoft):
'验证ID是否为空
if request.QueryString("id")="" then
response.redirect "error.asp?msg=没有此祈愿!"
else
'验证ID是否包含非法字符
if not isnumeric(request.QueryString("id")) then
response.Write("参数错误!")
response.End()
end if
'提取ID对应的许愿信息
Set rs=Server.CreateObject("ADODB.Recordset")
sql="select name,counter, textcolor,linkcolor, wishtype,sex,address,info from wish where id="&request.QueryString("id")
rs.open sql,conn,3,3
rs("counter")=rs("counter")+1
rs.update
编后
文中设计的插件还可以进一步优化,可以在愿望显示页面中添加祝福功能,让其他网友为祈愿的网友送上自己的一份祝福,提高互动性。还可以将插件的页面做一些美化工作,让祈愿的网友更有身临其境的感觉。