js+html制作简单验证码
作者:lijiao 发布时间:2024-04-19 10:44:33
标签:js,html,验证码
本文实例为大家分享了JavaScript制作验证码的具体代码,供大家参考,具体内容如下
<html>
<head>
<meta charset="utf-8"/>
<title>js验证码</title>
<style type="text/css">
#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;
}
</style>
</head>
<body>
<p>验证码:</p>
<div id="login" onclick="show()"><a href="#"></a></div>
<script type="text/javascript">
function codes(n){
var a="azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789";
var b="";
for (var i = 0;i<n;i++){
var index=Math.floor(Math.random()*62);
b+=a.charAt(index);
}
return b;
};
function show(){
document.getElementById("login").innerHTML=codes(4);
}
window.onload=show;
</script>
</body>
</html>
另一个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("");<span style="font-family: Arial, Helvetica, sans-serif;">//清空文本框</span>
$("#Yzm").focus();//重新聚焦验证码框
YZM = false;
}
else { //输入正确时
$("#Yzm").blur();//绑定验证码输入正确时要做的事
YZM = true;
}
};
附效果图:
0
投稿
猜你喜欢
- Python爬虫为什么受欢迎如果你仔细观察,就不难发现,懂爬虫、学习爬虫的人越来越多,一方面,互联网可以获取的数据越来越多,另一方面,像 P
- 直接将 视频的HTML网址存入models ,以字符串的形式#关于我们 CharFieldclass About(models.Model)
- 本文实例讲述了PHP实现获取第一个中文首字母并进行排序的方法。分享给大家供大家参考,具体如下:最近在做储值结算,需求里结算首页需要按门店的首
- 本文实例讲述了python在Windows8下获取本机ip地址的方法。分享给大家供大家参考。具体实现方法如下:import socket h
- js表单验证只能是写限定的东西大收集 代码如下:ENTER键可以让光标移到下一个输入框<input onkeydown=&q
- 一、什么是frame&frame切换?frame:HTML页面中的一种框架,主要作用是在当前页面中指定区域显示另一页面元素;fram
- 问题:在数据库脚本开发中,有时需要生成一堆连续数字或者日期,例如yearly report就需要连续数字做年份,例如daily report
- 本文实例讲述了Django框架实现分页显示内容的方法。分享给大家供大家参考,具体如下:分页1、作用数据加载优化2、前端引入bootstrap
- 在面向对象的理论中,有两个核心的概念:类和实例。类可以看成是一个模板,实例就是根据这个模板创建出来的对象。但在 Python 里面,类和实例
- pytorch中的transforms模块中包含了很多种对图像数据进行变换的函数,这些都是在我们进行图像数据读入步骤中必不可少的,下面我们讲
- using System;using System.Data.SqlClient;namespace ExecuteSqlTran{&nbs
- Python实战系列用于记录实战项目中的思路,代码实现,出现的问题与解决方案以及可行的改进方向本文为第2篇–200行Python代码实现20
- 关于变量分箱主要分为两大类:有监督型和无监督型对应的分箱方法:A. 无监督:(1) 等宽 (2) 等频 (3) 聚类B. 有监督:(1) 卡
- 现在大多数Centos6.x版本的系统python都是2.x,现因开发需求需要安装前端代码的构建工具glue,故必须要做python版本的升
- 前言最近接手一个老项目,典型的 Vue 组件化前端渲染,后续业务优化可能会朝 SSR 方向走,因此,就先做些技术储备。如果对 Vue SSR
- 一. 静态资源static文件放在app中确认django.contrib.staticfiles包含在INSTALLED_APPS中。在s
- 本文介绍了Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录,分享给大家,具体如下:Python 2.7I
- 举例如下,一个服务器端的form 代码自动被解释成客户端代码:服务器端代码: &l
- 1.php安装。2.下载redis并编译(最好是在 /usr/local目录下运行该命令)# wget http://download.re
- 本文意在弄清楚这些概念间的关系及其作用。弄清Mysql在开启事务的情况下,每条sql执行时的加锁操作和MVCC版本控制。为使讨论简单,本文忽