<!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. 如何打开rdb文件

    后缀名是RDB用什么软件打开不能用记事本打开后是乱码不知用什么软件写入的... RDB文件是QQ2009SP以后的替代DB文件的一种新的文件格式,是一种数据库文件请下载 百度搜索下载:rdb打包解包工 ...

  2. VUE的组件为什么要EXPORT DEFAULT 转载

    Vue的组件为什么要export default   Vue 的模块机制 Vue 是通过 webpack 实现的模块化,因此可以使用 import 来引入模块,例如: 此外,你还可以在 bulid/w ...

  3. HTTP协议请求篇

    http协议的基本概念 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.是工作在tcp/ip协议基础上的,所有的WWW文件都必须 ...

  4. POJ 3304 /// 判断线段与直线是否相交

    题目大意: 询问给定n条线段 是否存在一条直线使得所有线段在直线上的投影存在公共点 这个问题可以转化为 是否存在一条直线与所有的线段同时相交 而枚举直线的问题 因为若存在符合要求的直线 那么必存在穿过 ...

  5. 自己新机器安装CM时候 server服务启动DB配置

    com.cloudera.cmf.db.type=mysqlcom.cloudera.cmf.db.host=localhost:3306com.cloudera.cmf.db.name=cmfcom ...

  6. scull 中的设备注册

    在内部, scull 使用一个 struct scull_dev 类型的结构表示每个设备. 这个结构定义为: struct scull_dev { struct scull_qset *data;  ...

  7. [symonfy] An error occurred when executing the "'cache:clear --no-warmup'"

    Symfony Version: 3.4.* 当运行 composer update 会出现 [RuntimeException] An error occurred when executing t ...

  8. zookeeper结构和命令

    1.1. zookeeper特性 1.Zookeeper:一个leader,多个follower组成的集群 2.全局数据一致:每个server保存一份相同的数据副本,client无论连接到哪个serv ...

  9. 廖雪峰Java12maven基础-1maven入门-2依赖管理

    maven 如果我们的项目依赖第三方的jar包: Commons Logging发布的jar包在那里下载? 使用Log4j需要哪些jar包 其他依赖:junit,Javamail,MySQL驱动... ...

  10. W: 仓库 “http://ppa.launchpad.net/levi-armstrong/qt-libraries-trusty/ubuntu xenial Release” 没有 Release 文件。

    解决办法:将对应的PPA删除掉即可 使用以下命令切换到对应PPA目录: cd /etc/apt/sources.list.dsudo rm levi-armstrong-ubuntu-qt-libra ...