<!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. 样本方差的抽样分布 χ2(n) 卡方分布_样本方差 卡方分布

    样本方差的抽样分布 χ2(n) 卡方分布_样本方差 卡方分布 样本方差的抽样分布 χ2(n) 卡方分布 t分布.卡方分布.f分布均要求总体服从正态分布. 若n个相互独立的随机变量ξ1,ξ2,-,ξn ...

  2. 机器学习-一对多（多分类）代码实现（matlab）

    %% Machine Learning Online Class - Exercise 3 | Part 1: One-vs-all % Instructions % ------------ % % ...

  3. MFC入门--显示静态图片及调用本地软件

    MFC是微软开发的基础类库,主要用来开发图形界面应用程序,在学习中,我们要验证算法好坏,一般需要对结果进行可视化. OpenCV是计算机视觉中的开源算法库,集成了很多先进算法,现在想将MFC与Open ...

  4. Python全栈开发：html标签

    Html是什么? htyper text markup language 即超文本标记语言 超文本: 就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 标记语言: 标记(标签)构成的语言. ...

  5. Eclipse 常用快捷键 (动画讲解)【转】

    Eclipse 常用快捷键 (动画讲解)[转] Eclipse有强大的编辑功能, 工欲善其事,必先利其器, 掌握Eclipse快捷键,可以大大提高工作效率. 小坦克我花了一整天时间, 精选了一些常用的 ...

  6. 关于N个小球放M个盒子解答

    以下是关于关于N个小球放M个盒子的几种情况的解答,蛮详细的(来自博友的)  求精:关于N个小球放M个盒子解答 - chensmiles的日志 - 网易博客http://chensmiles.blog. ...

  7. 花园【SCOI2017期望DP入门题】

    题目描述: 小 A 的花园的长和宽分别是 L,H .小 A 喜欢在花园里做游戏.每次做游戏的时候,他都先把花园均匀分割成 L×H 个小方块,每个方块的长和宽都是 1 .然后,小 A 会从花园的西北角的 ...

  8. 深入浅出Mybatis系列（六）---objectFactory、plugins、mappers简介与配置[转]

    上篇文章<深入浅出Mybatis系列(五)---TypeHandler简介及配置(mybatis源码篇)>简单看了一下TypeHandler, 本次将结束对于mybatis的配置文件的学习 ...

  9. MyEclipse使用总结——在MyEclipse中新建Maven框架的web项目[转]

    前面的文章我们已经在本机安装好了maven,同时在myeclipse中配置好了maven的插件. 链接如下: Maven安装----在Windows上安装Maven myeclipse安装maven插 ...

  10. 菜鸟nginx源码剖析数据结构篇（八） 缓冲区链表ngx_chain_t[转]

    菜鸟nginx源码剖析数据结构篇(八) 缓冲区链表 ngx_chain_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.c ...