html5网站的loading是怎么做的_安全

loadding动画现在有2中方式实现：

1旧方法：用PS或者Flash制作gif格式的动态，导入到html里面

2用css3的动画属性（animite）,直接通过样式+div就可以制作出loading效果

当然优缺点也很明显，第一种方法不需要考虑兼容性，第二种方法，适用于移动端和PC端上高版本的浏览器，因为低版本的浏览器对css3的兼容性只有一个词来形容--坑爹啊。

using System;
using SystemCollectionsGeneric;
using SystemDrawing;
using SystemDrawingDrawing2D;
using SystemDrawingImaging;
using SystemIO;
using SystemLinq;
using SystemWeb;
using SystemWebMvc;
namespace NewsControllers
{
public class ImageCodeController : Controller
{
//
// GET: /ImageCode/
public ActionResult Index()
{
return View();
}
#region 生成验证码
/// <summary>
/// 比较中的字符和用户输入的字符
/// </summary>
/// <param name="uCode"></param>
/// <returns></returns>
public string GetCodeResult(string uCode)
{
string oldcode = Session["oldcode"] as string;
if (uCodeToLower() == oldcodeToLower())
{
return "yes";//用户输入正确
}
else
{
return "no";//用户输入错误
}
}
/// <summary>
/// 生成指定长度的字符串
/// </summary>
/// <returns></returns>
public ActionResult SecurityCode()
{
string code = CreateRandomCode(4); //验证码的字符为4个
Session["oldcode"] = code;//生成后，存在session中，用于和用户输入的值比较
return File(CreateValidateGraphic(code), "image/Jpeg");
}
/// <summary>
/// 生成随机的字符串
/// </summary>
/// <param name="codeCount"></param>
/// <returns></returns>
public string CreateRandomCode(int codeCount)
{
string allChar = "0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,a,b,c,d,e,f,g,h,i,g,k,l,m,n,o,p,q,r,F,G,H,I,G,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,s,t,u,v,w,x,y,z";
string[] allCharArray = allCharSplit(',');
string randomCode = "";
int temp = -1;
Random rand = new Random();
for (int i = 0; i < codeCount; i++)
{
if (temp != -1)
{
rand = new Random(i temp ((int)DateTimeNowTicks));
}
int t = randNext(35);
if (temp == t)
{
return CreateRandomCode(codeCount);
}
temp = t;
randomCode += allCharArray[t];
}
return randomCode;
}
/// <summary>
/// 创建验证码
/// </summary>
/// <param name="validateCode"></param>
/// <returns></returns>
public byte[] CreateValidateGraphic(string validateCode)
{
Bitmap image = new Bitmap((int)MathCeiling(validateCodeLength 160), 27);
Graphics g = GraphicsFromImage(image);
try
{
//生成随机生成器
Random random = new Random();
//清空背景色
gClear(ColorWhite);
//画的干扰线
for (int i = 0; i < 25; i++)
{
int x1 = randomNext(imageWidth);
int x2 = randomNext(imageWidth);
int y1 = randomNext(imageHeight);
int y2 = randomNext(imageHeight);
gDrawLine(new Pen(ColorSilver), x1, x2, y1, y2);
}
Font font = new Font("Arial", 13, (FontStyleBold | FontStyleItalic));
LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, imageWidth, imageHeight), ColorBlue, ColorDarkRed, 12f, true);
gDrawString(validateCode, font, brush, 3, 2);
//画的前景干扰线
for (int i = 0; i < 100; i++)
{
int x = randomNext(imageWidth);
int y = randomNext(imageHeight);
imageSetPixel(x, y, ColorFromArgb(randomNext()));
}
//画的边框线
gDrawRectangle(new Pen(ColorSilver), 0, 0, imageWidth - 1, imageHeight - 1);
//保存数据
MemoryStream stream = new MemoryStream();
imageSave(stream, ImageFormatJpeg);
//输出流
return streamToArray();
}
finally
{
gDispose();
imageDispose();
}
}
#endregion
}
}
----------------------控制器（上）------页面（下）-------------------------------
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/js/jquery-172minjs"></script>
</head>
<body>
<div>
<img src="/ImageCode/SecurityCode" id="imageclick" onclick="thissrc=thissrc+''" />
<input type="text" value="" id="uCode" />
<a href="javaScript:;" id="click">确定</a>
</div>
</body>
</html>
<script type="text/javascript">
$("#click")click(function () {
//用户输入
var uCode = $trim($("#uCode")val());
//中显示的
//获取点击后获取的值,并和用户输入的值进行比较
$post("/ImageCode/GetCodeResult", { uCode: uCode }, function (data) {
if (data == "yes") {
alert("yes");
} else {
alert("验证码输入错误，请重新输入");
//$("#imageclick")click();//错误后，自动点击，生成下一个验证码（可选）
}
});
});
</script>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/yw/13343624.html

html5网站的loading是怎么做的

发表评论

评论列表（0条）