码迷,mamicode.com
首页 > 其他好文 > 详细

artdialog 异步加载页面 生成验证码

时间:2014-06-19 06:30:42      阅读:433      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   java   http   

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、验证码生成类 

bubuko.com,布布扣
  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             finally
110             {
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     }
View Code

 

第4步和第5步 可以不不用只是笔者的记忆力不好 顺便记录的。。。。。。

 

 

 

 

 

 

 

 

 

artdialog 异步加载页面 生成验证码,布布扣,bubuko.com

artdialog 异步加载页面 生成验证码

标签:style   class   blog   code   java   http   

原文地址:http://www.cnblogs.com/nimeide/p/3789515.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!