MVC伪一个12306图片验证码 - 神牛步行3(4)_H5之家 - 中国HTML5教程资源分享第一站

布局视图就是文章开头的截图那样子，这里需要注意的是id=“codeNum”的div必须设置 position: relative ，然后我这里采用jquery绑定如果点击验证码图片就在这个div中增加一个标记点击的图标（我这里是新增div背景对应的是图标，这里注意这些div样式必须是 position: absolute不然无法呈现在id=“codeNum”的父级div上），下面贴出js代码：

$().on(, function (e) { container = $(); 6 var x = e.offsetX; 7 var y = e.offsetY; + y + ); $().on(, function () { 12 $(this).remove(); 13 }); 14 });

就我们登录而言如果验证码验证失败，那么需要重新获取验证码，或者无法选择识别的图片时候需要重新获取另外的验证码，因此有了下面js代码图片验证码切换：

$().on(, function () { ); 4 var nowTime = new Date().getTime(); $().remove(); $.post(, function (result) { 10 if (result) { 11 if (result.IsOk) { ).html(result.Data); ) + + nowTime + + result.Data; , src); ); } 16 } 17 }) 18 }); ).click();

然后登录时候同样按照12306那样获取我们对应点击的图片坐标，并且传递给后端的Acton做登录验证：

$().on(, function () { msg = $(); code = ""; ); 8 for (var i = 0; i < divs.length; i++) { 9 var item = $(divs[i]); + item.position().top + ; 11 } ); return; } $.post(, { code: code }, function (result) { 16 if (result) { 17 msg.html(result.Msg); ).click(); 19 } 20 }); 21 });

好了重头戏的代码都已经发放完整了，下面给出示例整体代码文件包供大家下载：神牛 - 验证码实例

» 2016年一句总结

勤勤恳恳学知识，开开心心给大家

» 2017年一句展望

努力奋斗，挣点钱