<!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. c++编程的字符集及其转换

    一.两种字符集 多字节字符集(MBCS):因为计算机最早是在英语国家诞生的,大多数英文信息是由英文字母.数字以及一些其它字符构成了一个128个字符的ASCII字符集.本来这对于英语国家来说够用了.但是 ...

  2. iptables 转发

    1.通过代理访问121.8.210.236的转向访问192.168.191.236 sudo iptables -t nat -A OUTPUT -d 121.8.210.236 -j DNAT -- ...

  3. PTA ”写出这个数“

      读入一个正整数 n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式: 每个测试输入包含 1 个测试用例,即给出自然数 n 的值.这里保证 n 小于 10的100次方. 输出格式: 在 ...

  4. YII2.0.12兼容PHP7.2版本升级

    YII2.0.12兼容PHP7.2版本升级 报错信息: FastCGI sent in stderr: "PHP message: PHP Fatal error:  Cannot use ...

  5. php一些常用单词（供初学者背）

    > property         性质 特性 财产 所有权> oriented         导向> summarize     概括 总结> register      ...

  6. ESP8266—“ICACHE_FLASH_ATTR”宏

    问:ESP8266_NONOS_SDK中ICACHE_FLASH_ATTR宏的用途是什么?我看到它取决于ICACHE_FLASH,但我不知道何时应该定义该符号.什么时候需要包括它?答:对于ESP826 ...

  7. python的方法VSjava方法

    java 类方法和实例方法 类方法 用static修饰的方法. 由于类方法是属于整个类的,所以类方法的方法体中不能有与类的对象有关的内容. 即类方法体有如下限制: 1.类方法中不能引用对象变量: 2. ...

  8. [Python之路] 闭包

    一.思考一个问题 我们要给定一个x,要求一条直线上x对应的y的值.公式是y = kx+b. 我们需要用k,b来确定这条直线,则我们实现的函数应该有3个参数: def line(k, b, x): pr ...

  9. hdu 5792 World is Exploding 树状数组+离散化+容斥

    World is Exploding Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Other ...

  10. URAL 2092 Bolero 贪心

    C - Bolero Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit S ...