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 相关文章推荐
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
twig里使用js变量的方法
2016/02/05 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
js实现表格筛选功能
2017/01/18 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
python回调函数的使用方法
2014/01/23 Python
python中的yield使用方法
2014/02/11 Python
python实现自动发送报警监控邮件
2018/06/21 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
python字符串的index和find的区别详解
2020/06/20 Python
python2和python3哪个使用率高
2020/06/23 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
校班主任推荐信范文
2013/12/03 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
服务行业演讲稿
2014/09/02 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript