Javascript验证码的生成 和 C#生成验证码 以及 iframe的使用——模仿京东网练习的总结
2011-10-31 21:12
901 查看
项目总结：
Javascript验证码的生成
var code ;
function createCode()
{
code = "";
var codeLength = 4;
var checkCode = document.getElementById("checkCode");
var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S',
'T','U','V','W','X','Y','Z');
for(var i=0;i<codeLength;i++)
{
var charIndex = Math.floor(Math.random()*36);
code +=selectChar[charIndex];
}
if(checkCode)
{
checkCode.className="code";
checkCode.innerHTML = code;
}
}
function validate ()
{
var inputCode = document.getElementById("code").value;
if(inputCode.length <=0)
{
alert("请输入验证码");
return 1;
}
else if(inputCode.toUpperCase()!= code )
{
alert("验证码错误");
createCode();
return 2;
}
else
{
return 3;
}
}
C#生成验证码
一、生成随机文字
public string CreateRandomNum(int NumCount)
{
string allChar = "0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,W,X,Z,Y";
string[] allCharArray = allChar.Split(',');
string randomNum = "";
int temp = -1;//记录上次随机数的数值¦尽量避免产生相同的数
Random rand = new Random();
for (int i = 0; i < NumCount; i++)
{
if (temp != -1)
{
rand = new Random(i * temp * ((int)DateTime.Now.Ticks));
}
int t = rand.Next(35);
if (temp == t)
{
return CreateRandomNum(NumCount);
}
temp = t;
randomNum += allCharArray[t];
}
return randomNum;
}
二、生成图片
//生成图片?
private void CreateImage(string validateNum)
{
if (validateNum == null || validateNum.Trim() == String.Empty)
return;
//生成Bitmap图像?
System.Drawing.Bitmap image = new System.Drawing.Bitmap(validateNum.Length * 12 + 10, 22);
Graphics g = Graphics.FromImage(image);
try
{
//生成随机生成器
Random random = new Random();
//清除图片背景色
g.Clear(Color.White);
//画图片的背景噪音线?
for (int i = 0; i < 25; i++)
{
int x1 = random.Next(image.Width);
int x2 = random.Next(image.Width);
int y1 = random.Next(image.Height);
int y2 = random.Next(image.Height);
g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);
}
Font font = new System.Drawing.Font("Arial", 13, (System.Drawing.FontStyle.Bold | System.Drawing.FontStyle.Italic));
System.Drawing.Drawing2D.LinearGradientBrush brush = new System.Drawing.Drawing2D.LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Blue, Color.DarkRed, 1.2f, true);
g.DrawString(validateNum, font, brush, 2, 2);
//画图片的前景噪声点
for (int i = 0; i < 100; i++)
{
int x = random.Next(image.Width);
int y = random.Next(image.Height);
image.SetPixel(x, y, Color.FromArgb(random.Next()));
}
//画图片的边框线?
g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);
System.IO.MemoryStream ms = new System.IO.MemoryStream();
//将图像保存到指定的流
image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);
Response.ClearContent();
Response.ContentType = "image/Gif";
Response.BinaryWrite(ms.ToArray());
}
catch
{
g.Dispose();
image.Dispose();
}
}
Iframe的使用完成父页面和子页面的刷新
Iframe标记的使用格式是:
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
width、height："画中画"区域的宽与高；
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动
条；如为Yes，则显示;
FrameBorder：区域边框的宽度，为了让'画中画'与邻近的内容相融合，常设置为0。
比如:
<Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no" frameborder="0"></iframe>
二、父窗体与浮动帧之间的相互控制
在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体
中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。
1、在父窗体中访问并控制子窗体中的对象
在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。
现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后，就可通过文档
对象模型DOM对Iframe所含的HTML进行一系列控制。
比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
test.htm文件代码为:
<html>
<body>
<h1 id="myH1">hello,my boy</h1>
</body>
</html>
如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:
document.myH1.innerText="hello,my dear"(其中，document可省)
在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。
2、在子窗体中访问并控制父窗体中对象
在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
如example.htm：
<html>
<body onclick="alert(tt.myH1.innerHTML)">
<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
<h1 id="myH2">hello,my wife</h1>
</body>
</html>
如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：
parent.myH2.innerText="hello,my friend"
这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。
Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个'独立王国'哟，在单一HTML中的特性同样适用于浮动帧中。
试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或
函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需
修改一个父窗体的版式即可了。
有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己
Javascript验证码的生成
var code ;
function createCode()
{
code = "";
var codeLength = 4;
var checkCode = document.getElementById("checkCode");
var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S',
'T','U','V','W','X','Y','Z');
for(var i=0;i<codeLength;i++)
{
var charIndex = Math.floor(Math.random()*36);
code +=selectChar[charIndex];
}
if(checkCode)
{
checkCode.className="code";
checkCode.innerHTML = code;
}
}
function validate ()
{
var inputCode = document.getElementById("code").value;
if(inputCode.length <=0)
{
alert("请输入验证码");
return 1;
}
else if(inputCode.toUpperCase()!= code )
{
alert("验证码错误");
createCode();
return 2;
}
else
{
return 3;
}
}
C#生成验证码
一、生成随机文字
public string CreateRandomNum(int NumCount)
{
string allChar = "0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,W,X,Z,Y";
string[] allCharArray = allChar.Split(',');
string randomNum = "";
int temp = -1;//记录上次随机数的数值¦尽量避免产生相同的数
Random rand = new Random();
for (int i = 0; i < NumCount; i++)
{
if (temp != -1)
{
rand = new Random(i * temp * ((int)DateTime.Now.Ticks));
}
int t = rand.Next(35);
if (temp == t)
{
return CreateRandomNum(NumCount);
}
temp = t;
randomNum += allCharArray[t];
}
return randomNum;
}
二、生成图片
//生成图片?
private void CreateImage(string validateNum)
{
if (validateNum == null || validateNum.Trim() == String.Empty)
return;
//生成Bitmap图像?
System.Drawing.Bitmap image = new System.Drawing.Bitmap(validateNum.Length * 12 + 10, 22);
Graphics g = Graphics.FromImage(image);
try
{
//生成随机生成器
Random random = new Random();
//清除图片背景色
g.Clear(Color.White);
//画图片的背景噪音线?
for (int i = 0; i < 25; i++)
{
int x1 = random.Next(image.Width);
int x2 = random.Next(image.Width);
int y1 = random.Next(image.Height);
int y2 = random.Next(image.Height);
g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);
}
Font font = new System.Drawing.Font("Arial", 13, (System.Drawing.FontStyle.Bold | System.Drawing.FontStyle.Italic));
System.Drawing.Drawing2D.LinearGradientBrush brush = new System.Drawing.Drawing2D.LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Blue, Color.DarkRed, 1.2f, true);
g.DrawString(validateNum, font, brush, 2, 2);
//画图片的前景噪声点
for (int i = 0; i < 100; i++)
{
int x = random.Next(image.Width);
int y = random.Next(image.Height);
image.SetPixel(x, y, Color.FromArgb(random.Next()));
}
//画图片的边框线?
g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);
System.IO.MemoryStream ms = new System.IO.MemoryStream();
//将图像保存到指定的流
image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);
Response.ClearContent();
Response.ContentType = "image/Gif";
Response.BinaryWrite(ms.ToArray());
}
catch
{
g.Dispose();
image.Dispose();
}
}
Iframe的使用完成父页面和子页面的刷新
Iframe标记的使用格式是:
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
width、height："画中画"区域的宽与高；
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动
条；如为Yes，则显示;
FrameBorder：区域边框的宽度，为了让'画中画'与邻近的内容相融合，常设置为0。
比如:
<Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no" frameborder="0"></iframe>
二、父窗体与浮动帧之间的相互控制
在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体
中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。
1、在父窗体中访问并控制子窗体中的对象
在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。
现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后，就可通过文档
对象模型DOM对Iframe所含的HTML进行一系列控制。
比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
test.htm文件代码为:
<html>
<body>
<h1 id="myH1">hello,my boy</h1>
</body>
</html>
如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:
document.myH1.innerText="hello,my dear"(其中，document可省)
在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。
2、在子窗体中访问并控制父窗体中对象
在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
如example.htm：
<html>
<body onclick="alert(tt.myH1.innerHTML)">
<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
<h1 id="myH2">hello,my wife</h1>
</body>
</html>
如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：
parent.myH2.innerText="hello,my friend"
这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。
Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个'独立王国'哟，在单一HTML中的特性同样适用于浮动帧中。
试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或
函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需
修改一个父窗体的版式即可了。
有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 1.C#开发winform 开发调运检疫离线制证功能。调用cLodop打印控件（NVelocity模块,生成HTML（包含cLodop打印控件的js），使用WebBrowser，展现网页）总结
- C#和Javascript中 正则表达式使用的总结
- Pyhton每日练习 08 使用 Python 生成类似于下图中的字母+数字验证码图片
- c# cookie的使用，以及与javascript cookie的交互
- Codeigniter 以及 javascript 等使用总结（不断更新）
- C# 生成Json的使用总结
- iOS 生成本地验证码以及使用
- 如何在iOS中使用ZXing库（ZXing是一个开源的条码生成和扫描库，开源协议为Apache2.0。它持众多条码格式和语言，比如Java、 C++、 C#、 Objective-C以及Act ）
- 使用C#语言生成验证码
- C#中如何创建、生成以及使用DLL
- 使用javascript生成验证码
- Java Web学习总结（22）——使用kaptcha生成验证码
- Asp.net或C#使用word模板生成替换后的Word和pdf文档-总结
- Java Web学习总结（22）——使用kaptcha生成验证码
- 验证码生成技术的学习总结(C#)
- Java Web学习总结（22）——使用kaptcha生成验证码
- ASP.NET MVC WebApi 返回数据类型序列化控制（json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面，各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目
- JavaWeb学习总结(六)---使用kaptcha生成验证码
- C#.net制作验证码（英文与数字组成的4位随机数），以及MD5值的使用
- 使用纯JavaScript或者jquery插件实现各种验证码总结