本文实例为大家分享了JavaScript制作验证码的具体代码,供大家参考,具体内容如下

js验证码

#login{

width:50px;

height:30px;

line-height:30px;

margin:0 auto;

background-color:#eee;

text-align:center;

color:red;

}

p{

width:75px;

height:30px;

margin:0 auto;

}

验证码:

function codes(n){

var a="azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789";

var b="";

for (var i = 0;i

var index=Math.floor(Math.random()*62);

b+=a.charAt(index);

}

return b;

};

function show(){

document.getElementById("login").innerHTML=codes(4);

}

window.οnlοad=show;

另一个js验证码的部分代码:

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值赋给验证码

}

//校验验证码

document.getElementById("Yzm").addEventListener("change",validate);

function validate(){

var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得输入的验证码并转化为大写

if(inputCode.length <= 0) { //若输入的验证码长度为0

alert("请输入验证码!"); //则弹出请输入验证码

$("#Yzm").focus();

YZM = false;

}

else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时

alert("验证码输入错误!@_@"); //则弹出验证码输入错误

createCode();//刷新验证码

$("#Yzm").val("");//清空文本框

$("#Yzm").focus();//重新聚焦验证码框

YZM = false;

}

else { //输入正确时

$("#Yzm").blur();//绑定验证码输入正确时要做的事

YZM = true;

}

};

附效果图:

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

html简单验证码,js+html制作简单验证码相关推荐

  1. php图形 验证码代码,PHP制作图形验证码代码分享,php图形验证码代码_PHP教程

    PHP制作图形验证码代码分享,php图形验证码代码 效果: myvcode.class.php:封装创建验证码的类 /* * file:myvcode.class.php * 验证码类,类名Vcode ...

  2. JS如何制作图形验证码

    实际效果 第一步我们来到要展示验证码的页面,当我们按下营业执照的时候让其,弹出一个弹框,弹框的上面就是验证码,如图一所示: (图一) 弹框的样式如图二所示: (图二) 我们要对验证码的值进行校验,判断 ...

  3. 利用js来制作简单倒计时效果

    利用JavaScript函数做一个简单的倒计时 <script>// 代码如下:function countDown(time) {var nowTime = +new Date(); / ...

  4. html怎么制作万年历,js+html制作简单日历的方法

    新手一枚,不会写什么高大上的博文,一些平时做的小练习,献丑 代码: 无标题文档 * {margin: 0;padding: 0} #calendar {width: 210px;margin: 100 ...

  5. Houdini SHOP学习笔记3 制作简单山体模型并制作简单材质

    1.几何结点结构 2.制作山体模型 3.制作噪波材质 4.最终效果

  6. python简单网格五子棋_python制作简单五子棋游戏

    本文实例为大家分享了python五子棋游戏的具体代码,供大家参考,具体内容如下 #五子棋 ''' 矩阵做棋盘 16*16 "+" 打印棋盘 for for 游戏是否结束 开始下棋 ...

  7. html日历页面节假日_js+html制作简单日历的方法

    这篇文章主要为大家详细介绍了js html制作简单日历的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 新手一枚,不会写什么高大上的博文,一些平时做的小练习,献丑 ...

  8. java验证码功能一般怎么做的_java制作简单验证码功能

    本文实例为大家分享了java制作简单验证码的具体代码,供大家参考,具体内容如下 在这里我们需要用到java的画笔工具,所以我们需要导入以下包 import="java.util.*,java ...

  9. PHP制作简单的验证码验证

    什么是验证码❓ 验证码(CAPTCHA)是"Completely Automated Public Turing test to tell Computers and Humans Apar ...

最新文章

  1. windows 本地安全设置 灰色_安全检查与加固
  2. 区块链拓展-信任颠覆
  3. 【392天】跃迁之路——程序员高效学习方法论探索系列(实验阶段149-2018.03.04)...
  4. 【温故知新】HTML学习笔记(表格)
  5. CTF-压缩包套娃爆破脚本
  6. 排序算法:桶排序、计数排序、基数排序
  7. C#中的变量、常量、数据类型
  8. 远控免杀专题6---Venom免杀
  9. 苹果App Store曝出Bug 你遇到了么?
  10. 网站发布助手V1.1 (去年写的简单小工具)
  11. 介绍一下和AspNetPager结合的不错的分页方案
  12. 小白也会用的SQL优化工具推荐
  13. linux系统超好用的QQ
  14. c语言5的阶乘流程图_10的阶乘(10的阶乘算法流程图)
  15. java批量打包下载网络图片
  16. 基于stm32这种单片机将变量定义到绝对地址中
  17. AutoCAD.NET API Lectures
  18. 大数据学习完可以做什么
  19. linux进下一级目录下,linux进入下一级目录的命令
  20. R和Rstudio的安装使用+Rdata文件读取和转为csv

热门文章

  1. DBCP数据库连接池技术
  2. 前台到后台的一些问题
  3. stm32实现json格式传输/ cjson使用
  4. 三菱 plc方案源码STM32工控板fx2n源码
  5. usb系统拓扑结构和usb设备逻辑结构
  6. 使用readelf和objdump查看ELF常见段
  7. 加密越来越简单——用JavaScript实现数据加密和解密
  8. Caltech 数据集转换成VOC格式
  9. [翻译]Iec61850配置文件格式
  10. ie 10中flash动画只有声音没有画面解决办法