<!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>

<script type="text/javascript">

    //产生一个四位的验证码。

    function createCode(){

        var datas = ['A','B','何','敏','凡','江','1','9']; // 0-7  长度8

        var code = "";

        for(var i = 0 ; i<4; i++){

            //随机产生四个索引值

            var index =  Math.floor(Math.random()*datas.length); // random 0.0-1.0（不包括1.0）

            code+=datas[index];

        }    

        var spanNode = document.getElementById("code");

        spanNode.innerHTML = code;

        spanNode.style.fontSize ="24px";

        spanNode.style.color = "red";

        spanNode.style.backgroundColor="gray";

        spanNode.style.textDecoration = "line-through";

    }

function ready(){

    createCode();

}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body onload="ready()">

    <span id="code"></span><a href="#" onclick="createCode()">看不清，换一个</a>

</body>

</html>

javascript之DOM四位的验证码简单实现的更多相关文章

  1. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  2. javascript之DOM编程改变CSS样式（简易验证码显示）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 开发工具类API调用的代码示例合集：六位图片验证码生成、四位图片验证码生成、简单验证码识别等

    以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 六位图片验证码生成:包括纯数字.小写字母.大写字母.大小写混合.数 ...

  4. javascript HTML DOM 简单介绍

    JavaScript HTML DOM通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素.HTML DOM (文档对象模型)当网页被加载时,浏览器会创建页面的文档对象模型( ...

  5. javascript --- javascript与DOM

    javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...

  6. JavaScript与DOM

    文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...

  7. JavaScript学习笔记(2)——JavaScript和DOM的关系

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...

  8. JavaScript HTML DOM EventListener

    JavaScript HTML DOM EventListener addEventListener() 方法 实例 点用户点击按钮时触发监听事件: document.getElementById(& ...

  9. JavaScript HTML DOM 事件

    JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...

随机推荐

  1. Creating a PXE Configuration File

      The PXE configuration file defines the menu displayed to the pxe client host as it boots up and co ...

  2. yolo模型的特点与各版本性能对比

    目录 一.YOLOV1 二.YOLOV2 二.YOLOV3 正文 目前,基于深度学习的目标检测算法大致可以分为两大流派: 1.两阶段(two-stage)算法:先产生候选区域然后再进行CNN分类(RC ...

  3. 【转】Linux设置和查看环境变量的方法

    转: http://www.jb51.net/LINUXjishu/77524.html 1. 显示环境变量HOME $ echo $HOME /home/redbooks 2. 设置一个新的环境变量 ...

  4. deep_learning_Function_sklearn.preprocessing.LabelBinarizer()

    在多数的机器学习比赛中,给出的标签都是非数字化的,所以我们需要对其进行转换.代码如下: from sklearn import preprocessing feature = [[0,1], [1,1 ...

  5. S19格式

    S-record格式文件是Freescale CodeWarrior编译器生成的后缀名为.S19的程序文件,是一段直接烧写进MCU的ASCII码,英文全称问Motorola format for EE ...

  6. “美登杯”上海市高校大学生程序设计 C. 小花梨判连通 (并查集+map)

    Problem C C . 小 花梨 判连通 时间限制:2000ms 空间限制:512MB Description 小花梨给出

  7. ubuntu下mysql的用户添加、授权、取消授权

    一.添加用户 新增用户会有两种方式的,一种是使用create命令,另一种是直接回使用grant 命令 create user 名字@登陆地址 identified by "密码"; ...

  8. 平衡搜索树-B树。

    B Tree 系列 摘录: https://blog.csdn.net/v_JULY_v/article/details/6530142 B+树介绍 B+树的几点介绍 动态查找树有: 二叉查找树,自平 ...

  9. MySQL字符集或字符序

        字符集基础 字符集:数据库中的字符集包含两层含义 各种文字和符号的集合,包括各国家文字,标点符号,图形符号,数字等. 字符的编码方式,即二进制数据与字符的映射规则:   字符集分类: ASCI ...

  10. docker限制容器日志大小

    1.新建/etc/docker/daemon.json,若有就不用新建了.添加log-dirver和log-opts参数,样例如下: # vim /etc/docker/daemon.json { & ...