<!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. 1.Bacula各组件说明

    1.  Bacula各组件说明 Baula有三个服务,分别是bacula-sd用于管理storage.bacula-fd为bacula客户端.bacula-dir为bacula的核心组件机direct ...

  2. java-消息队列相关-activeMQ

    ,1,如何防止activeMQ崩溃导致消息丢失呢? 第一点,首先消息需要使用持久化消息,服务挂掉,重启服务后消息依然可以消费,不会丢失: 第二点,ActiveMQ采用主从模式搭建集群,比如搭建3台主从 ...

  3. mysql-mmm实现高可用和部署时须要考虑的问题

    mysql-mmm简介 Multi-Master Replication Manager for MySQL,简称mmm,官方的介绍可以参考mmm官网.好处自然不用说,读写分离,官方称读能做到负载均衡 ...

  4. java线程基础巩固---通过实验分析This锁和Class锁的存在

    This锁: 关于什么是This锁下面用实现来说明一下它: 那下面用两个线程分别调用这两个方法,如下: 看结果: 可见两个方法是同时输出的,因为m2()方法并未上锁,所以就不存在争锁的问题,那这时给m ...

  5. 基础简单DP

    状态比较容易表示,转移方程比较好想,问题比较基本常见   递推.背包.LIS(最长递增序列),LCS(最长公共子序列) HDU 2048 数塔 由上往下推 状态数太多(100!) 可以由下往上推: d ...

  6. ubuntu配置jdk（收藏）

    ubuntu下JDK配置本质上和win是一样的: 1.去官网下载JDK7,找jdk-7u21-linux-i586.tar.gz并下载:http://www.oracle.com/technetwor ...

  7. Springboot + Mybatis + Ehcache

    最近在做一个项目,为处理并发性较差的问题,使用了Mybatis二级缓存 但在多表联合查询的情况下,Mybatis二级缓存是存在着数据脏读的问题的 两天就是在想办法解决这个数据脏读的问题 考虑到简易性. ...

  8. 安装Angulr CLI

    参考文档 https://www.jianshu.com/p/327d88284abb http://blog.csdn.net/zhy13087344578/article/details/6074 ...

  9. linux内核 内存管理

    以下内容汇总自网络. 在早期的计算机中,程序是直接运行在物理内存上的.换句话说,就是程序在运行的过程中访问的都是物理地址. 如果这个系统只运行一个程序,那么只要这个程序所需的内存不要超过该机器的物理内 ...

  10. Oracle 查询对应表所有字段名称,可排除不想要的字段

    由于Oracle varchar类型长度限制为4000 ,以下方法仅支持查询字段拼接后长度小于等于4000 第一种方法 select wm_concat(column_name) from user_ ...