• 售前

  • 售后

热门帖子
入门百科

JavaScript点击按钮生成4位随机验证码

[复制链接]
心醉的斜阳呈 显示全部楼层 发表于 2021-10-25 20:21:16 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了js实现点击按钮天生4位随机验证码的详细代码,供各人参考,详细内容如下
效果图:

代码:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. div {
  9.   width: 100px;
  10.   height: 50px;
  11.   background: red;
  12.   text-align: center;
  13.   line-height: 50px;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div id="yzm"></div>
  19. <button id="btn">点击生成验证码</button>
  20. <script>
  21. // var str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  22. //数组转换为字符串
  23. // var arr = str.split("");
  24. var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
  25. // console.log(arr);
  26. //页面刚加载时候调用它
  27. sjs(arr);
  28. btn.onclick = function() {
  29.   sjs(arr);
  30. }
  31. function sjs(arr) {
  32.   var code = Math.floor(Math.random() * arr.length);
  33.   var code1 = Math.floor(Math.random() * arr.length);
  34.   var code2 = Math.floor(Math.random() * arr.length);
  35.   var code3 = Math.floor(Math.random() * arr.length);
  36.   var n = arr[code] + arr[code1] + arr[code2] + arr[code3];
  37.   yzm.innerHTML = n
  38. }
  39. </script>
  40. </body>
  41. </html>
复制代码
小编再为各人分享一段代码:点击产生四位随机数字母与数字
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>点击产生随机数</title>
  8.   <style>
  9.   span{
  10.     display: block;
  11.     width: 110px;
  12.     height: 50px;
  13.     border: 1px solid red;
  14.     text-align: center;
  15.     line-height: 50px;
  16.   }
  17.   </style>
  18. </head>
  19. <body>
  20.   <span id="demo" onclick="init();"></span>
  21.   <script>
  22.     init();
  23.     function init(){
  24.     var arr=[];
  25.     for(var i=48;i<123;i++){
  26.      if(i>57 && i<65) continue;
  27.      if(i>90 && i<97) continue;
  28.      arr.push(String.fromCharCode(i));
  29.     }
  30.     arr.sort(function () {
  31.      return Math.random()-0.5;
  32.     });
  33.     arr.length=4;
  34.    
  35.     var span= document.getElementById('demo');
  36.     span.textContent=(arr.join(""));
  37.         }
  38.   
  39.   </script>
  40. </body>
  41. </html>
复制代码
以上就是本文的全部内容,盼望对各人的学习有所帮助,也盼望各人多多支持草根技术分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作