<!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. ubuntu15.10 opencv3.1 安装配置codeblocks

    安装codeblocks: sudo add-apt-repository ppa:damien-moore/codeblocks-stable // 添加codeblocks的ppa sudo ap ...

  2. 条件语句，while循环语句：完整的温度转换程序

    while True: a = int(input('摄氏温度换为华氏温度请按 1\n华氏温度转为摄氏温度请按 2\n退出请按 3\n')) if a==1: c = float(input('请输入 ...

  3. Codeforces Round #305 (Div. 2) B. Mike and Fun 暴力

     B. Mike and Fun Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/548/pro ...

  4. git 撤销没有提交的变化

    参考: https://stackoverflow.com/questions/5807137/how-to-revert-uncommitted-changes-including-files-an ...

  5. linux下删除目录及其子目录下某种类型文件

    Linux下,如果想要删除目录及其子目录下某种类型文件,比如说所有的txt文件,则可以使用下面的命令: find . -name "*.txt" -type f -print -e ...

  6. OWASP Top 10十大风险 – 10个最重大的Web应用风险与攻防

    先来看几个出现安全问题的例子 OWASP TOP10 开发为什么要知道OWASP TOP10 TOP1-注入 TOP1-注入的示例 TOP1-注入的防范 TOP1-使用ESAPI(https://gi ...

  7. 亲密接触Redis-第三天(Redis的Load Balance）

    前言 上两天讲述了Redis的基本搭建和基于HA的集群布署方式以及相关的策略和注意点.今天开始讲述Redis的Cluster功能,而这块目前来说网上资料不是太全,就算有1,2篇也只是单讲服务端的搭建也 ...

  8. 【SSH系列】-- Hibernate持久化对象的三种状态

    在上一篇博文中,小编主要简单的介绍了[SSH系列]--hibernate基本原理&&入门demo,今天小编来继续介绍hibernate的相关知识, 大家知道,Java对象的生命周期,是 ...

  9. SpriteKit中为何不要在update方法中测试碰撞

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们若要在游戏中做碰撞检测有2种办法,一是利用物理引擎,二是自 ...

  10. Android中的语言和字符串资源

    在任何情况下,从您的应用代码中提取 UI 字符串并将其存放在外部文件中都是个好办法.Android 在每个 Android 项目中都提供一个资源目录,从而简化了这一过程. 如果您是使用 Android ...