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


Posted in Javascript onJanuary 28, 2021

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

效果图:

JavaScript点击按钮生成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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
循环 vs 递归浅谈
Feb 28 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
vue mounted组件的使用
Jun 18 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
Vue ​v-model相关知识总结
Jan 28 #Vue.js
Vue 数据响应式相关总结
Jan 28 #Vue.js
node使用async_hooks模块进行请求追踪
Jan 28 #Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 #Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 #Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 #Vue.js
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 #Javascript
You might like
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
javascript+xml技术实现分页浏览
2008/07/27 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
基于Python的关键字监控及告警
2017/07/06 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
java关于string最常出现的面试题整理
2021/01/18 Python
Python中生成ndarray实例讲解
2021/02/22 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
学习雷锋精神演讲稿
2014/05/10 职场文书
科学育儿宣传标语
2014/10/08 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
值班管理制度范本
2015/08/06 职场文书
创业计划书之书店
2019/09/10 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
vue+element ui实现锚点定位
2021/06/29 Vue.js
Python办公自动化PPT批量转换操作
2021/09/15 Python