验证码小demo

css部分

width: 300px; height: 200px; border: 3px solid #ccc; border-radius: 5px; box-shadow: 3px 3px 10px #111; margin: 30px auto; font-family: microsoft yahei; font-size: 100px; line-height: 200px; text-align: center; font-weight: bold; -webkit-user-select: none; cursor: pointer;

js部分

var codeBox = document.getElementById('codeBox');
  //设定验证码每一个随机字符的范围
  var strRange = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
  //这个取值范围的索引是从0-61
  function change(){
      var codeBoxHtml = ''; //"A856" + "a" 'a'  如何判断  a8  a
      for(var i=0; i<4; i++){
          var ranNum = getRandom(0,61); //获取0-61之间的随机整数
          var ranChar =  strRange.charAt(ranNum);
          codeBoxHtml += ranChar;
      }
      codeBox.innerHTML = codeBoxHtml;
  }
  change();
  codeBox.onclick = change;

  //绑定事件的本质就是把一个函数的引用地址(空间地址)赋值给dom对象的事件属性

  //不能获取相同的并且大小写也不能相同:

  function getRandom(n,m){
      n = Number(n);
      m = Number(m);
      if(isNaN(n) || isNaN(m) ){
          return Math.random();
      }
      if(n>m){
          var temp = n;
          n = m;
          m = temp;
      }
      return Math.round(Math.random()*(m-n)+n);
  }