<!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. 【Day2】1.循环结构

     视频地址(全部) https://edu.csdn.net/course/detail/26057 课件地址(全部) https://download.csdn.net/download/gentl ...

  2. current status of the installation and the internationalization of Samba 3.0

    Only about 8 months from release of Samba 3.0.0, there is beginning to be the transition from 2.2.x. ...

  3. linux基础—课堂随笔09_数组

    数组:(6.14 第一节) 取分区利用率,大于百分之八十则发出警报 取分区第一列 取分区使用率: 脚本: 检查脚本语法: ——end 数组切片: 1.跳过前两个取后面 2.跳过前两个取三个 生成10个 ...

  4. C++第三次作业--作用域

    作用域 任何一种语言最基本的部分就是变量,而变量有两个非常重要的特性,作用域和生存期. 定义 作用域是变量的一个属性,某个变量在代码中有效的区域为该变量的作用域. 函数原型作用域 函数声明参数从参数声 ...

  5. 【JAVASCRIPT】call和apply的用法以及区别

    function add(c,d){ return this.a + this.b + c + d; } var s = {a:"鸡", b:"你"}; con ...

  6. BZOJ 1001 平面图转对偶图

    原图的面转成点,原图的边依旧边,只是连接的是两个面. 对偶图的点数=原图的面数 对偶图的边数=原图的边数(如果原边只属于一个面,则它为环边) #include<bits/stdc++.h> ...

  7. JavaScript设计模式与开发实践（一）

    一.this this的指向大致可以分为以下几种: 作为对象的方法调用 作为普通函数调用 构造器调用 Function.prototype.call或Function.prototype.apply ...

  8. https://openmaptiles.org/

    docker save klokantech/tileserver-gl:latest -o tileserver-gl.tar docker load -i tileserver-gl.tar do ...

  9. Python实现Windows CMD命令行彩色输出

    #! /usr/bin/env python #coding=utf-8   import ctypes,sys   STD_INPUT_HANDLE = -10 STD_OUTPUT_HANDLE ...

  10. Vue：选中商品规格改变字体和边框颜色（默认选中第一种规格）

    效果图: CSS: <div class="label"> <p>标签类别</p> <ul> <li v-for=" ...