<!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/xhtml">
 <head>
  <title>验证码</title>
  <style type="text/css">
   #code
   {
    font-family:Arial;
    font-style:italic;
    font-weight:bold;
    border:0;
    letter-spacing:2px;
    color:blue;
   }
  </style>
  
 </head>
 <body>
  <div>
   <input type = "text" id = "input"/>
   <input type = "button" id="code" onclick="createCode()"/>
   <input type = "button" value = "验证" onclick = "validate()"/>
  </div>
 </body>
</html>

<script>
   var code ;
   window.onload = 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);
     code += random[index];
    }
    checkCode.value = code;
   }
  
   function validate(){
    var inputCode = document.getElementById("input").value.toUpperCase();     
    if(inputCode.length <= 0) {
     alert("请输入验证码！");
    }      
    else if(inputCode != code ) {
     alert("验证码输入错误！@_@");
     createCode();
     document.getElementById("input").value = "";
    }      
    else {
     alert("^-^");
    }          
   }
   </script>

js生成验证码的更多相关文章

  1. node.js生成验证码及图片

    示例代码: var svgCaptcha = require('svg-captcha'); var fs = require('fs'); var codeConfig = { size: 5,// ...

  2. 纯js生成验证码

    实现代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"& ...

  3. H5+JS生成验证码

    效果图如下: <canvas id="canvas1" style="margin-left: 200px;"></canvas>< ...

  4. js生成验证码并检验

    <html> <head> <title>验证码</title> <style type="text/css"> #co ...

  5. js生成验证码并验证

    前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.as ...

  6. js生成验证码并且判断

       <style type="text/css">        .code        {            font-family: Arial;      ...

  7. js生成验证码并且验证

    <html> <head> <title>验证码</title> <style type="text/css"> #co ...

  8. js生成验证码并验证的登录页面

    <!Doctype html> <html> <head> <meta charset="utf-8"/> <title> ...

  9. js生成[n,m]的随机数

    一.预备知识 Math.ceil();  //向上取整. Math.floor();  //向下取整. Math.round();  //四舍五入. Math.random();  //0.0 ~ 1 ...

随机推荐

  1. SqlSever基础 getdate函数 返回系统当前的年月日，时分秒 毫秒

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  2. Linux 上网络监控工具 ntopng 的安装

    当今世界,人们的计算机都相互连接,互联互通.小到你的家庭局域网(LAN),大到最大的一个被我们称为互联网.当你管理一台联网的计算机时,你就是在管理最关键的组件之一.由于大多数开发出的应用程序都基于网络 ...

  3. Linux有问必答：如何在Linux中修改环境变量PATH

    提问: 当我试着运行一个程序时,它提示“command not found”. 但这个程序就在/usr/local/bin下.我该如何添加/usr/local/bin到我的PATH变量下,这样我就可以 ...

  4. 【leetcode❤python】 112. Path Sum

    #-*- coding: UTF-8 -*-# Definition for a binary tree node.# class TreeNode(object):#     def __init_ ...

  5. FZU 2219 StarCraft（星际争霸）

    Description 题目描述 ZB loves playing StarCraft and he likes Zerg most! One day, when ZB was playing SC2 ...

  6. 5.mybatis一对一表关联查询

    方式一:嵌套结果:使用嵌套结果映射来处理重复的联合结果的子集,封装联表查询的数据(去除重复的数据)  SELECT * FROM class c,teacher t WHERE c.tid = t.t ...

  7. android——学习：网格布局——GridLayout

    Android一开始就提供了几种布局控件,如线性布局LinearLayout.相对布局RelativeLayout和表格布局TableLayout等,但在很多情况下,这些布局控件是不能满足要求的,因此 ...

  8. hdu 4163 Stock Prices 水

    #include<bits/stdc++.h> using namespace std; #define ll long long #define pi (4*atan(1.0)) #de ...

  9. [转载] EXPLAIN执行计划中要重点关注哪些要素

    原文: https://mp.weixin.qq.com/s?__biz=MjM5NzAzMTY4NQ==&mid=400738936&idx=1&sn=2910b4119b9 ...

  10. [转载] linux 速查表

    原文: http://www.nixtutor.com/linux/all-the-best-linux-cheat-sheets/ 1. Linux Command Line Linux Refer ...