用javascript编写一个简单的随机验证码程序
简单模拟网页的随机数字验证码,效果图如下:
html代码:
<div id="content">
<div class="left">
<input type="text" class="txt" id="in">
</div>
<div class="right">
<span id="code"></span>
<input type="submit" id="btn" value="验证">
</div>
</div>
css样式:
<style type="text/css">
#code{
display: inline-block;
color:blue;
font-weight: bolder;
background-color: #D9799B;
font-size: 20px;
text-align: center;
border:none;
height: 30px;
width: 100px;
margin-right: 10px;
letter-spacing: 4px;
line-height: 30px;
}
#btn{
display: inline-block;
height: 30px;
width: 50px;
}
.txt{
display: inline-block;
height: 30px;
width: 160px;
line-height: 30px;
}
div .right{
margin-top: 10px;
}
</style>
javascript代码:
<script type="text/javascript">
var array=[1,2,3,4,5,6,7,8,9,0];
window.onload=function(){
var iden=document.getElementById("code");
var btn=document.getElementById("btn");
iden.innerHTML=randomNumber(array);//获取验证码框的随机值
iden.addEventListener("click",function(){ //当点击验证码框时变换验证码
var arr=randomNumber(array);
iden.innerHTML=arr;
});
btn.addEventListener("click",function(){
var txt=document.getElementById("in");
if(txt.value==parseInt(iden.innerHTML)){
alert("验证成功");
}
else{
alert("验证码填写不正确!");
iden.innerHTML=randomNumber(array);
txt.value="";
} });
};
function randomNumber(arr){
var arr1=[];
var n=0;
for(var i=0;i<4;i++){ //产生随机数值
n=Math.floor(Math.random()*10);
arr1[i]=arr[n];
}
return arr1.toString().replace(/,/g,""); //返回一个字符串
} </script>
代码可能优化的不太好,还请多多指教!
用javascript编写一个简单的随机验证码程序的更多相关文章
- javascript编写一个简单的编译器(理解抽象语法树AST)
javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...
- 如何在linux下编写一个简单的Shell脚本程序
在了解了linux终端和其搭配的基本Shell(默认为bash)的基础下,我们就可以在终端中用vi/vim编辑器编写一个shell的脚本程序了 Shell既为一种命令解释解释工具,又是一种脚本编程语言 ...
- 通过编写一个简单的漏洞扫描程序学习Python基本语句
今天开始读<Python绝技:运用Python成为顶级黑客>一书,第一章用一个小例子来讲解Python的基本语法和语句.主要学习的内容有:1. 安装第三方库.2. 变量.字符串.列表.词典 ...
- 编写一个简单的java服务器程序
import java.net.*;import java.io.*; public class server{ ); //监听在80端口 Socket sock = server.accept(); ...
- 编写一个简单的jdbc例子程序
package it.cast.jdbc; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Res ...
- 用 Go 编写一个简单的 WebSocket 推送服务
用 Go 编写一个简单的 WebSocket 推送服务 本文中代码可以在 github.com/alfred-zhong/wserver 获取. 背景 最近拿到需求要在网页上展示报警信息.以往报警信息 ...
- 用Python编写一个简单的Http Server
用Python编写一个简单的Http Server Python内置了支持HTTP协议的模块,我们可以用来开发单机版功能较少的Web服务器.Python支持该功能的实现模块是BaseFTTPServe ...
- .Net Excel 导出图表Demo(柱状图,多标签页) .net工具类 分享一个简单的随机分红包的实现方式
.Net Excel 导出图表Demo(柱状图,多标签页) 1 使用插件名称Epplus,多个Sheet页数据应用,Demo为柱状图(Epplus支持多种图表) 2 Epplus 的安装和引用 新建一 ...
- 编写一个简单的C++程序
编写一个简单的C++程序 每个C++程序都包含一个或多个函数(function),其中一个必须命名为main.操作系统通过调用main来运行C++程序.下面是一个非常简单的main函数,它什么也不干, ...
随机推荐
- Chrome 插件 Vimium——让你脱离鼠标
下面是帮助,按?就能出现.什么时候忘了可以随时查看.^_^
- linux命令行快捷键记录
摘自: http://www.cnblogs.com/webzhangnan/p/3221410.html [移动光标] Ctrl+A 标移到行首.它在多数文本编辑器和 Mozilla 的 URL 字 ...
- Rsync+Sersync同步
Rsync+Sersync同步特点: (1):sersync可以记录下被监听目录中发生变化的(包括增加.删除.修改)具体某一个文件或某一个目录的名字:(2):rsync在同步的时候,只同步发生变化的这 ...
- Mybatis一二级缓存的理解
频繁的数据库操作是非常耗费性能的(主要是因为对于DB而言,数据是持久化在磁盘中的,因此查询操作需要通过IO,IO操作速度相比内存操作速度慢了好几个量级),尤其是对于一些相同的查询语句,完全可以 ...
- BZOJ_3781_小B的询问_莫队
BZOJ_3781_小B的询问_莫队 Description 小B有一个序列,包含N个1~K之间的整数.他一共有M个询问,每个询问给定一个区间[L..R],求Sigma(c(i)^2)的值,其中i的值 ...
- 「LuoguP3379」 【模板】最近公共祖先(LCA)
题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询问的个数和树根结点的序号. 接下来N-1行每 ...
- P2383 狗哥玩木棒
题目背景 狗哥又趁着语文课干些无聊的事了... 题目描述 现给出一些木棒长度,那么狗哥能否用给出的木棒(木棒全用完)组成一个正方形呢? 输入输出格式 输入格式: 输入文件中的第一行是一个整数n表示测试 ...
- P1014 Cantor表
洛谷 p1014 题目描述 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一张表来证明这一命题的: 1/1 1/2 1/3 1/4 1/5 … 2/1 2/2 2 ...
- C/C++的const区别
1.const基础知识(用法.含义.好处) int main() { const int a; //a为const,常数型数 int const b; //b为const,常数型数 const int ...
- bzoj4589
fwt 原理并不知道 nim游戏石子异或和=0后手赢 那么也就是求a[1]^a[2]^...^a[n]=0的方案数 这个和bzoj3992一样可以dp dp[i][j]表示前i个数异或和为j的方案数 ...