C# 页面抽奖实例 asp.net

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <title>LuckyDraw</title>
    <style>
        /*reset css*/
        body {
            font-size: 0.8em;
            letter-spacing: 1px;
            font-family: "微软雅黑";
            line-height: 1.8em;
        }

        div, h2, p, ul, li {
            margin: 0;
            padding: 0;
        }

        h1 {
            font-size: 1em;
            font-weight: normal;
        }

            h1 a {
                background: #047;
                padding: 2px 3px;
                color: #fff;
                text-decoration: none;
            }

                h1 a:hover {
                    background: #a40000;
                    color: #fff;
                    text-decoration: underline;
                }

        h3 {
            color: #888;
            font-weight: bold;
            font-size: 1em;
            margin: 1em auto;
            position: relative;
        }
        /*demo css*/
        h2 {
            background: #a40000;
            font-size: 12px;
            color: #fff;
            font-weight: normal;
            text-align: center;
             100px;
            height: 25px;
            line-height: 25px;
            margin: 30px 0 0 20px;
        }

        ul.line, ul.mulitline {
             500px;
            height: 180px;
           
            overflow: hidden;
            margin-bottom: 20px;
            
        }

         .divName {
           margin-left:10px;
           font-size:66pt;
           font-family:Microsoft YaHei
        }
           .divCompany {
               margin-left:10px;
     
           font-size:48pt;
           font-family:Microsoft YaHei
        }
        ul.mulitline {
            height: 90px;
        }

        li {
            height: 80px;
            text-indent: 80px;
            font-size: 12px;
            line-height: 100px;
            list-style: none;
        }

        .myButtonSearch {
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
            background: -moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
            background: -webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
            background: -o-linear-gradient(top, #599bb3 5%, #408c99 100%);
            background: -ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
            background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
            background-color: #599bb3;
            -moz-border-radius: 9px;
            -webkit-border-radius: 9px;
            border-radius: 9px;
            display: inline-block;
            cursor: pointer;
            color: #ffffff;
            font-family: Arial;
            font-size: 16px;
            font-weight: bold;
            padding: 7px 22px;
            text-decoration: none;
            outline: none;
            border: none;
        }
    </style>
    <script>
        /*******************************

        *******************************/
        $(function () {
            //单行应用
            var _wrap = $('ul.line');//定义滚动区域
            var _interval = 50;//定义滚动间隙时间
            var _moving;//需要清除的动画
            _wrap.hover(function () {
                clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
            }, function () {
                _moving = setInterval(function () {
                    var _field = _wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的
                    var _h = _field.height();//取得每次滚动高度
                    _field.animate({ marginTop: -_h + 'px' }, 6, function () {//通过取负margin值,隐藏第一行
                        _field.css('marginTop', 0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
                    })
                }, _interval)//滚动间隔时间取决于_interval
            }).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
        });
        $(function () {
            //多行应用
            var _wrap = $('ul.mulitline');//定义滚动区域
            var _interval = 3000;//定义滚动间隙时间
            var _moving;//需要清除的动画
            _wrap.hover(function () {
                clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
            }, function () {
                _moving = setInterval(function () {
                    var _field = _wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的
                    var _h = _field.height();//取得每次滚动高度
                    _field.animate({ marginTop: -_h + 'px' }, 600, function () {//通过取负margin值,隐藏第一行
                        _field.css('marginTop', 0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
                    })
                }, _interval)//滚动间隔时间取决于_interval
            }).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
        });

        $(document).keydown(function (e) {
            if (e.keyCode == 13) {
                document.getElementById("<%=btnDraw.ClientID%>").click();
 }

        })
    </script>
</head>
<body style="background:#444 url(Content/bg-image2.jpg);  WIDTH: 100%; HEIGHT: 100% ; margin:0 0 0 0 ; ">
    <form id="form1" runat="server">
        <div style="position:absolute;100%;height:100%">
        <div style="padding-top:30px; position:absolute;  margin:350px 0 0 0;100%;height:400px;background-color:#b2b2b2;filter:alpha(opacity=50);  /* ie 有效*/	-moz-opacity:0.5; /* Firefox  有效*/	opacity: 0.5; /* 通用，其他浏览器  有效*/">
         </div>
         <div style="padding-top:30px;position:relative;   margin:350px 0 0 0;100%;height:400px;">
         <%--   <h2>恭喜获奖者</h2>--%>
            <div  style="margin:0 50px 0 150px;z-index:20;color:white; position:relative; ">
            <div style="font-family:'Microsoft YaHei'; font-size:24pt">恭喜获奖者</div>
            <ul class="line" runat="server" id="NameList"> 
                <%=UserList %>
            </ul>
            <asp:Button ID="btnDraw" Visible="false" CssClass="myButtonSearch" runat="server" Text="Start" OnClick="btnDraw_Click" />
                </div>
        </div>
          </div>
    </form>
</body>
</html>

　　废话不多直接上代码，上面是页面代码

//开始抽奖    
private void DrawStart()
    {
        var dt = GstList().Tables[0];
        StringBuilder sb = new StringBuilder();

        foreach (DataRow r in dt.Rows)
        {
            sb.Append("<li><div class='divName'>" + r["UserName"].ToString() +   "</div></li>");
            sb.Append("<li><div class='divCompany'>" + r["Company"].ToString() + "</div></li>");
        }
        UserList = sb.ToString();

    }
//停止抽奖
    private void DrawEnd()
    {
        var dt = GstOneAndDraw().Tables[0];
        StringBuilder sb = new StringBuilder();
        foreach (DataRow r in dt.Rows)
        {
            sb.Append("<li><div class='divName'>" + r["UserName"].ToString() + "</div>");
            sb.Append("<div class='divCompany'>" + r["Company"].ToString() + "</div></li>");
        }
        UserList = sb.ToString();

    }

//获取抽奖人员列表  随机获取100人的数据
    private DataSet GstList()
    {
        using (SqlConnection connection = new SqlConnection(connectionString))
        {
            DataSet ds = new DataSet();
            try
            {
                connection.Open();
                var SQLString = "select top 100 * from [T_PhoneNo] where [HasDraw]=0 order by newid()";
                SqlDataAdapter command = new SqlDataAdapter(SQLString, connection);

                command.Fill(ds, "ds");

            }
            catch (System.Data.SqlClient.SqlException ex)
            {
                throw new Exception(ex.Message);
            }
            return ds;
        }
    }

//随机获取一个获奖着，并修改获奖状态
    private DataSet GstOneAndDraw()
    {
        using (SqlConnection connection = new SqlConnection(connectionString))
        {
            DataSet ds = new DataSet();
            try
            {
                connection.Open();
                var SQLString = "select top 1 * from [T_PhoneNo] where [HasDraw]=0 order by newid()";
                SqlDataAdapter command = new SqlDataAdapter(SQLString, connection);

                command.Fill(ds, "ds");

                if (ds.Tables[0].Rows.Count > 0)
                {
                    string sqlstr = "update T_PhoneNo set [HasDraw]=1 where  [ID]=" + ds.Tables[0].Rows[0]["ID"];
                    SqlCommand com = new SqlCommand(sqlstr, connection);
                    int j = com.ExecuteNonQuery();
                    if (j > 0)
                    { }
                }

            }
            catch (System.Data.SqlClient.SqlException ex)
            {
                throw new Exception(ex.Message);
            }
            return ds;
        }
    }

//点击抽奖事件
    protected void btnDraw_Click(object sender, EventArgs e)
    {
        if (btnDraw.Text == "Start")
        {
            DrawStart();
            btnDraw.Text = "End";
            return;
        }
        if (btnDraw.Text == "End")
        {
            DrawEnd();
            btnDraw.Text = "Start";
            return;
        }
    }

后台代码如上，献丑了，直接用的ADO.NET，同事给的项目我只是实现了这个功能，大家见笑了