• js生成十六进制随机数


    登陆验证码实现:登陆页面(php)生成16进制随机数,并带着随机数到valcode.php页面生成验证码

    <?php
      if(isset($_SESSION)){session_start();}
      include_once 'conn/conn.php';
      for($i=0;$i<4;$i++){
      	$num= dechex(rand(0,15));//生成16进制随机数
      }
    ?>
    <p>
    <span>用户名:
        <input id="lgname" type="text" style="  75px; height: 16px; border: 1px #999999 solid;" />
          </span><br />
          <span>密  码:
          <input id="lgpwd" type="password" style=" 75px; height: 16px; border: 1px #999999 solid;" />
          </span><br />
          <span>验证码:
          <input id="lgchk" type="text" style="  75px; height: 16px; border: 1px #999999 solid;" />
          </span><br /> 
      <span>
          <img id='chkid' src="./valcode.php?num=<?php echo $num; ?>" width="55" height="18" /> 
          <a id="changea" style="cursor:hand;">看不清</a>
      </span>
    </p>
    <div style="  height: 25px; line-height: 25px;">
        <input id="chknm" name="chknm" type="hidden" value="<?php echo $num; ?>"/>
        <a id="lgbtn" style=" color:#f0f0f0;">登录</a> 
        <a id="reg" style=" color:#f0f0f0;">注册</a> 
        <a id="foundbtn" style=" color:#f0f0f0;">找回密码</a>
        </div>
    </div>
    

     当点击“看不清”的时候,从用户体验效果出发,需要使用JavaScript无刷新生成验证码;但是使用JavaScript生成十六进制随机数,稍有些复杂。JavaScript中不能直接将十进制数转为十六进制,需要手动进行转换。首先使用Math.random()函数生成0~15之间的随机数,然后使用Math.ceil()函数将随机数取整,接下来就要逐次判断该值,如果该值大于9,那么将10~15的数一一对应转换为a、b…,一直到f。转换完成后,将值累加,最后传给valcode.php页。

    使用JavaScript生成十六进制随机数的完整代码如下:

    //生成随机数
        function showval(){
            num = '';
            for(i=0;i<4;i++){//循环输出四位验证码
                tmp =  Math.ceil((Math.random() * 15));//取出一位十六进制的整数
                if(tmp > 9){//依次判断随机数
                    switch(tmp){
                        case(10)://如果随机数等于10,换为a
                            num += 'a';
                            break;
                        case(11):
                            num += 'b';//如果随机数等于11,换为b
                            break;
                        case(12):
                            num += 'c';//如果随机数等于12,换为c
                            break;
                        case(13):
                            num += 'd';//如果随机数等于13,换为d
                            break;
                        case(14):
                            num += 'e';//如果随机数等于14,换为e
                            break;
                        case(15):
                            num += 'f';//如果随机数等于15,换为f
                            break;
                    }
                }else{
                    num += tmp;
                }
            }
            $('chkid').src='valcode.php?num='+num;//将生成的随机数传给图像生成页
            $('chknm').value = num;//将随机数的值保存到页面的隐藏域中
        }
    

     附上图像生成页代码(实现的功能是验证)

    //生成随机数
        function showval(){
            num = '';
            for(i=0;i<4;i++){//循环输出四位验证码
                tmp =  Math.ceil((Math.random() * 15));//取出一位十六进制的整数
                if(tmp > 9){//依次判断随机数
                    switch(tmp){
                        case(10)://如果随机数等于10,换为a
                            num += 'a';
                            break;
                        case(11):
                            num += 'b';//如果随机数等于11,换为b
                            break;
                        case(12):
                            num += 'c';//如果随机数等于12,换为c
                            break;
                        case(13):
                            num += 'd';//如果随机数等于13,换为d
                            break;
                        case(14):
                            num += 'e';//如果随机数等于14,换为e
                            break;
                        case(15):
                            num += 'f';//如果随机数等于15,换为f
                            break;
                    }
                }else{
                    num += tmp;
                }
            }
            $('chkid').src='valcode.php?num='+num;//将生成的随机数传给图像生成页
            $('chknm').value = num;//将随机数的值保存到页面的隐藏域中
        }
    

     当页面第一次被载入时,将PHP页面生成的16进制数带到valcode.php生成验证码;当验证码中带有干扰串用户看不清,可以单击首页中“看不清”时,是使用showval函数生成的验证码;

    if($('lgchk').value == ''){
      alert('请输入验证码');
      $('lgchk').select();
      return false;
    }
    if($('lgchk').value != $('chknm').value){
      alert('验证码输入错误');
      $('lgchk').select();
      return false;
    }

     这里验证的是验证码上的数字和隐藏域中的数字;

  • 相关阅读:
    14、Cahin of Responsibility 责任链 COR设计模式
    13、Visitor 访问者模式 访问数据结构并处理数据 行为型设计模式
    HTML inline 与block元素
    javascript 继承实现
    深入理解linux的权限设置和SUID,SGID以及粘滞位
    设置express ejs模板的后缀名html
    Centos 安装编译codeblocks&&codelite
    JavaScript中两种类型的全局对象/函数【转】
    Canvas vs. SVG[转]
    centos 学习总结
  • 原文地址:https://www.cnblogs.com/aten/p/8683127.html
Copyright © 2020-2023  润新知