zoukankan      html  css  js  c++  java
  • javaScript:制作随机验证码

    javaScript:制作随机验证码

    第一步:制作10张图片,上面乱画些字母当然你可要记下来你每张图上的内容阿!!这些图取名1.jpg,2.jpg...0.jpg

    第二步:

    这些代码写在<head><script></script></head>之间:

    function check_rand()//检查用的
    {
      var rand_test;
      rand_test=document.form1.rand_test.value.trim();
      if (rand_test.length==0)
        {alert('请填写验证码。'); return false;}
      else if (rand_test==document.random_value)
                  return true;
         else
         {alert('验证码填写错误。'); return false;}
        
    }

    //下面是生成随机数

    function rnd()
    {
        var today=new Date();
        var seed=today.getTime();
        seed = (seed*9301+49297) % 233280;
        return seed/(233280.0);
    }

    function rand(number)
    {
      return Math.ceil(rnd()*number);
    }  

    //下面是显示图片:

    function show_code()
    {
       var i,num;
       var pic;
       var tag;
       document.random_value=""
     
        num=rand(10);
           switch(num)
           {
          case 1:pic="1";tag="1A43";break;
          case 2:pic="2";tag="50J7";break;   //图片所对应的字母序列
          case 3:pic="3";tag="8900";break;
          case 4:pic="4";tag="LU0E";break;
          case 5:pic="5";tag="7727";break;
          case 6:pic="6";tag="Y943";break;
          case 7:pic="7";tag="35B1";break;
          case 8:pic="8";tag="24P6";break;
          case 9:pic="9";tag="M76M";break;
          case 10:pic="0";tag="8LX5";break;
            }
       
        document.random_value=tag;
        document.form1.img0.src="code/"+pic+".JPG";
    }

    第三步 在网页中显示它

    <body >

        ...

        <td height="26"><div align="right" >验证码:</div></td>
              <td colspan="3"><input type="text" size="5" maxlength="4">           

         <img src="" width="100" height="32" alt="">            </td>

        ...

  • 相关阅读:
    剑指offer(第2版)刷题 Python版汇总
    git学习笔记
    Python中的lambda、map和filter
    算法题 22 折纸问题 (牛客网,今日头条)
    算法题 21 findNSum (好未来,LeetCode,牛客网)
    算法题 20 或与加
    Python的内存管理机制
    【算法题12 解码方法decode way】
    理解循环神经网络的来龙去脉
    机器学习资源个人汇总
  • 原文地址:https://www.cnblogs.com/zengwei/p/898274.html
Copyright © 2011-2022 走看看