JavaScript实现验证码案例

本文实例为大家分享了JavaScript实现验证码效果的具体代码，供大家参考，具体内容如下

今天的案例，效果如下：

这个案例的实现其实没有很多难点，让我们一起来看看吧~

html和css的实现，在这里就不做解释啦，可以比对下面的代码自己实现一下，注意一下细节就好了

接着咱们来看看js的实现：

我们需要做到的有两点：

1、实现验证码的随机产生，使其在页面刷新和点击更换时能够生成
2、实现输入字符串和验证码的比较

第一点呢，我们需要用到for循环和Math.round(Math.random()*n)，使得在每一次循环中可以产生随机数字

第二点呢，我们只需要通过input.value来获得用户输入的字符串，然后将其与之前随机产生的字符串进行比较即可（使用===）

其他的细节可以去代码中查看哦

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 400px;
            height: 100px;
            margin:100px auto;
            background-color: hsla(180, 73%, 78%, 0.199);
            border-radius: 20px;
            text-align: center;
            padding: 20px;
        }
        #check{
            display: inline-block;
            width: 100px;
            height: 30px;
            text-align: center;
            background-color: rgba(128, 128, 128, 0.158);
            color:blue;
            font-size:26px;
            font-style: italic;
            letter-spacing: 2px;
            font-family:Arial, Helvetica, sans-serif;
            margin-bottom: 10px;
        }
        .ma{
            margin-bottom: 12px;
        }

    </style>
</head>

<body>
    <div class="container">
        <div>
            <span id="check">adf34y</span>
            <a href="#" id="checka">看不清换一张</a>
        </div>
        <div class="ma">
            <label for="zheng">验证码</label>
            <input type="text" id="zheng">
        </div>
        <button id="btn">确定</button>
    </div>

    <script>
        let sum=[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];
        var check=document.getElementById("check");
        var code;

        function fun(){
            let str="";
            for(let i=0;i<6;i++){
                let pos=Math.round(Math.random()*15);//注意这个写法，取随机数
                str+=sum[pos];
            }
            check.innerHTML=str;
            return str;
        }

        window.onload=function(){
            code=fun();
        }

        let checka=document.getElementById("checka");
        checka.onclick=function(){
            code=fun();
        }

        let btn=document.getElementById("btn");
        btn.onclick=function(){
            let t=document.getElementById("zheng").value;
            console.log(t)
            if(t==code){
                alert("正确");
                code=fun();
                document.getElementById("zheng").value="";
            }
            else{
                alert("错误");
                document.getElementById("zheng").value="";
            }
        }

    </script>
</body>

</html>

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

赞 (0)

相关推荐

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

    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实现点击获取验证码倒计时效果

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

  • JS制作图形验证码实现代码

    JS制作图形验证码实现代码

    第一步我们来到要展示验证码的页面,当我们按下营业执照的时候让其,弹出一个弹框,弹框的上面就是验证码,如图一所示: (图一) 弹框的样式如图二所示: (图二) 我们要对验证码的值进行校验,判断验证码是否输入正确,当输入不正确的时候,我们提示错误信息,提示信息如图三所示: (图三) 如果页面了验证正确,这不会提示错误信息并且调到我们的目标页面,如图四所示: (图四) 路由层描述 /** 供货商店铺-店铺简介 */ //1-在路由层进行设置,页面跳转到根目录下/buyer/vshop/info.ejs

  • js生成验证码并直接在前端判断

    js生成验证码并直接在前端判断 <script type="text/javascript" src="img/jquery-1.5.1.min.js"></script> <script language="javascript" type="text/javascript"> var code; //在全局 定义验证码 var code2; //在全局 定义验证码 function cr

  • js实现登录注册框手机号和验证码校验（前端部分）

    开发的很多场景中都会用到手机号的校验和验证码的校验,具体实现如下 <div> <input type="text" name="phonenumber" placeholder="请输入您的手机号码" /> <input type="text" name="verify" placeholder="请输入验证码" /><input type=&q

  • js实现简单的验证码

    js实现简单的验证码

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

  • js+canvas实现滑动拼图验证码功能

    上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的.我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图.下面介绍具体步骤. 首先随便找一张图片渲染到canvas上,这里#canvas作为画布,#block作为裁剪出来的小滑块. <canvas width="310" height="155" id="canvas"></canvas> <canvas width=&q

  • js生成的验证码的实现与技术分析

    分享给大家一段js生成验证码并验证的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>

  • JS 验证码功能的三种实现方式

    摘要: 我们在做一些后台系统的登录验证的时候.难免会用到验证码功能,来辅助进行验证,提高安全性,在我们日常生活中,验证方式无处不在,最多的是短信验证码的方式,通过点击发送验证码,然后手机接收短信,填写验证码才能登陆成功,但是也有一些其他验证码功能也在使用,所以,我就想着来集中记录一下,希望对大家有所帮助... 一.数字短信验证码 思路: a.两个文本框+一个获取验证码按钮,文本框用来输入手机号和获取到的验证码,按钮负责点击和记录倒计时: b.js书写定时器setTimeout,进行60秒验证码失

  • 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

随机推荐