ASP.NET----实现动态投票增长显示功能
动态点击增加票数颜色条发生变化:
效果:
后台代码:
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
//红色Label的宽度
protected static int vote1=100;
//蓝色Label的宽度
protected static int vote2=100;
//黄色Label的宽度
protected static int vote3=100;
//投票数的数组
//数据的第一个元素即红色投票数
//第二个为蓝色投票数
//第三个为黄色投票数
protected static int[] voteCounts=new int[3];
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
//由于所有的静态变量都已经具有初始值 直接绑定数据
this.DataBind();
}
}
//红色Label后的按钮
protected void btnVote1_Click(object sender, EventArgs e)
{
//使红色Label变宽 15个像素
vote1+=15;
//红色投票数增加1
voteCounts[0] += 1;
//重新绑定
this.DataBind();
}
//蓝色Label后的按钮
protected void btnVot2_Click(object sender, EventArgs e)
{
//使蓝色Label变宽 15个像素
vote2 += 15;
//蓝色投票数增加1
voteCounts[1] +=1;
//重新绑定
this.DataBind();
}
//黄色Label后的按钮
protected void btnVot3_Click(object sender, EventArgs e)
{
//使黄色Label变宽 15个像素
vote3 += 15;
//黄色投票数增加1
voteCounts[2] += 1;
//重新绑定
this.DataBind();
}
}
前台html:
<body>
<form id="form1" runat="server">
<div>
你觉得瘦肉精对你的生活影响大吗?<br />
红色:非常严重。<br />
蓝色:一般,影响不大。<br />
黄色:基本无影响。<br />
<!--绑定红色Label的宽度-->
<asp:Label runat="server" ID="lblLong" BackColor="red" Width='<%# vote1 %>'></asp:Label>
<asp:Button runat="server" ID="btnVote1" Text="投票" Height="21px" OnClick="btnVote1_Click" /><br />
<!--绑定选择红色的票数-->
票数:<%=voteCounts[0] %><br />
<!--绑定蓝色Label的宽度-->
<asp:Label runat="server" ID="lblNomal" BackColor="blue" Width='<%# vote2 %>'></asp:Label>
<asp:Button runat="server" ID="btnVot2" Text="投票" Height="22px" OnClick="btnVot2_Click" /><br />
<!--绑定选择蓝色的票数-->
票数:<%=voteCounts[1] %><br />
<!--绑定黄色Label的宽度-->
<asp:Label runat="server" ID="lblNothing" BackColor="yellow" Width='<%# vote3 %>'></asp:Label>
<asp:Button runat="server" ID="btnVot3" Text="投票" Height="22px" OnClick="btnVot3_Click" /><br />
<!--绑定选择黄色的票数-->
票数:<%=voteCounts[2] %><br />
</div>
</form>
</body>
广积粮,筑高墙,缓称王