js实现验证码的操作
时间:2019-10-28
本文章向大家介绍js实现验证码的操作,主要包括js实现验证码的操作使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
登录很多应用时都需要验证码,今天我用js实现了一个简单的随机验证码,在适当时刻调用接口就行。代码如下!!!
<!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>Document</title> <style> .wrap { position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; width: 300px; height: 200px; box-shadow: 0 0 8px #999; border-radius: 10px; } .wrap .wrap-title { text-align: center; line-height: 30px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; } .wrap .wrap-show { height: 140px; text-align: center; line-height: 140px; } </style> </head> <body> <div class="wrap"> <div class="wrap-title">获取验证码</div> <!-- 验证码存放处 --> <div class="wrap-show"></div> <button>点击获取验证码</button> </div> <script> function myFerCode() { // 定义字符串,用来存放待命字符 var staChar = "ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789"; var str = ""; // 定义变量,存放随机截取拼接后的字符串 // 遍历操作,随机提取字符串 for (var i = 0; i < 6; i++) { // i<4此处的4任意修改,想拿到几位数的验证码就将此处修改为几 str += (staChar[parseInt(Math.random() * staChar.length)]); } return str; } var oBtn = document.querySelector("button"), oShow = document.querySelector(".wrap-show"); oBtn.onclick = function() { oShow.innerHTML = myFerCode(); } </script> </body> </html>
原文地址:https://www.cnblogs.com/zhzq1111/p/11751999.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 同事牛逼啊,写了个隐藏 bug,我排查了 3 天才解决问题!
- 使用PyTorch的TensorBoard-可视化深度学习指标 | PyTorch系列(二十五)
- 技术分享 | 只有.frm和.ibd文件时如何批量恢复InnoDB的表
- 14个 JavaScript 代码优化技巧
- 你写注释吗?写你就输了
- 跨端框架模板解析引擎了解一下
- 【Java】基础04:Java虚拟机
- 【Java】基础07:常量、变量和数据类型
- 【Java】基础08:数据类型的转换
- 【Java】基础09:运算符
- MYSQL 监控 performance_schema 拿得起 不放下(1))
- AkShare-股票数据-交易日历
- AkShare-股票数据-股票指数历史成份
- 封装变化的内容
- 域信息收集自动脚本WinPwn