<!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. Kubernetes之GlusterFS集群文件系统高可用安装，提供动态卷存储

    GlusterFS高可用安装 一. 准备工作 安装好的k8s集群,提供其中三个节点给GFS,这三个节点都至少有一个可用的裸块设备 在k8s所有节点安装所需要的组件 # ubuntu16.04 add- ...

  2. 十九、更改LCD显示屏

    一.裸机修改 之前测试用的屏幕是480*272的分辨率,现在要换成800*480的屏,因此要对软件代码进行修改. 对于裸机驱动而言,主要有两个点需要注意,一个是屏幕分辨率变了,因此初始化的时候与屏幕分 ...

  3. CSRF Laravel Cross Site Request Forgery protection¶

    Laravel 使得防止应用 遭到跨站请求伪造攻击变得简单. Laravel 自动为每一个被应用管理的有效用户会话生成一个 CSRF "令牌",该令牌用于验证授权用 户和发起请求者 ...

  4. JavaWeb——EL及JSTL学习总结

    什么是EL表达式 为什么需要EL EL的主要作用 EL的语法 EL的开发步骤 EL实例练习 EL中的运算符 EL表达式显示内容的特点 EL的特点 EL隐式对象 EL隐式对象介绍 隐式对象实例练习 什么 ...

  5. Python 学习博客地址

    Alex  https://www.cnblogs.com/alex3714林海峰 https://www.cnblogs.com/linhaifeng武佩奇 https://www.cnblogs. ...

  6. mapreduce编程练习（二）倒排索引 Combiner的使用以及练习

    问题一:请使用利用Combiner的方式:根据图示内容编写maprdeuce程序 示例程序 package com.greate.learn; import java.io.IOException; ...

  7. （6）dd命令安装Linux

    1.面对大批量服务器的安装,人们往往热衷于选择"无人值守安装"的方式,而此方式需要对服务器进行过多的配置,并不适合初学者. 无人值守安装(Kickstart),又称全自动安装,其工 ...

  8. 从ReentrantLock实现非公平锁的源码理解AQS中的CLH队列

    虽然前面也看过AQS的文章,并且转载过一篇大佬的分析,但是我觉得他们对于AQS和ReentrantLock部分的源码的分析并不详细,自己理解期来还是有问题,于是自己准备花时间重新梳理下,好了,进入正题 ...

  9. NodeMCU使用ArduinoJson判断指定键值对存在与否

    NodeMCU使用ArduinoJson判断指定键值对存在与否 从ArduinoJson库中可以得知,判断键值对是否存在可以使用containskey()函数,但是查看ArduinoJson-cont ...

  10. Birkhoff-von Neumann Crossbar 光交换网络的调度方案

    Birkhoff-von Neumann Crossbar 光交换网络的调度方案 ​ This is a summary aimed at looking for "high perform ...