1 JS实现验证码倒计时效果
效果如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../static/js/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function () { var wait=30; function time(o){ if (wait==0) { o.removeAttribute("disabled"); o.innerHTML="输入验证码"; o.style.backgroundColor="#fe9900"; wait=30; }else{ o.setAttribute("disabled", true); o.innerHTML=wait+"秒后重新获取"; o.style.backgroundColor="#8f8b8b"; wait--; setTimeout(function(){ time(o) },1000) } } $(".getCode").click(function(){ time(this); }); }) </script> </head> <body> <button class="getCode" style="width: 120px;height: 50px;background: #FE9900;color: white;border: none">获取验证码</button> </body> </html>
2 JS生成验证码
效果如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS生成验证码</title> <style type="text/css"> .code { background-image: url(code.jpg); font-family: Arial; font-style: italic; color: Red; border: 0; padding: 2px 3px; letter-spacing: 3px; font-weight: bolder; } .unchanged { border: 0; } </style> <script language="javascript" type="text/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]; } //alert(code); if (checkCode) { checkCode.className = "code"; checkCode.value = code; } } function validate() { var inputCode = document.getElementById("input1").value; if (inputCode.length <= 0) { alert("请输入验证码!"); } else if (inputCode != code) { alert("验证码输入错误!"); createCode();//刷新验证码 } else { alert("^-^ OK"); } } </script> </head> <body onload="createCode()"> <form action="#"> <input type="text" id="input1" /> <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px" /><br /> <input id="Button1" onclick="validate();" type="button" value="确定" /> </form> </body> </html>
3 js 实现 图片刷新 验证码 看不清 换一张
【需求】
html+js实现html中一个图片刷新但是整个页面不刷新,或者是验证码刷新。
不使用jsp,不使用ajax,不使用js框架。
【原理】
当一个<img>的src改变时,页面会自动刷新这个<img>
【实现代码】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test</title> <script type="text/javascript"> function reImg(){ var img = document.getElementById("Img"); img.src = "Img?rnd=" + Math.random(); } </script> </head> <body> <center> <img id="Img" src="Img" alt="验证码" /> <a href="#" onclick="reImg();">看不清,换一张</a> </center> </body> </html>