代码改变世界

简单弹出层与随机验证码

2012-11-21 16:39  露珠的微笑  阅读(2199)  评论(0)    收藏  举报

一、简单弹出层

在静态页面<body>最后放入如下的弹出层的内容：（红色是弹出层，是必须的。黑色的html代码是弹出层内容）

<!--Popup to save Template -->
<div id="open_div">
  <h4 >Create My Template </h4>
  <div style="margin:0px auto; width:480px;"><div class="commonBox">
    <p><label id="tips">Report Name :</label><input type="text" name="reportName" id="reportName" /></p>
    <p><label id="tip2">Description:</label>
      <textarea name="reportText" cols="30" rows="5" id="reportText"></textarea>
    </p>
    <p><label>Your Choice:</label>
      <select name="select" id="delOrUp">
        <option value="1">Delete</option>
        <option value="2">Update</option>
      </select>
    </p>
    <p style="text-align:center; width:100%;"> 
        <input type="button" value="Save" onclick="saveTemplate();" />
        <input type="button" value="Close" onclick="CloseDiv()" />
    </p>
    <div class="cls"></div>
  </div></div>
</div>
<!--遮罩层-->
<div style="position:absolute;display:none; left :0px; top:0px; width:100%; height:4300%;background-color:#000000;filter:alpha(Opacity=10);opacity:0.1;" id="tranDivBack">

对就的CSS:（可根据需要调整弹出层的样式）

#open_div{
   display:none;
   width:550px;
   height:auto;
   position:fixed;
   padding:10px;
   border:solid 5px #333;
   background:#FFF;
   z-index:9999;
}

JS代码控制弹出层的关闭打开：

 function PopupDive() {
            
            var winWidth = $(window).width();
            var winHeight = $(window).height();
            var DivWidth = $("#centerWin").width() / 2;
            var DivHeight = $("#centerWin").height() / 2;
            $("#tranDivBack").css("width", winWidth + "px");
            $("#tranDivBack").css("height", $(window).height() + "px");
            $("#tranDivBack").css("display", "block");
            $("#open_div").fadeIn("slow");
            $("#open_div").css("left", $(window).width() / 2 - 200 + "px");
            $("#open_div").css("top", $(window).height() / 2 - 200 + "px");

        }

 这次新需求的弹出层结果图：

 二、随机验证码

verifyCode
 <%@ WebHandler Language="C#" Class="verifyCode" %>
 
 using System;
 using System.Web;
 using System.Web.SessionState;//第一步导入命名空间
 using System.Drawing;
 
 public class VerifyCode : IHttpHandler, IRequiresSessionState
 {//第二步实现接口 就和平常一样可以使用session
 
 public void ProcessRequest(HttpContext context)
 {
 string checkCode = this.CreateRandomCode(4).ToLower();
 context.Session["checkCode"] = checkCode;
 this.CreateImage(context, checkCode);
 }
 
 public bool IsReusable
 {
 get
 {
 return false;
 }
 }
 
 /// <summary>
  /// 按位生成随机
  /// </summary>
  /// <param name="codeCount"></param>
  /// <returns></returns>
  private string CreateRandomCode(int codeCount)
 {
 int number;
 string checkCode = String.Empty;
 Random random = new Random();
 for (int i = 0; i < codeCount; i++)
 {
 number = random.Next(100);
 switch (number % 3)
 {
 case 0:
 checkCode += ((char)('0' + (char)(number % 10))).ToString();
 break;
 case 1:
 checkCode += ((char)('a' + (char)(number % 26))).ToString();
 break;
 case 2:
 checkCode += ((char)('A' + (char)(number % 26))).ToString();
 break;
 default:
 break;
 }
 }
 return checkCode;
 }
 
 /// <summary>
  /// 根据字符生成图片
  /// </summary>
  /// <param name="context"></param>
  /// <param name="checkCode"></param>
  private void CreateImage(HttpContext context,string checkCode)
 {
 int randAngle = 45;//随机转动角度
  int iwidth = (int)(checkCode.Length * 23);
 //封装GDI+ 位图，此位图由图形图像及其属性的像素数据组成，指定的宽度和高度。以像素为单位
  System.Drawing.Bitmap image = new System.Drawing.Bitmap(iwidth, 28);
 
 //封装一个　GDI+绘图图面。无法继承此类。从指定的Image创建新的 Graphics
  Graphics g = Graphics.FromImage(image);
 
 //清除整个绘图面并以指定背景填充
  g.Clear(Color.AliceBlue);
 
 //画一个边框
  g.DrawRectangle(new Pen(Color.Black, 0), 0, 0, image.Width - 1, image.Height - 1);
 
 //定义绘制直线和曲线的对象。（只是Pen的颜色，指示此Pen的宽度的值）
  Pen blackPen = new Pen(Color.LightGray, 0);
 
 Random rand = new Random();
 
 //划横线的条数 可以根据自己的要求 
 
 for (int i = 0; i < 50; i++)
 {
 //随机高度
  //int y = rand.Next(image.Height);
  /*绘制一条连线由坐标对指定的两个点的线条
  线条颜色、宽度和样式，第一个点的x坐标和y坐标，第二个点的x坐标和y坐标*/
 //g.DrawLine(blackPen, 0, y, image.Width, y);
  int x = rand.Next(0, image.Width);
 int y = rand.Next(0, image.Height);
 //画矩形，坐标（x,y）宽高(1,1)
  g.DrawRectangle(blackPen, x, y, 1, 1);
 }
 
 //拆散字符串成单个字符数组
  char[] chars = checkCode.ToCharArray();
 
 //文字居中
  StringFormat format = new StringFormat(StringFormatFlags.NoClip);
 format.Alignment = StringAlignment.Center;
 format.LineAlignment = StringAlignment.Center;
 
 //定义颜色
  Color[] c = { Color.Black, Color.DarkGray, Color.DarkOrange, Color.Red, Color.DarkBlue, Color.Green, Color.Orange, Color.Brown, Color.DarkCyan, Color.Purple };
 //定义字体
  string[] font = { "Verdana", "Microsoft Sans Serif", "Comic Sans MS", "Arial", "宋体", "Arial Baltic" };
 
 for (int i = 0; i < chars.Length; i++)
 {
 int cindex = rand.Next(c.Length);
 int findex = rand.Next(font.Length);
 
 //font　封装在特定设备上呈现特定字体所需的纹理和资源（字体，大小，字体样式）
  Font f = new System.Drawing.Font(font[findex], 16, System.Drawing.FontStyle.Bold);
 
 /*Brush定义用于填充图形图像（如矩形、椭圆、圆形、多边形和封闭路径）的内部对象
  SolidBrush(Color.White)初始化指定的颜色　指定画笔颜色为白色*/
 Brush b = new System.Drawing.SolidBrush(c[cindex]);
 
 Point dot = new Point(16, 16);
 
 //转动的度数
  float angle = rand.Next(-randAngle, randAngle);
 
 //移动光标到指定位置
  g.TranslateTransform(dot.X, dot.Y);
 g.RotateTransform(angle);
 /*在指定的位置并且用指定的Brush和Font对象绘制指定的文本字符串
  （指定的字符串，字符串的文本格式，绘制文本颜色和纹理，所绘制文本的左上角的x坐标，坐标）*/
 g.DrawString(chars[i].ToString(), f, b, 1, 1, format);
 //转回去
  g.RotateTransform(-angle);
 //移动光标指定位置
  g.TranslateTransform(2, -dot.Y);
 }
 //创建存储区为内存流
  System.IO.MemoryStream ms = new System.IO.MemoryStream();
 
 //将此图像以指定的格式保存到指定的流中（将其保存在内存流中，图像的格式）
  image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
 
 //清除缓冲区将流中的内容输出
  context.Response.ClearContent();
 
 //获取输出流的类型
  context.Response.ContentType = "image/Jpeg";
 
 //将二进制字符串写入HTTP输出流
  context.Response.BinaryWrite(ms.ToArray());
 
 g.Dispose();
 
 image.Dispose();
 }
 }