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;
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 () {
//单行应用
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;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的更多相关文章
- 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head> <meta charset="UT ...
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...
- PHP+jQuery开发简单的翻牌抽奖实例
PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: <ul ...
- jQuery File Upload 单页面多实例的实现
jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...
- HTML与CSS简单页面效果实例
本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...
- PHP+Ajax微信手机端九宫格抽奖实例
PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现.支持可以设置中奖概率等. 奖品列表 <div class="lottery ...
- php+lottery.js制作九宫格抽奖实例
php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...
- 3.8.1 HTML与CSS简单页面效果实例
HTML与CSS简单页面效果实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- 整理ASP.NET MVC 5各种错误请求[401,403,404,500]的拦截及自定义页面处理实例
http://2sharings.com/2015/asp-net-mvc-5-custom-404-500-error-hanlde https://blog.csdn.net/yhyhyhy/ar ...
随机推荐
- 2015-9-13 NOIP模拟赛解题报告(by hzwer)
小奇挖矿 「题目背景」 小奇要开采一些矿物,它驾驶着一台带有钻头(初始能力值w)的飞船,按既定路线依次飞过喵星系的n个星球. 「问题描述」 星球分为2类:资源型和维修型. 1.资源型:含矿物质量a[i ...
- JavaScript Debug 之 Console
简评:只知道 console.log ?是时候提升一下对 console 的认知了. JavaScript console 是现代浏览器的一种内置功能,它允许开发者: 查看网页上的错误和警告日志. 使 ...
- Python环境安装与升级
Python是跨平台的,它可以运行在Windows,Mac,Linux/Unix系统上,在Windows上写的Python程序,在Linux上也是能够运行的.目前,Python有两个大版本,一个是2. ...
- 检查java 中有多少个构造函数
检查函数中有多少个构造函数 程序设计思想: 用while来循环,并设置一个布尔类型变量c,当c是true是继续添加构造函数,当c是false是,跳出循环,程序结束.在循环体中,声明一个计数的int型变 ...
- 对cors的理解
一.简介 CORS需要浏览器和服务器同时支持.目前,所有浏览器都支持该功能,IE浏览器不能低于IE10. 整个CORS通信过程,都是浏览器自动完成,不需要用户参与.对于开发者来说,CORS通信与同源的 ...
- 接口自动化之unittest初探
最近几天苦心钻研unittest,终于略有所得,所以想来跟大家分享一下.有关python和unittest的基础知识部分就不在一一细说,相信各位也不是小白了.如果需要我整理基础知识,欢迎留言,我会看情 ...
- jdbc连接oracle的url的三种写法
JDBC 链接oracle的三种URL写法 1.普通SID方式 jdbc:oracle:thin:username/password@x.x.x.1:1521:SID 2.普通ServerNa ...
- [转] ScalaTest测试框架
[From] https://blog.csdn.net/hany3000/article/details/51033610 ScalaTest测试框架 2016年04月01日 02:49:35 阅读 ...
- Eureka 高可用 - 踩坑回忆
1.application.yml中eureka配置更改 ## Eurake 公用配置 ## 向其他注册中心注册 eureka.client.register-with-eureka=true ## ...
- PIE SDK影像坏线修复
1.算法功能简介 坏条带的由来:2003年5月31日,Landsat-7ETM+机载扫描行校正器(SLC) 故障,导致此后获取的影像出现了数据条带丢失,严重影响了Landsat ETM遥感影像的使用. ...