js实现随机数字字母验证码

本文实例为大家分享了数字字母验证码的具体实现代码,供大家参考,具体内容如下

验证码:

<html>
  <head>
    <title>纯字验证码</title>
    <meta http-equiv='content-type' content='text/html;charset=utf-8'/>
    <script type='text/javascript' src='jquery-1.7.2.js'></script>
    <script type='text/javascript'>
    var code ; //在全局定义验证码  

    function createCode(){
       code = "";
       var codeLength = 4;//验证码的长度
       var checkCode = document.getElementById("code");
       var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
       'S','T','U','V','W','X','Y','Z');//随机数
       for(var i = 0; i < codeLength; i++) {//循环操作
        var index = Math.floor(Math.random()*36);//取得随机数的索引(0~35)
        code += random[index];//根据索引取得随机数加到code上
      }
      checkCode.value = code;//把code值赋给验证码
    }
    //校验验证码
    function validate(){
      var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写
      if(inputCode.length <= 0) { //若输入的验证码长度为0
        alert("请输入验证码!"); //则弹出请输入验证码
      }else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
        alert("验证码输入错误!@_@"); //则弹出验证码输入错误
        createCode();//刷新验证码
        document.getElementById("input").value = "";//清空文本框
      }else { //输入正确时
        alert("合格!^-^");
      }
    }
    </script>
    <style type='text/css'>
    #code{
      font-family:Arial,宋体;
      font-style:italic;
      color:green;
      border:0;
      padding:2px 3px;
      letter-spacing:3px;
      font-weight:bolder;
    }
    </style>
  </head>
  <body onload='createCode()'>
    <div>验证码:
      <input type = "text" id = "input"/>
      <input type="button" id="code" onclick="createCode()" style="width:60px" title='点击更换验证码' />
      <input type = "button" value = "验证" onclick = "validate()"/>
    </div>
  </body>
</html> 

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

时间: 2017-06-17

JS简单生成随机数(随机密码)的方法

本文实例讲述了JS简单生成随机数(随机密码)的方法.分享给大家供大家参考,具体如下: 1. Math.random()生成一个0~1的随机数 0<=Math.random()<1 2. Math.random()*100 则生成一个0~100之间的随机数 3. Math.random()*100 + 100 则生成一个100~200之间的随机数 4. 所以Math.random()*m 则生成一个0~m的随机数 实例代码如下: <!DOCTYPE html PUBLIC "-/

javascript 产生随机数的几种方法总结

javascript 产生随机数的几种方法总结 1.取两个数之间的随机数 function GetRandomNum(Min,Max){ var Range = Max - Min; var Rand = Math.random(); return(Min + Math.round(Rand * Range)); } 2.混合法 function generateMixed(n) { var res = ""; for(var i = 0; i < n ; i ++) { var

JS产生随机数的用法小结

代码如下所述: <script> function GetRandomNum(Min,Max) { var Range = Max - Min; var Rand = Math.random(); return(Min + Math.round(Rand * Range)); } var num = GetRandomNum(1,10); alert(num); </script> var chars = ['0','1','2','3','4','5','6','7','8','

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/xh

JavaScript简单生成 N~M 之间随机数的方法

本文实例讲述了JavaScript简单生成 N~M 之间随机数的方法.分享给大家供大家参考,具体如下: getRandom.js: /** * Created with JetBrains PhpStorm. * User: lee * To change this template use File | Settings | File Templates. */ //获取一个随机数,在max,min之间 //max 需大于 min //如果输入 10,则产生 0~9 的数 //如果输入 10,

js生成随机数(指定范围)的实例代码

1.随机生成4位数的随机数 <script language="javascript"> /** * 随机生成4位的随机数 * http://www.yulu.jb51.net */ document.write(parseInt(10*Math.random())); //输出0-10之间的随机整数 document.write(Math.floor(Math.random()*10+1)); //输出1-10之间的随机整数 function RndNum(n){ var

javascript获取指定区间范围随机数的方法

如下所示: //获取指定区间范围随机数,包括lowerValue和upperValue function randomFrom(lowerValue,upperValue) { return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue); } //如获取2-6之间的随机数 alert(randomFrom(2,6)); //如获取1-10之间的随机数 alert(randomFrom(1,10));

JS简单随机数生成方法

本文实例讲述了JS简单随机数生成方法.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>随机数</title> </head> <body> <script type="text/javascript"> function Randnum(value){ v

js简单的点击返回顶部效果实现方法

本文实例讲述了js简单的点击返回顶部效果实现方法.分享给大家供大家参考.具体分析如下: 当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个"返回顶部"的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验. 实现原理:当页面加载的时候,把元素定位到页面的右下角,当页面滚动时,元素一直位于右下角,当用户点击的时候,页面回到顶部. 要点一:document.documentElement.clientWidth || docum

js简单实现表单中点击按钮动态增加输入框数量的方法

本文实例讲述了js简单实现表单中点击按钮动态增加输入框数量的方法.分享给大家供大家参考.具体如下: 这里演示表单中点击按钮动态增加输入框数量的方法,默认是没有输入框,点击按钮之后,输入框会不断的增加,每点击一次,增加一个,觉得挺不错吧,希望对你有所帮助. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-input-button-add-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

JS二叉树的简单实现方法示例

本文实例讲述了JS二叉树的简单实现方法.分享给大家供大家参考,具体如下: 今天学习了一下 二叉树的实现,在此记录一下 简单的二叉树实现,并且实现升序和降序排序输出 function Node(data , left,right){ this.data = data; this.left = left; this.right = right; this.show = show; function show(){ return this.data; } }; function Bst(){ this

js简单时间比较的方法

本文实例讲述了js简单时间比较的方法.分享给大家供大家参考,具体如下: //时间比较(yyyy-MM-dd) function compareDate(startDate, endDate) { var arrStart = startDate.split("-"); var startTime = new Date(arrStart[0], arrStart[1], arrStart[2]); var startTimes = startTime.getTime(); var arr

JS简单获取日期相差天数的方法

本文实例讲述了JS简单获取日期相差天数的方法.分享给大家供大家参考,具体如下: <html> <head> <meta charset="utf-8"> <title>JS日期相差天数</title> </head> <body> <SCRIPT LANGUAGE="JavaScript"> var s1 = '2016-05-12'; s1 = new Date(s1.

JS简单获取当前日期和农历日期的方法

本文实例讲述了JS简单获取当前日期和农历日期的方法.分享给大家供大家参考,具体如下: navCal.js文件如下: today=new Date(); function initArray(){ this.length=initArray.arguments.length for(var i=0;i<this.length;i++) this[i+1]=initArray.arguments[i] } var d=new initArray( "星期日", "星期一&q

JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)

本文实例讲述了JS简单获取当前日期时间的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>JS日期时间</title> <meta http-equiv

JS简单实现滑动加载数据的方法示例

本文实例讲述了JS简单实现滑动加载数据的方法.分享给大家供大家参考,具体如下: //滑动 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; }else if (document.body) { scrollTop =

js简单实现图片延迟加载的方法

本文实例讲述了js简单实现图片延迟加载的方法.分享给大家供大家参考,具体如下: window.onload=window.onresize=window.onscroll=function() { showImg(); }; function getPos(obj) { var l=0; var t=0; while(obj) { l+=obj.offsetLeft; t+=obj.offsetTop; obj=obj.offsetParent; } return {left: l, top: