html简单验证码,js+html制作简单验证码
本文实例为大家分享了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制作简单验证码相关推荐
- php图形 验证码代码,PHP制作图形验证码代码分享,php图形验证码代码_PHP教程
PHP制作图形验证码代码分享,php图形验证码代码 效果: myvcode.class.php:封装创建验证码的类 /* * file:myvcode.class.php * 验证码类,类名Vcode ...
- JS如何制作图形验证码
实际效果 第一步我们来到要展示验证码的页面,当我们按下营业执照的时候让其,弹出一个弹框,弹框的上面就是验证码,如图一所示: (图一) 弹框的样式如图二所示: (图二) 我们要对验证码的值进行校验,判断 ...
- 利用js来制作简单倒计时效果
利用JavaScript函数做一个简单的倒计时 <script>// 代码如下:function countDown(time) {var nowTime = +new Date(); / ...
- html怎么制作万年历,js+html制作简单日历的方法
新手一枚,不会写什么高大上的博文,一些平时做的小练习,献丑 代码: 无标题文档 * {margin: 0;padding: 0} #calendar {width: 210px;margin: 100 ...
- Houdini SHOP学习笔记3 制作简单山体模型并制作简单材质
1.几何结点结构 2.制作山体模型 3.制作噪波材质 4.最终效果
- python简单网格五子棋_python制作简单五子棋游戏
本文实例为大家分享了python五子棋游戏的具体代码,供大家参考,具体内容如下 #五子棋 ''' 矩阵做棋盘 16*16 "+" 打印棋盘 for for 游戏是否结束 开始下棋 ...
- html日历页面节假日_js+html制作简单日历的方法
这篇文章主要为大家详细介绍了js html制作简单日历的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 新手一枚,不会写什么高大上的博文,一些平时做的小练习,献丑 ...
- java验证码功能一般怎么做的_java制作简单验证码功能
本文实例为大家分享了java制作简单验证码的具体代码,供大家参考,具体内容如下 在这里我们需要用到java的画笔工具,所以我们需要导入以下包 import="java.util.*,java ...
- PHP制作简单的验证码验证
什么是验证码❓ 验证码(CAPTCHA)是"Completely Automated Public Turing test to tell Computers and Humans Apar ...
最新文章
- windows 本地安全设置 灰色_安全检查与加固
- 区块链拓展-信任颠覆
- 【392天】跃迁之路——程序员高效学习方法论探索系列(实验阶段149-2018.03.04)...
- 【温故知新】HTML学习笔记(表格)
- CTF-压缩包套娃爆破脚本
- 排序算法:桶排序、计数排序、基数排序
- C#中的变量、常量、数据类型
- 远控免杀专题6---Venom免杀
- 苹果App Store曝出Bug 你遇到了么?
- 网站发布助手V1.1 (去年写的简单小工具)
- 介绍一下和AspNetPager结合的不错的分页方案
- 小白也会用的SQL优化工具推荐
- linux系统超好用的QQ
- c语言5的阶乘流程图_10的阶乘(10的阶乘算法流程图)
- java批量打包下载网络图片
- 基于stm32这种单片机将变量定义到绝对地址中
- AutoCAD.NET API Lectures
- 大数据学习完可以做什么
- linux进下一级目录下,linux进入下一级目录的命令
- R和Rstudio的安装使用+Rdata文件读取和转为csv