<!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>

点击“看不清，换一个”之后，显示图片如下所示。实现了控制css样式，类似一个简易的验证码

再点击一次：

javascript之DOM编程改变CSS样式（简易验证码显示）的更多相关文章

  1. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

  2. 8 HTML DOM 元素的查找与改变&改变CSS样式&HTML事件

    HTML DOM(Document Object Model)文档对象模型 当网页被加载时,浏览器会创建页面的文档对象模型. HTMLDOM 定义了用于HTML的一系列标准的对象.通过DOM,你可以访 ...

  3. jQuery中添加/改变/移除改变CSS样式例子

    在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧.     CSS()方法改变CSS样式 ...

  4. js改变css样式

      CreateTime--2017年10月31日15:14:12 Author:Marydon js改变css样式 1.js改变单个css样式 HTML部分 <div id="tes ...

  5. jQuery基础 - 改变CSS样式

    jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ...

  6. 改变CSS样式

    改变CSS样式 1.改变HTML元素样式的语法 //改变HTML样式的语法 document.getElementById(id).style.property = new style 例子: < ...

  7. JQuery - 改变css样式

    jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ...

  8. jQuery CSS()方法改变CSS样式实例解析

    转自:http://www.jbxue.com/article/24588.html 分享一个jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一 ...

  9. JavaScript:编程改变文本样式

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" Content=&q ...

随机推荐

  1. Mybatis自动生成实体类和实体映射工具

    Mybatis Mysql生成实体类 用到的Lib包: mybatis-generator-core-1.3.2.jarmysql-connector-java-5.1.30.jar 1. 创建一个文 ...

  2. centos 7 x64 搭建 elasticsearch 服务

    1.确认服务是否已经安装java 8 环境 使用 java -version 查看 2.在java 官网下载安装包,然后上传到服务器响应的文件中 3.使用 tar -zxvf 文件夹 解压到响应的文件 ...

  3. 【转】使用virtualenv在ubuntu上搭建python 3开发环境

    ubuntu 13.04默认的python版本是2.7的,想在其上做python3的开发会遇到问题.比如要使用pip安装软件包时,默认安装的就是python2的包.如果想安装python3的包,就需要 ...

  4. 网络安全之在Kali Linux上安装Openvas

    本文目录: 一.解决和配置更新源问题 二.安装Openvas 三.自定义登陆密码 四.升级Openvas 五.查看Openvas运行情况 六.修改OpenVAS远程链接 =============== ...

  5. Django项目实战之用户头像上传与访问

      1 将文件保存到服务器本地 upload.html <!DOCTYPE html> <html lang="en"> <head> < ...

  6. page1

    1.1 常用的客户端技术:HTML. CSS. 客户端脚本技术 1.2 常用的服务器端技术:CGI .ASP .PHP (一种开发动态网页技术).ASP.NET(是一种建立动态web应用程序的技术,是 ...

  7. Python3 数字(Number)

    Python 解释器可以作为一个简单的计算器:您可以在解释器里输入一个表达式,它将输出表达式的值. 表达式的语法很直白: +, -, * 和/ 和在许多其它语言(如Pascal或C)里一样:括号可以用 ...

  8. APP自动化框架LazyAndroid使用手册（2）--元素自动抓取

    作者:黄书力 概述 前面的一篇博文简要介绍了安卓自动化测试框架LazyAndroid的组成结构和基本功能,本文将详细描述此框架中元素自动抓取工具lazy-uiautomaterviewer的使用方法. ...

  9. windows上安装nodejs,升级npm,安装webpack指南

    安装nodejs https://nodejs.org/en/ 安装webpack和其他一些常用的 npm install -g node-gyp webpack coffee-script 监控 w ...

  10. Objective-C's Init Method

    初始化器在其他面向对象的语言中(比如Java)指的是构造器. Objective-C同样拥有对象构造器在init形式的方法中.不管如何,在Objc中这些方法没有什么特殊的行为. 按照惯例,程序猿在in ...