<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<body>

请输入验证码:<input type="text" id="yzm">

               <span id="yzm1" style="background: #ccc"></span><br>

               <button id="btn">验证</button>

<!--               <textarea name="" id="" cols="30" rows="10"></textarea>-->

</body>

</html>

    <script>

        var yzm=document.getElementById("yzm"); //获取用户输入的验证码对象

        var yzm1=document.getElementById("yzm1");//获取随机生成的验证码对象

        var btn=document.getElementById("btn"); //获取提交按钮对象

        yzm1.onclick=getyzm; //给span添加点击事件并赋值

        getyzm(); //调用函数

        function getyzm(){

            var str="123456789qwertyuiopasdfghjklzxcvbnm"; //先定义一个字符串，用来随机从里面取值

            str=str.split(""); //把这个字符串的元素分割成字符串数组

//            console.log(str);

            var zhi="";   //定义一个空的字符串变量用来取值

            for(var i=0;i<4;i++){ //循环四次也就是取四个值

                zhi+=str[parseInt(Math.random()*str.length)];  //取随机数作为下标，+=字符串拼接到值里面去

            }

            yzm1.innerHTML=zhi; //页面中赋值

        }

            btn.onclick=function(){  //通过按钮点击判断

            var zhi1=yzm.value;

            var zhi2=yzm1.innerHTML;

            if(zhi1==zhi2){

                alert("对了");

            }else{

                alert("不对");

            }

        }

    </script>

原生JS制作验证码（优化）的更多相关文章

  1. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  2. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  3. 原生js制作播放器

    以前 就想做一个播放器,一直没狠下心来,今天终于狠下心来,把这个做出来了(因为有点无聊) 做这个播放器  也百度了一下, 你叫我做,我肯定做不出来, 就算用jquery  我也做不出来. 以前也用过a ...

  4. 原生JS写验证码

    1.先创建一个一个输入框用来用户输入验证码和一个span容器用来存放系统给出的验证码和一个刷新按钮还有一个登录按钮 <input type="text" class=&quo ...

  5. 【原生js】原生js实现验证码短信发送倒计时

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 原生JS制作简易Tabs组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 原生js制作标题与内容保持4行的效果

    在制作网页或移动端有时会用到一个效果,类似文章标题和文章描述的排列总是保持一样的行数,要么标题总是一行,多出的省略,要么标题内容1:3或2:2或3:1这样,今天练习这样的效果. 实现的原理:给标题和内 ...

  8. 原生js制作表单验证，基本的表单验证方法

    表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...

  9. 原生JS制作贪吃蛇小游戏

    感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...

随机推荐

  1. 一些关于Hibernate延迟加载的误区

    最近面试别人,正好出的笔试题中有道关于Hibernate延迟加载的问题,聊天过程中发现很多人对Hibernate的延迟加载有些理解误区,写 些东东在这里,希望对大家有所帮助. 首先是第一个误区:延迟加 ...

  2. a标签 href触发及传值

    var d=document.getElementById("exportA");alert(d.href);d.href="${ctx}/templet/tEdasTe ...

  3. 16.ajax_case07

    # 通过搜索接口抓取etherscan上的合约地址 # https://etherscan.io/ import requests import re header = { 'Accept': 'te ...

  4. Spring - 框架入门

    认识 Spring 框架 Spring 框架是 Java 应用最广的框架,它的成功来源于理念,而不是技术本身,它的理念包括 IoC (Inversion of Control,控制反转) 和 AOP( ...

  5. 4_1.springboot2.xWeb开发使用thymeleaf

    1.简介 如果使用SpringBoot: 1).创建SpringBoot应用,选中我们需要的模块: 2).SpringBoot已经默认将这些场景配置好了,只需要在配置文件中指定少量配置就可以运行起来: ...

  6. 在VMare Workstation 10中安装Ubuntu

    (1) 下面就是成功配置了VM的环境 (2)在弹出的settings里,点击"CD/DVD(IDE)",然后在右侧点击"Use ISO image file", ...

  7. UMP系统功能 资源调度

  8. Java监控工具介绍，VisualVm ,JProfiler,Perfino,Yourkit,Perf4J,JProbe,Java微基准测试【转】

    Java监控工具介绍,VisualVm ,JProfiler,Perfino,Yourkit,Perf4J,JProbe,Java微基准测试[转] 本文是本人前一段时间做一个简单Java监控工具调研总 ...

  9. Spring Cache 简介

    org.springframework.cache; org.springframework.cache.Cache org.springframework.cache.CacheManager 依赖 ...

  10. day04 - linux常用命令、目录说明以及ubuntu解锁root用户，安装tree命令

    echo abcdefg >> aa.txt //向aa.txt文件末尾追加 abcdefg 字符串 1 基础命令: clear //清屏 whoami //查看当前所登录的用户 who ...