<!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. Linux 链接脚本分析

    作者:答疑助手lizuobin 原文: https://blog.csdn.net/lizuobin2/article/details/51779064 在前面学习的过程中,看代码时遇到 arch_i ...

  2. 基于Linux解决登录ssh客户端失败问题—sshd error: could not load host key

    当你ssh远程登录时,会发现ssh登录界面刚打开就会闪退,在查看主机日志消息中,就会看到如下错误: 然而问题的根源也就是这三个文件,无法正常加载ssh主机密钥. 而我们只需要将有问题的文件删除,然后重 ...

  3. IPC之ipc_sysctl.c源码解读

    // SPDX-License-Identifier: GPL-2.0-only /* * Copyright (C) 2007 * * Author: Eric Biederman <ebie ...

  4. 【学】第一节 rt-thread的rt_kprintf功能的实现

    @2019-06-20 [主题] 拿到一个stm32f407新板,使用rt-thread源码中的bsp中的stm32f407-discovery工程,操作串口外设实现rt_kprintf功能 [问题] ...

  5. systemd自启动tomcat

    tomcat自启动service [Unit] Description=Tomcat After=network.target [Service] Type=forking PIDFile=/usr/ ...

  6. Linux基础命令01

    绝对路径:从“/”根目录下开始 常用的一些命令选项 ls ls :使用方式  ls {空格}选项 {空格}参数 (全写为list)(等同于dir) 列出当前目录下所有的文件,包括隐藏文件 ls -a ...

  7. Jmeter （三） 集合点 、检查点 （断言）

    不同的 测试工具有不同的命名 断言 :即检查点,在请求中 加入测试人员的判断,返回 结果 TRUE  or FALSE ,得到 测试人员的判断是否正确 集合点 1.打开  synchronizing ...

  8. POM标签大全详解

    父(Super) POM <project xmlns = "http://maven.apache.org/POM/4.0.0" xmlns:xsi = "htt ...

  9. Eclipse里导入Mybatis源码工程

    打开Eclipse,在前两天的记录里我已经把Maven什么的都配置好了,还有Mybatis的源码也下载下来了,不相信的话可以去看一下我之前的记录:) OK. Mybatis源码解压之后是一个标准的Ma ...

  10. 【每日一包0011】pad

    [github地址:https://github.com/ABCDdouyae...] pad 给字符串的左右加padding,也可以用于删减字符串两端 用法:pad(str, length, opt ...