学步园

相信大家在浏览网站的时候，都可能看过，一篇文章完了之后，后面会有几个表情的单选按钮的，问你看了文章之后的心情，可以进行投票的。对，就是那种，这种功能很简单，加上数据处理之类的，代码大概也就是几十行的样子。先看看用户的部分吧。自己用Div排的（简单的Div 自己处理就好了，就不麻烦美工的同事了），看截图：

 

结合Jquery来处理的。

 

 

 

再看看按票结果页面，比较简单.. 拿了另一个网站的界面来用。自己就设了设计的时间了。

 

界面就是上面的这些了。下面贴贴代码。

提交投票参数，当然，你也可以用 $.Ajax 或是 $.get 也可以，这里我习惯了$.post ，其实 $.Ajax 还更好用一点。有错误提示之类的。

 1 function ChickSurvey(voteid, articleid)
 2 {
 3     //接收投票参数的处理页面,处理完后,输出结果.这里用的是asp, .net 的也是一样处理的.
 4     url ="yourpage.asp";
 5     opt ="voteid="+ voteid + "&articleid="+ articleid;
 6     $.post(url, opt, function(data){ 
 7         switch(data)
 8         {
 9             case "ok":
10                 if (confirm("您已经留下您的心情，是否要查看结果?"))
11                 {
12                     window.location.href = "result.asp?id="+ articleid;
13                 }
14                 break;
15             default:
16                 alert("系统繁忙，请稍候再试 ^_^ ");
17                 break;
18         } 
19     });
20 }

 

接收页面的代码就没什么特别要说的了，跟一般的接收程序没有什么区别，这里就不叫了。说说显示结果的页面吧。我这里结合了CSS 和 JavaScript来处理，代码如下：

 

1     For i = 0 to UBound(arrHeight)
2         If arrHeight(i) > 0 Then
3             Response.Write("document.getElementById(""pic_"& i &""").style.height = """& arrHeight(i) &"px"";" & vbCrLf)
4             Response.Write("document.getElementById(""pic_"& i &""").className = ""result"";" & vbCrLf)
5         End If
6     Next

 

其实就是输出 Javascript

 

也贴上表结构吧：

 

 1 create table Survey
 2 (
 3     SID int primary key identity(1,1),
 4     ArticleID int foreign key references pe_article(articleid),
 5     VoteItem nvarchar(500),
 6     TotalCount int        
 7 )
 8 
 9 /* 这里是示例 Survey 的存储结构*/
10 Insert into Survey(ArticleID,VoteItem,TotalCount) values(62389,'60|7|20|1|91|201',300)

 

结果用 60|1|20|0|90|200 的样子保存，用 "|"分隔每一项的结果。再用数组读取