JS实现4位随机验证码

本文实例为大家分享了JS实现4位随机验证码的具体代码,供大家参考,具体内容如下

通过随机数编写一个不分大小写且含数字的4位随机数。

CSS样式

p{
 width: 60px;
 height: 20px;
 display: inline-block;
 letter-spacing: 3px;
 border: 1px solid red;
}
#div{
 height: 20px;
 margin-bottom: 10px;
}
#btn,p:hover{
 cursor: default;
}
button{
 display: block;
}

主体部分

<div id="box">
验证码
 <input type="text" id="int" />
 <p id="p"></p>
 <div id="div"></div>
 <button id="btn">提交</button>
</div>

JS部分

//随机数
function random(max,min){
 return Math.round(Math.random()*(max-min)+min);
}
//随机4位验证码
function code(){
 //将数字、小写字母及大写字母输入
 var str="1234567890qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM";
 //给一个空字符串
 var res='';
 //循环4次,得到4个字符
 for(var i=0;i<4;i++){
 //将得到的结果给字符串,调用随机函数,0最小数,62表示数字加字母的总数
 res+=str[random(0,62)];
 }
 p.innerHTML=res;
}
code(); //调用验证码函数
p.onclick=code; //点击也可以刷新验证码
//验证验证码
btn.onclick=function(){
 var int=document.getElementById("int").value;//获取用户输入的值
 var p=document.getElementById("p").innerText;//获取验证码
 //判断用户输入与验证码的大写一致(不分大小写)
 if(int.toUpperCase()==p.toUpperCase()){
 div.innerHTML="验证码正确";
 }else{
 div.innerHTML="验证码错误";
 }
}

实现结果

总结

Math.round():四舍五入
Math.random():随机数
toUpperCase():将字符串转为大写

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

时间: 2020-10-17

JavaScript实现简单验证码

JavaScript实现简单验证码,供大家参考,具体内容如下 验证流程图 HTML部分 ```javascript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&quo

JavaScript 验证码的实例代码(附效果图)

效果如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">    <title></title>    <style type="text/css">    .code    {            background:url(code_bg.jpg);            f

原生js生成图片验证码

本文实例为大家分享了js生成图片验证码的具体代码,供大家参考,具体内容如下 html代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图形验证码</title> </head> <body> <div id="v_container" style="width: 200px;hei

js实现点击获取验证码倒计时效果

网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果.实现这个功能,一个setInterval和一个clearInterval就能搞定了,不需要太多的代码.实例效果和代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="button" style="height:

Jsp生成页面验证码的方法[附代码]

image.jsp------------------------------生成随机验证码图片的Jsp页面 代码如下:  复制代码 代码如下: <%@ page contentType="image/jpeg" import="java.awt.*, java.awt.image.*,java.util.*,javax.imageio.*" %> <%! Color getRandColor(int fc,int bc) { Random ran

原生JS生成指定位数的验证码

使用原生JS生成指定位数的验证码,验证码包括字母和数字 ##思路:使用String的fromCharCode方法将给定范围的随机数转为大小写字母,再通过随机数决定数组当前位置为大写字母,小写字母或者是数字,函数传入的参数当做该数组的长度,随机填好数组后,对数组内的元素做分情况处理:当该数组内没有数字时,需要随机修改一个字母为一个随机的数字:当该数组没有字母时,需随机修改一个数字为大写或者小写字母:正常情况下的有字母也有数字不做处理,每个判断语句的最后使用数组的join方法将该数组转换为字符串并r

js+canvas绘制图形验证码

本文实例为大家分享了利用canvas绘制图形验证码的具体代码,供大家参考,具体内容如下 思路:通过随机获取指定字符串的指定数的字符,通过canvas绘制出来 返回指定范围的随机整数 //指定范围的随机函数:返回指定范围内的随机整数 function rand(min, max) { /* max=10 min=1 Math.random()=0 最小取到1 Math.random()=0.9999*10=Math.floor(9.9)=>+1=10 */ return Math.floor(Ma

js+h5 canvas实现图片验证码

本文实例为大家分享了js+h5 canvas实现图片验证码的具体代码,供大家参考,具体内容如下 实现效果 一.使用技术 原生js技术+html5 canvas画图 利用Math.random()函数随机生成 颜色 字符串  及障碍物 点击 验证码可变更验证码图案 二.使用步骤 1.html+css 代码如下(示例): <div class="login_code_box"> <div class="login_code"> <input

js实现简单的验证码

验证码大家应该不陌生,主要是为了网站的安全性,防止恶意注册和登陆.验证码实现的方式各有不同,下面是一段用javascript实现的验证码效果,供大家参考之用,希望能够给大家带来帮助. 运行效果图: 代码如下: <html> <head> <title>js验证码</title> <style type="text/css"> .code { background:url(code_bg.jpg); font-family:Ar

H5+css3+js搭建带验证码的登录页面

本文实例为大家分享了H5+css3+js搭建带验证码的登录页面,供大家参考,具体内容如下 login.html <!DOCTYPE HTML> <html> <head> <title>EasyBuy后台管理系统</title> <meta charset="utf-8"> <style> .main_bar{ width:1350px; height:350px; background-color:#

使用jQuery如何写一个含验证码的登录界面

一个包含用户名,密码,验证码的简单的登陆界面,如下图所示: 首先是 HTML 代码: <div id="divID"> <div style="background-color:transparent;"> <form id="ff" method="post"> <ul class="reg-box"> <li> <label for=&q

Servlet+JDBC实现登陆功能的小例子(带验证码)

案例需求:访问带有验证码的登录页面login.jsp用户输入用户名,密码以及验证码.如果用户名和密码输入有误,跳转登录页面,提示:用户名或密码错误如果验证码输入有误,跳转登录页面,提示:验证码错误如果全部输入正确,则跳转到主页success.jsp,显示:用户名,欢迎您分析 步骤 文件树展示 1.配置文件和jar包在上个案例均有配置过,需要改的有:User类新增验证码成员变量,数据库增加了一个验证码字段(无用,只是为了UserDao包把查找到的数据值导入到User类不出错). 2.登陆界面 <%

Bootstrap实现前端登录页面带验证码功能完整示例

本文实例讲述了Bootstrap实现前端登录页面带验证码功能.分享给大家供大家参考,具体如下: Bootstrap有自定义的验证码样式,在前端页面可以直接使用,他的css.js在使用前要在开头引入 上代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 告诉浏览器网页所识别的文件类型及语言类型 --> <meta http-equiv="X-

【JS+CSS3】实现带预览图幻灯片效果的示例代码

一.前期准备 1.1 案例分析 适用场景:单例布局 1.2 方法论 V视图 HTML+CSS+调试 C js实现控制流程 D数据 优化扩展 二.代码 结构 <div class="slider"><!-- 特效区 --> <div class="main"><!-- 主视图区 --> <div class="main_i"> <div class="caption&quo

PHP curl模拟登录带验证码的网站

需求是这样的,需要登录带验证码的网站,获取数据,但是不可能人为一直去记录数据,想通过自动采集的方式进行,如下是试验出来的结果代码!有需要的可以参考下! <?php namespace Home\Controller; use Think\Controller; class LoginController extends Controller { protected $cookieName = array('cookie_verify', 'cookie_verify'); protected $

Python爬虫模拟登录带验证码网站

爬取网站时经常会遇到需要登录的问题,这是就需要用到模拟登录的相关方法.python提供了强大的url库,想做到这个并不难.这里以登录学校教务系统为例,做一个简单的例子. 首先得明白cookie的作用,cookie是某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据.因此我们需要用Cookielib模块来保持网站的cookie. 这个是要登陆的地址 http://202.115.80.153/ 和验证码地址 http://202.115.80.153/CheckCode.

原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面

今天小编把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的opacity.transition.box-shadow这三个属性. 1.opacity CSS3 opacity 属性 实例 设置一个div元素的透明度级别: div { opacity:0.5; } 在此页底部有更多的例子. 浏览器支持 Internet ExplorerFirefoxOpera

js实现带关闭按钮始终显示在网页最底部工具条的方法

本文实例讲述了js实现带关闭按钮始终显示在网页最底部工具条的方法.分享给大家供大家参考.具体如下: 这是一款很实用的代码,给网页加入一个始终显示在浏览器窗口底部的工具栏,可以在上面放上公告,联系人等等信息,此代码的工具条还带有关闭按钮,可以随时关闭 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

原生js验证简洁注册登录页面

序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 1 sign_up.html 注册表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sign-up</title> <link rel="stylesheet" href="css