简单的验证码

使用随机数做一个简单的验证码

1.Math.random(): 获取0~1随机数
2.Math.random()*num: 代表 取一个> = 0 且 小于 num 的数
3.一般会在前面 加上一个 Math.floor() 这个代表的是取整数

下面为这个验证码的代码style样式

 <style>
        .p1{ 
        width: 150px; 
        height: 80px;
         line-height: 80px; 
         text-align: center; 
         font-size: 33px; 
         font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
          } 
          .sp1:hover{ 
          cursor: pointer;
           user-select: none;/* 禁止复制 */ 
           } 
           .p2{ 
           color: red;
            display: none;
             } 
  </style>

html部分

<i><p class="p1"></p></i>
 <form action="">
  <!-- placeholder 占位符 提示用户输入的信息内容 不影响正常输入 disabled 禁止输入 --> 
  <!-- autocomplete 对用户输入的东西进行记忆 下次输入进行弹出 off关闭 on开启此功能 -->
  <input type="text" id="user" placeholder="请输入你的账号" autocomplete="on" maxlength="6">
   <!-- lable起提示作用 label中的for的值和input中id的值一样，这样就形成一种关联，选中label就选中input -->
   <label class="sp1" for="user">确认</label> 
  </form> 
  <p class="p2">请勿输入非数字字母以及下划线的东西</p>

Javascript部分

<script>
 var p1 = document.getElementsByTagName('p')[0]; 
 var sp1 = document.getElementsByClassName('sp1')[0]; 
 var sp2 = document.getElementsByClassName('p2')[0]; 
 var str = '1234567890ABCDEFGHIJKLMNOPGRSTUVWXYZ_'; 
 var i = 1; 
 function chux() { 
 var yzm = ''; 
 for (var i = 0; i < 6; i++) { 
 yzm += str.charAt(Math.floor(Math.random() * 2));
  } 
  console.log(yzm);
   p1.innerHTML = yzm; 
   };
    chux(); 
    p1.onclick = chux; //正则判断一下 有没有非数字和下划线以外的东西  可要可不要 
    user.oninput = function () { 
    if (/[^\w]+/.test(user.value) == true) {
     sp2.style.display = 'block' 
     } else {
      sp2.style.display = 'none' 
      } 
      } s
      p1.onclick = function () {
       console.log(user.value);
        console.log(p1.innerHTML);
         if ((user.value).toUpperCase() == p1.innerHTML) {
          window.location.href="https://baike.baidu.com/item/%E5%8E%89%E5%AE%B3/32409?fr=aladdin";
           }else if(user.value ===''){
            alert('请输入东西鸭');
             } else {
              if (i >= 3) { 
              chux();
               alert('输入错误已达到三次 验证码已经重新生成');
                user.value = ''; i = 0 
               } else {
                 alert('输入错误'); i++;
               } 
               } 
  }