javascript随机验证码

川长思鸟来 2022-01-28 00:29 398阅读 0赞

随机验证码

  1. #box {
  2. width: 100px;
  3. height: 40px;
  4. background: #b0b0b0;
  5. text-align: center;
  6. line-height: 40px;
  7. font-size: 30px;
  8. margin: 50px auto;
  9. }
  10. <div id="box">RG8g</div>
  11. var box = document.getElementById('box');
  12. var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'A', 'B', 'C', 'D', 'E', 'F', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; //0-21
  13. var strr = "qwertyuiopasdfghjklzcvnmQWERTYUIOPASDFGHKLZXCVBNM1234567890";
  14. // 这是一个命名函数:封装一段代码,创建的时候不会运行
  15. function change() {
  16. var str = '';
  17. for (var i = 0; i < 4; i++) {
  18. var index = Math.round(Math.random() * (strr.length - 1));
  19. var fs = Math.round(Math.random() * (30 - 12) + 12);
  20. var r = Math.round(Math.random() * 255);
  21. var g = Math.round(Math.random() * 255);
  22. var b = Math.round(Math.random() * 255);
  23. str = str + "<span style='font-size:" + fs + "px;color:rgb(" + r + "," + g + "," + b + ");'>" + strr[index] + "</span>";
  24. //'<span style="color:rgb('+ +','+ +','+ +');font-size:'+ +'px;">'+ strr[index] +'</span>'
  25. }
  26. box.innerHTML = str;
  27. }
  28. //运行函数
  29. change();
  30. box.onclick = function () {
  31. change();
  32. }

效果图
在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,398人围观)

还没有评论,来说两句吧...

相关阅读

    相关 前端随机验证

    [前端随机验证码 ][Link 1] 前端登录或者注册的时候经常会有一个验证码,数字或者字母,本验证码是基于canves的。 使用方法:   <!DOCTY