<!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. Struts中的找不到StringUtils异常

    今天在Struts2框架下使用JSON插件时,程序保存找不到类org/apache/commons/lang/xwork/StringUtils,我纳闷了,commons-lang-2.5.jar和c ...

  2. 跟着小菜学习RabbitMQ启动和基础（系列一）

    前言 今天开始我们正式进入RabbitMQ系列学习,在这系列博客中也会发表.NET Core和EF Core文章,网上关于RabbitMQ例子比比皆是,我将综合网上所提供的信息并加上我个人的理解来详细 ...

  3. leetcode刷题笔记08 字符串转整数 (atoi)

    题目描述 实现 atoi,将字符串转为整数. 在找到第一个非空字符之前,需要移除掉字符串中的空格字符.如果第一个非空字符是正号或负号,选取该符号,并将其与后面尽可能多的连续的数字组合起来,这部分字符即 ...

  4. python3.6 使用 pymysql 连接 Mysql 数据库及 简单的增删改查操作

    1.通过 pip 安装 pymysql 进入 cmd  输入  pip install pymysql   回车等待安装完成: 安装完成后出现如图相关信息,表示安装成功. 2.测试连接 import ...

  5. 自定义下拉刷新上拉加载View

    MainActivity.java package com.heima52.pullrefresh; import java.util.ArrayList; import com.heima52.pu ...

  6. CDH集群安装&测试总结

    0.绪论 之前完全没有接触过大数据相关的东西,都是书上啊,媒体上各种吹嘘啊,我对大数据,集群啊,分布式计算等等概念真是高山仰止,充满了仰望之情,觉得这些东西是这样的: 当我搭建的过程中,发现这些东西是 ...

  7. 【mybatis深度历险系列】延迟加载

    在前面的博文中,小编主要简单的介绍了mybatis中的高级映射,小伙伴们可以把mybatis和hibernate的因素进行对比,更加有利于理解.今天这篇博文,小编主要来简单介绍一下mybatis中的延 ...

  8. Scala：函数式编程之下划线underscore

    http://blog.csdn.net/pipisorry/article/details/52913548 python参考[python函数式编程:apply, map, lambda和偏函数] ...

  9. WmS详解(一)之token到底是什么？基于Android7.0源码

    做Android有些年头了,Framework层三大核心View系统,WmS.AmS最近在研究中,这三大块,每一块都够写一个小册子来介绍,其中View系统的介绍,我之前有一个系列的博客(不过由于时间原 ...

  10. 剑指offer面试题6 重建二叉树（java）

    注:(1)java中树的构建 (2)构建子树时可以直接利用Arrays.copyOfRange(preorder, from, to),这个方法是左开右闭的 package com.xsf.SordF ...