<!DOCTYPE html>

<html>

<head>

    <title>Random_Color-Transformation</title>

    <style type="text/css">

        .div1{

            height: 50px ;

            width: 320px;

            background-color: red;

            font-size: 0.5em;

            font-weight: bold;

            font-style: italic;

            text-decoration: underline;

        }

        .div2{

            height: 50px ;

            width: 320px;

            background-color: yellow;

            font-size: 1em;

            font-weight: bold;

            font-style: italic;

            text-decoration: underline;

        }

    </style>

    <style type="text/css">

        .div3{

            height: 50px ;

            width: 320px;

            background-color: green;

            font-size: 2em;

            font-weight: bolder;

            font-style: oblique;

        }

    </style>

</head>

<body>

    <div class = "div1" id="00">

        Some contents here!

    </div>

    <input type="button" value="00" onclick = "getBgColor(this);" />

    <div class = "div2" id="01">

        Some contents here!

    </div>

    <input type="button" value="01" onclick = "getBgColor(this);" />

    <div class = "div3" id="10">

        Some contents here!

    </div>

    <input type="button" value="10" onclick = "getBgColor(this);" />

</body>

<script type="text/javascript">

    function getBgColor(t){

        var myDiv = document.styleSheets[t.value.substring(0,1)].cssRules[t.value.substring(1,2)].style.backgroundColor;

        alert(myDiv);

        var a = Math.floor(255*Math.random()) + '';

        var b = Math.floor(255*Math.random()) + '';

        var c = Math.floor(255*Math.random()) + '';

        document.styleSheets[t.value.substring(0,1)].cssRules[t.value.substring(1,2)].style.backgroundColor = 'rgb(' + a + ',' + b + ',' + c + ')';

    }

</script>

</html>

Javascript实现"点按钮出随机背景色的"三个DIV的更多相关文章

  1. iOS之按钮出现时加一个动画效果

    //按钮出现时的动画效果 + (void)buttonAnimation:(UIButton *)sender { CAKeyframeAnimation *animation = [CAKeyfra ...

  2. JavaScript点击按钮显示 确认对话框

    //JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  3. Javascript&Ajax-深入浅出JSONP--解决ajax跨域问题

    Javascript&Ajax-深入浅出JSONP--解决ajax跨域问题 原理讲解: 链接地址:http://www.cnblogs.com/chopper/archive/2012/03/ ...

  4. JS控制语句 编程练习 学生数据，分别是姓名、性别、年龄和年级，接下来呢，我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦。

    编程练习 在一个大学的编程选修课班里,我们得到了一组参加该班级的学生数据,分别是姓名.性别.年龄和年级,接下来呢,我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦. 学生信息如下 ...

  5. javaScript 删除事件 弹出确认 取消对话框

    javaScript 删除事件 弹出确认 取消对话框 1. <a href="javascript:if(confirm('确实要删除?'))location='http://www. ...

  6. CSS实现按钮点击后根据背景色加深效果-一颗优雅草bigniu

    具体代码如下 button{ position: relative; } button:active::before { display: block; content: ''; position: ...

  7. 使用 JavaScript自定义函数计算出教室的体积大小，其中教室的长、宽、高分别为 8 米、5 米、3 米

    查看本章节 查看作业目录 需求说明: 使用 JavaScript自定义函数计算出教室的体积大小,其中教室的长.宽.高分别为 8 米.5 米.3 米 实现思路: 创建 HTML 页面 在页面的 < ...

  8. javascript实现掉落弹出层------Day29

    顾名思义.所谓"掉落弹出层".就是出现一个弹出层,而出现的位置是从上方向下掉落.掉落到指定的位置停止,这样分析起来.和"右下角弹出提醒对话框"比起来,确有异曲同 ...

  9. JavaScript判断图片是否加载完成的三种方式

    JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 ...

随机推荐

  1. springboot项目启动并立即执行自定义程序内容

    第一种:实现ApplicationRunner接口,重写其中的run()方法: 第二种:实现CommandLineRunner接口,重写其中的run()方法: 还有第三种...

  2. mybatis缓存源码分析之浅谈缓存设计

    本文是关于mybatis缓存模块设计的读后感,关于缓存的思考,关于mybatis的缓存源码详细分析在另一篇文章:https://www.cnblogs.com/gmt-hao/p/12448896.h ...

  3. （Oracle）数据库用户的密码过期时间如何修改为永不过期

    Oracle的密码过期规则是用Profile来管理的,系统默认只有一个Profile(DEFAULT),该profile的密码过期规则为180天.那么如何修改Oracle数据库用户的密码过期时间为永不 ...

  4. 键相同，比较两个map中的值是否相同

    获取.排序.比较两个Map中相同key对应value值 /** * * @param hashMap 原数据 * @param hashMap2 需要比较的数据 * @return */ privat ...

  5. List对象集合根据组合属性进行差集运算

    背景   当List是一个基本数据类型的集合的时候,进行集合运算还比较方便,但是有这么一些业务场景,比如某个用户权限变化的列表,或者取数据的变化结果,当时有时候用笨方法多循环两次也是可以的,只不过代码 ...

  6. typedef void (*sighandler_t)(int);

    typedef void (*sighandler_t)(int); sighandler_t signal(int signum, sighandler_t handler); ---------- ...

  7. [SpringSecurity] UserDetailsService 详解

    UserDetailsService 接口 当什么也没有配置的时候,账号和密码是由 Spring Security 定义生成的. 而在实际项目中账号和密码都是从数据库中查询出来的. 所以我们要通过自定 ...

  8. WPS Excel启用正则表达式

    WPS Excel启用正则表达式 新建一个空白表格文件 进入VB编辑器 插入模块 工具-引用-勾选正则表达式 (Microsoft VBScript Regular Express 5.5) 复制代码 ...

  9. sentinel流量控制和熔断降级执行流程之源码分析

    前言: sentinel是阿里针对服务流量控制.熔断降级的框架,如何使用官方都有很详细的文档,下载它的源码包 里面对各大主流框都做了适配按理,本系列文章目的 主要通过源码分析sentinel流量控制和 ...

  10. 手动合并hadoop namenode editlog

    一. 基本概念 1.NN恢复实际上是由fsimage开始(这个相当于数据的base),如果有多个fsimage,会自动选择最大的fsimage,然后按照editlog序列日志开始执行日志 2.seen ...