脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js随机验证码

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

 更新时间：2021年01月28日 10:34:15   作者：搬砖大法  
这篇文章主要为大家详细介绍了JavaScript点击按钮生成4位随机验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现点击按钮生成4位随机验证码的具体代码，供大家参考，具体内容如下

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 div {
  width: 100px;
  height: 50px;
  background: red;
  text-align: center;
  line-height: 50px;
 }
 </style>
</head>
 
<body>
 <div id="yzm"></div>
 <button id="btn">点击生成验证码</button>
 <script>
 // var str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
 //数组转换为字符串
 // var arr = str.split("");
 
 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"];
 // console.log(arr);
 //页面刚加载时候调用它
 sjs(arr);
 
 btn.onclick = function() {
  sjs(arr);
 }
 
 function sjs(arr) {
  var code = Math.floor(Math.random() * arr.length);
  var code1 = Math.floor(Math.random() * arr.length);
  var code2 = Math.floor(Math.random() * arr.length);
  var code3 = Math.floor(Math.random() * arr.length);
  var n = arr[code] + arr[code1] + arr[code2] + arr[code3];
  yzm.innerHTML = n
 }
 </script>
</body>
 
</html>

小编再为大家分享一段代码：点击产生四位随机数字母与数字

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>点击产生随机数</title>
  <style>
  span{
    display: block;
    width: 110px;
    height: 50px;
    border: 1px solid red;
    text-align: center;
    line-height: 50px;
  }
  </style>
</head>
<body>
  <span id="demo" onclick="init();"></span>
  <script>
    init();
    function init(){
    var arr=[];
    for(var i=48;i<123;i++){
     if(i>57 && i<65) continue;
     if(i>90 && i<97) continue;
     arr.push(String.fromCharCode(i));
    }
    arr.sort(function () {
     return Math.random()-0.5;
    });
    arr.length=4;
    
    var span= document.getElementById('demo');
    span.textContent=(arr.join(""));
        }
  
  </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JS基于FileSaver.js插件实现文件保存功能示例

    JS基于FileSaver.js插件实现文件保存功能示例

    这篇文章主要介绍了JS基于FileSaver.js插件实现文件保存功能,结合实例形式演示了FileSaver.js插件的具体使用技巧,需要的朋友可以参考下
    2016-12-12
  • JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)

    JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)

    这篇文章主要介绍了JS实现对中文字符串进行utf-8的Base64编码的方法,对比java的base64编码程序,分析了javascript实现base64编码的相关技巧,需要的朋友可以参考下
    2016-06-06
  • 跟我学习javascript的垃圾回收机制与内存管理

    跟我学习javascript的垃圾回收机制与内存管理

    跟我学习javascript的垃圾回收机制与内存管理，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 基于Phantomjs生成PDF的实现方法

    基于Phantomjs生成PDF的实现方法

    这篇文章主要介绍了基于Phantomjs生成PDF的实现方法,结合实例形式分析了Phantomjs结合nodejs生成pdf的操作步骤与相关技巧,需要的朋友可以参考下
    2016-11-11
  • 微信小程序实现课程选择器

    微信小程序实现课程选择器

    这篇文章主要为大家详细介绍了微信小程序实现课程选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 使用JavaScript校验URL的方法小结

    使用JavaScript校验URL的方法小结

    JavaScript中如何校验一个URL？最近遇到几次需要校验URL的,所以本文给大家整理一下几个校验URL的方法,文中有详细的代码讲解和图文参考,具有一定的参考价值,需要的朋友可以参考下
    2023-12-12
  • 原生js+cookie实现购物车功能的方法分析

    原生js+cookie实现购物车功能的方法分析

    这篇文章主要介绍了原生js+cookie实现购物车功能的方法,结合实例形式分析了javascript结合cookie存储实现购物车功能的相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • js仿小米官网图片轮播特效

    js仿小米官网图片轮播特效

    这篇文章主要为大家详细介绍了js仿小米官网图片轮播特效,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 前端实现监控SDK的实战指南

    前端实现监控SDK的实战指南

    本文讨论了前端监控和数据统计的设计思路,包括错误监控、用户行为日志、PV/UV统计等方面,介绍了数据采集、日志上报、日志查询的流程,以及监控错误的类型和用户埋点统计的手段,同时提到了PV和UV的统计方法,需要的朋友可以参考下
    2024-10-10
  • JavaScript实现修改伪类样式

    JavaScript实现修改伪类样式

    这篇文章主要介绍了JavaScript实现修改伪类样式的方法以及代码实现过程，一起学习参考下吧。
    2017-11-11

最新评论