Chinaunix首页 | 论坛 | 博客

纸上得来终觉浅

首页　| 　博文目录　| 　关于我

水中残月

  • 博客访问： 158273
  • 博文数量： 42
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 399
  • 用 户 组： 普通用户
  • 注册时间： 2015-09-23 11:47
个人简介

程序猿啊程序猿

文章分类

全部博文（42）

文章存档

2016年（28）

2015年（14）

我的朋友
最近访客
推荐博文
JS实现验证码并在客户端验证

分类： JavaScript

2016-02-18 14:07:25


点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html lang="zh-ch">
  3. <head>
  4.   <title>JS实现验证码</title>
  5.   <meta charset="UTF-8">
  6. <script src="jquery.js"></script>
  7. <style type="text/css">
  8. label{
  9.   float: left;
  10.   line-height: 30px;
  11. }
  12. .input{
  13.   float: left;
  14.   width: 100px;
  15.   height: 30px;
  16.   padding: 0;
  17.   margin: 0;
  18. }
  19. #code{
  20.   display: inline-block;
  21.   float: left;
  22.   height: 30px;
  23.   width: 100px;
  24.   background:white;
  25.   text-align: center;
  26.   line-height: 30px;
  27.   font-weight: bolder;
  28.   cursor: pointer;
  29.   position: relative;
  30.   left:10px;
  31. }
  32. .p{
  33.    cursor: pointer;
  34.    display: inline-block;
  35.    line-height: 30px;
  36.    position: relative;
  37.    left:10px;
  38.    top:-15px;
  39. }
  40. .p a{
  41.   text-decoration: underline;
  42.   color: blue;
  43. }
  44. .p a:hover{
  45.   color: red;
  46. }
  47. </style>
  48. <script type="text/javascript">
  49.  function codecreate(){
  50.     var code="";
  51.     var color="#";
  52.     var fontcolor="#";
  53.     var array= 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',
  54.      'S','T','U','V','W','X','Y','Z')
  55.     for(var i=0;i<4;i++){
  56.       code += array[Math.floor(Math.random()*36)]+" ";
  57.     }
  58.     for(var i=0;i<6;i++){
  59.       color+= array[Math.floor(Math.random()*16)];
  60.     }
  61.     for(var i=0;i<6;i++){
  62.       fontcolor+= array[Math.floor(Math.random()*16)];
  63.     }
  64.   document.getElementById("code").innerHTML=code;
  65.   document.getElementById("code").style.backgroundColor=color;
  66.   document.getElementById("code").style.color=fontcolor;
  67.   }
  68.   $(document).ready(function(){
  69.     $("#code").hide();
  70.     $(".p").click(function(){
  71.       $(".p").hide();
  72.       $("#code").show();
  73.     })
  74.     $("#yzm").blur(function(){
  75.        var val=document.getElementById("yzm").value.toUpperCase();
  76.         var codeval=document.getElementById("code").innerHTML.replace(/\s/g,"");
  77.       if(String(val)==""&&String(codeval)==""){
  78.           alert("请填写验证码");
  79.         }
  80.         else if(String(val)===String(codeval)){
  81.         $(".yanz").text("?").css("color","blue");
  82.         }
  83.         else{
  84.           $(".yanz").text("?").css("color","red");
  85.         }
  86.     })
  87.   })

  89.   function codecheck(){
  90.     var val=document.getElementById("yzm").value.toUpperCase();
  91.     var codeval=document.getElementById("code").innerHTML.replace(/\s/g,"");
  92.     if(String(val)==""&&String(codeval)==""){
  93.           alert("请填写验证码");
  94.         }
  95.     else if(String(val)===String(codeval)){
  96.     alert('验证码正确');
  97.     }
  98.     else{
  99.       alert("验证码不正确")
  100.     }
  101.   }
  102. </script>
  103. </head>
  104. <body>
  105. <label for="yzm">验证码：</label><input type="text" class="input" id="yzm">
  106. <div id="code" onclick="codecreate()"></div>
  107. <p onclick="codecreate()" class="p"><a>点此获得验证码</a></p>
  108. <p class="yanz" style="position:relative;left:20px;display:inline-block;top:-10px;"></p>
  109. <div style="clear:both"></div>
  110. <input type="button" value="刷新验证码" onclick="codecreate()" style="display:block;position:absolute;top:100px;">
  111. </body>
  112. </html>

阅读(999) | 评论(0) | 转发(0) |
0

上一篇：Jquery实现缩略图轮播特效

下一篇：JS实现新闻条垂直无缝滚动

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6