<!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. 【转】关于IAP与APP互相跳转的实现

    关于IAP与APP互相跳转的实现 首先,在您动手做这个实验之前,先要弄清除咱俩的软硬件有什么不同: 1． 我的CPU是STM32F103ZET6,里面有512K的FLASH,您的CPU如果是其它类型, ...

  2. solr7中文分词包

    刚刚将solr4升级到了solr7.7,发现之前用的mmseg4j中文分词包用的时候会报错,插入新数据是创建索引会有异常 possible analysis error: startOffset mu ...

  3. ProgressDialog 进度条的初步认识

    public class MainActivity extends Activity implements View.OnClickListener{ private ProgressBar prog ...

  4. Linux系统的grub和BIOS加密

    启动流程: BIOS ——> MBR(主引导记录,找到系统在哪个分区) ——> boot loader(grub) ——>kernel(内核)——>进入启动级别init 硬盘的 ...

  5. php的加解密openssl_encrypt与openssl_decrypt

    https://blog.csdn.net/zhemejinnameyuanxc/article/details/83383434   php的加解密

  6. 使用google身份验证器实现动态口令验证

    最近有用户反应我们现有的短信+邮件验证,不安全及短信条数限制和邮件收验证码比较慢的问题,希望我们 也能做一个类似银行动态口令的验证方式.经过对可行性的分析及慎重考虑,可以实现一个这样的功能. 怎么实现 ...

  7. OpenGL相关文章

    OpenGL之glMatrixMode函数的用法 gluOrtho2D和glViewport的作用&窗口与显示的关系 glViewport函数用法 纹理映射

  8. Java-五种线程池，四种拒绝策略，三种阻塞队列（转）

    Java-五种线程池,四种拒绝策略,三种阻塞队列 三种阻塞队列:    BlockingQueue<Runnable> workQueue = null;    workQueue = n ...

  9. hdu 6076 Security Check

    题 OvO http://acm.hdu.edu.cn/showproblem.php?pid=6076 2017 Multi-University Training Contest - Team 4 ...

  10. docker stack /swarm 替代 docker-compose 进行部署

    之前一直用docker-compose开发了几个单例的service, 今天开始压力测试, 结果发现postgres的CPU负载很重, 就想设置cpus 结果发现docker-compose V3之后 ...