首页 > 代码库 > artdialog 异步加载页面 生成验证码
artdialog 异步加载页面 生成验证码
artdialog 异步加载一个页面
需求：例如现在好多网站的登录或注册 都是点击弹出一个层出来 然后在上面登录、注册
这个登录可能在网站的每个页面都会有，但是我们又不能在每个页面都这一段html加载出来不显示，到需要用的时候，在给shou出来，这样做于情于理都说!不！！过！！！去！！！！！！
恰好以前接触过artdialog 不多说上代码，(注意思维，代码是死的方法是活，解决需求不一定非要这个方法 )
1、页面html代码
1 <head runat="server"> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3 <title></title> 4 <script src="js/jquery-1.10.1.min.js"></script> 5 <script src="js/artdialog/jquery.artDialog.js"></script> 6 <script src="js/artdialog/iframeTools.js"></script> 7 <script src="js/site.js"></script> 8 <link href="js/artdialog/skins/default.css" rel="stylesheet" /> 9 </head>10 <body>11 <form id="form1" runat="server">12 <div>13 </div>14 </form>15 <button id="shouurl">点我弹出层</button>16 17 </body>18 </html>
2、js代码
$(document).ready(function () { $("#shouurl").click(function () { var tit = ""; //这里可以换成$.get $.post $ajax 等异步加载的方法 $.get("WebForm1.aspx", function (d) { //要注意这个里的写法 $.dialog 和art.dialog的区别， //本人就是在这里纠结了一个多小时,js闭包的概念 art.dialog({ id: ‘N3690‘, title: typeof (tit) == "string" ? (tit.length == 0 ? "正在加载" : tit) : tit, lock: true, background: ‘#FFF‘, //锁屏背景色 opacity: 0.87, //锁屏透明度 width: ‘500px‘, height: 240, content: d, cache: false }); }); });});
3、异步加载的页面(笔者在这个加载出来的页面做了一个验证码的功能)
1 <head runat="server"> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3 <script src="js/jquery-1.10.1.min.js"></script> 4 <title></title> 5 <script type="text/javascript"> 6 $(document).ready(function () { 7 $("#vc").click(function () { 8 $(this).attr("src", "/Handler.ashx?act=vc"); 9 });10 });11 12 </script>13 </head>14 <body>15 <form id="form1" runat="server">16 <div>17 <img src="" id="vc" width="80" height="50"/>18 </div>19 </form>20 </body>
4、后台代码(验证码C#)
1 public void ProcessRequest(HttpContext context) 2 { 3 context.Response.ContentType = "text/plain"; 4 5 if (context.Request["act"] == "vc")//获取查询列表 6 { 7 GetValidateCode(); 8 } 9 }10 public void GetValidateCode() 11 {12 Comm.ValidateCode code = new Comm.ValidateCode();13 string chkCode = code.CreateValidateCode(4);14 //Session["CheckCode"] = chkCode;15 //Session["TimeOut"] = DateTime.Now;16 HttpContext.Current.Response.BinaryWrite(code.CreateValidateGraphic(chkCode));17 }
5、验证码生成类
1 /// <summary> 2 /// 生成验证码的类 3 /// </summary> 4 public class ValidateCode 5 { 6 public ValidateCode() 7 { 8 } 9 /// <summary> 10 /// 验证码的最大长度 11 /// </summary> 12 public int MaxLength 13 { 14 get { return 10; } 15 } 16 /// <summary> 17 /// 验证码的最小长度 18 /// </summary> 19 public int MinLength 20 { 21 get { return 1; } 22 } 23 /// <summary> 24 /// 生成验证码 25 /// </summary> 26 /// <param name="length">指定验证码的长度</param> 27 /// <returns></returns> 28 public string CreateValidateCode(int length) 29 { 30 int[] randMembers = new int[length]; 31 int[] validateNums = new int[length]; 32 string validateNumberStr = ""; 33 //生成起始序列值 34 int seekSeek = unchecked((int)DateTime.Now.Ticks); 35 Random seekRand = new Random(seekSeek); 36 int beginSeek = (int)seekRand.Next(0, Int32.MaxValue - length * 10000); 37 int[] seeks = new int[length]; 38 for (int i = 0; i < length; i++) 39 { 40 beginSeek += 10000; 41 seeks[i] = beginSeek; 42 } 43 //生成随机数字 44 for (int i = 0; i < length; i++) 45 { 46 Random rand = new Random(seeks[i]); 47 int pownum = 1 * (int)Math.Pow(10, length); 48 randMembers[i] = rand.Next(pownum, Int32.MaxValue); 49 } 50 //抽取随机数字 51 for (int i = 0; i < length; i++) 52 { 53 string numStr = randMembers[i].ToString(); 54 int numLength = numStr.Length; 55 Random rand = new Random(); 56 int numPosition = rand.Next(0, numLength - 1); 57 validateNums[i] = Int32.Parse(numStr.Substring(numPosition, 1)); 58 } 59 //生成验证码 60 for (int i = 0; i < length; i++) 61 { 62 validateNumberStr += validateNums[i].ToString(); 63 } 64 return validateNumberStr; 65 } 66 /// <summary> 67 /// 创建验证码的图片 68 /// </summary> 69 /// <param name="containsPage">要输出到的page对象</param> 70 /// <param name="validateNum">验证码</param> 71 public byte[] CreateValidateGraphic(string validateCode) 72 { 73 Bitmap image = new Bitmap((int)Math.Ceiling(validateCode.Length * 12.0), 22); 74 Graphics g = Graphics.FromImage(image); 75 try 76 { 77 //生成随机生成器 78 Random random = new Random(); 79 //清空图片背景色 80 g.Clear(Color.White); 81 //画图片的干扰线 82 for (int i = 0; i < 25; i++) 83 { 84 int x1 = random.Next(image.Width); 85 int x2 = random.Next(image.Width); 86 int y1 = random.Next(image.Height); 87 int y2 = random.Next(image.Height); 88 g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2); 89 } 90 Font font = new Font("Arial", 12, (FontStyle.Bold | FontStyle.Italic)); 91 LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), 92 Color.Blue, Color.DarkRed, 1.2f, true); 93 g.DrawString(validateCode, font, brush, 3, 2); 94 //画图片的前景干扰点 95 for (int i = 0; i < 100; i++) 96 { 97 int x = random.Next(image.Width); 98 int y = random.Next(image.Height); 99 image.SetPixel(x, y, Color.FromArgb(random.Next()));100 }101 //画图片的边框线102 g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);103 //保存图片数据104 MemoryStream stream = new MemoryStream();105 image.Save(stream, ImageFormat.Jpeg);106 //输出图片流107 return stream.ToArray();108 }109 finally110 {111 g.Dispose();112 image.Dispose();113 }114 }115 /// <summary>116 /// 得到验证码图片的长度117 /// </summary>118 /// <param name="validateNumLength">验证码的长度</param>119 /// <returns></returns>120 public static int GetImageWidth(int validateNumLength)121 {122 return (int)(validateNumLength * 12.0);123 }124 /// <summary>125 /// 得到验证码的高度126 /// </summary>127 /// <returns></returns>128 public static double GetImageHeight()129 {130 return 22.5;131 }132 }
第4步和第5步 可以不不用只是笔者的记忆力不好 顺便记录的。。。。。。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。