標籤：style blog http io ar color os sp for
<!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; width: 100px; height: 25px; line-height: 25px; margin: 30px 0 0 20px; } ul.line, ul.mulitline { width: 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 () { //單行應用@Mr.Think 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 () { //多行應用@Mr.Think 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;width:100%;height:100%"> <div style="padding-top:30px; position:absolute; margin:350px 0 0 0;width: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;width: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，同事給的項目 我只是實現了這個功能，大家見笑了
C# 頁面抽獎執行個體 asp.net
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
