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

JS操作CSS的更多相关文章

  1. JS操作css的float属性的特殊写法

    使用js操作css属性的写法是有一定的规律的: 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.sty ...

  2. js操作css样式，null和undefined的区别？

    1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...

  3. 11-13 js操作css样式

    1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...

  4. js操作css样式、js的兼容问题

    一.js操作css样式 div . style . width="200px" 在div标签内我们添加了一个style属性,并设定width值.这种写法会给标签带来大量的style ...

  5. 通过JS操作CSS

    动态效果如图所示: 第一种实现方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  6. js 操作css

    类似于jquery的css()函数,js封装 CSS函数:css(oDiv , "width" , "200px ")设置样式css(oDiv , " ...

  7. JS操作CSS随机改变网页背景

    今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的.具体可以这样做: 1.用JS定义一个图片数组,里面存放你想要随机展示的图片 1 2 3 4 ...

  8. JS操作CSS样式

    一.样式表(css) 使用样式表可以更好的显示WEB文档,也可以结合javascript从而实现很好的控制样式表. 样式(css)与内容(html): HTML是处理文档结构的,HTML可以实现如何把 ...

  9. JS操作css样式用法

    //html <div id="div1" style="background:red;"> 修改背景颜色 </div> <but ...

  10. js操作css变量

    原文:http://css-live.ru/articles/dostup-k-css-peremennym-i-ix-izmenenie-spomoshhyu-javascript.html :ro ...

随机推荐

  1. Coding Ninja 修炼笔记 (1)

    大家好啊~我又回来了. 这次主要是给大家带来一些提升 Coding 效率的建议. 效率都是一点一滴优化出来的,虽然每一条建议给你带来的提升可能都不大,但是积累起来,仍然是一股不可忽视的力量. 第一条 ...

  2. Attribute（特性）

    一向都觉得.NET的Attribute好神秘.一个方框框住的东西,置身于类.方法的头部,本身不在类或方法里面,但又会起作用,有时作用还很大,仿佛充满了魔力.简直给人一种无冕之王,幕后之黑手的感觉! 某 ...

  3. 包管理 import debug 模块管理 module

    import sys, os this_file_abspath = os.path.dirname(os.path.abspath(__file__)) ProjectUtil_path = '{} ...

  4. h5ai目录列表优化

    h5ai是HTTP Web服务器的现代文件索引器,专注于您的文件.目录以有吸引力的方式显示,浏览它们通过不同的视图,面包屑和树状概述增强.最初,h5ai是HTML5 Apache Index的缩写,但 ...

  5. 不常见使用的css

    flex和white-space等属性 1.flex属性让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容.style={{flex:5}},该元素占父元素的六分之五. 2. white- ...

  6. js加减乘除丢失精度

    js加减乘除(学了那么久现在才注意到汗==!) /** ** 除法函数,用来得到精确的除法结果 ** 说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显.这个函数返回较为精 ...

  7. POJ3164 Command Network —— 最小树形图

    题目链接:https://vjudge.net/problem/POJ-3164 Command Network Time Limit: 1000MS   Memory Limit: 131072K ...

  8. HTML5、javascript写的craps游戏

    1. [代码][HTML]代码   <!DOCTYPE HTML><html><head><meta charset="utf-8"> ...

  9. 优化Laravel的分页LIMIT和OFFSET调用

    在分页系统中使用limit和offset是很常见的,它们通常也会和ORDER BY一起使用.索引对排序较有帮助,如果没有索引就需要大量的文件排序. 一个常见的问题是偏移量很大,比如查询使用了LIMIT ...

  10. ubuntu安装IDEA和PYCHARM

    IDEA和PYCHAR的下载以及安装步骤一样. 1.下载免费学习版本(Community) 2.解压文件到opt文件夹下面sudo tar -zxvf xxx -C /opt 3.进入解压之后的bin ...