<!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. django 组件 自定义过滤器 自定义标签 静态文件配置

    组件 将一些功能标签写在一个html文件里,这个文件作为一个组件,如果那个文件需要就直接拿过来使用即可: 这是title.html文件,写了一个导航栏,作为一个公用的组件 <div style= ...

  2. 如何创建一个Java项目

    目录 新建项目 项目信息配置 创建Java类 编译和运行 新建项目 首先双击eclipse进入到eclipse页面. 菜单"File"下的"New"里" ...

  3. JVM(四)打破双亲委派和SPI机制

    前言: 我们都知道判断两个类是不是同一个,要根据类加载器和全限定名.这是为什么呢?为什么不同的类加载器加载同一个类是不同的呢? 答案就是,不同的类加载器所加载的类在方法区的存储空间是不同的即Insta ...

  4. centos7 centos-home 磁盘空间转移至centos-root下

    亲测可用,转载是为了记录,方便下次自己查看,如后朋友看到,请去查看作者原文,支持原创!!! 原文连接:https://www.cnblogs.com/renshengruxi/p/11782980.h ...

  5. 解决windows git乱码问题

    在windows中打开git bash git config --global i18n.commitencoding utf-8       设置提交日志使用utf-8 git config --g ...

  6. Flutter环境搭建遇坑小结（一）

    对flutter的了解与开发也有一段时间了,总的来说,搭建开发环境遇到的各种坑也是很多,尤其对于初次接触Android开发的人员来说 一.flutter运行提示Running Gradle task ...

  7. freemarket+itext+springboot将html静态页面渲染后导出为pdf文件

    1.maven依赖 <dependency> <groupId>com.itextpdf</groupId> <artifactId>itextpdf& ...

  8. 提供读取excel 的方法

    /** * 对外提供读取excel 的方法 * */ public static List<List<Object>> readExcel(String path) throw ...

  9. 37.Samba 文件共享服务1--配置共享资源

    1.Samba 服务程序的主配置文件包括全局配置参数和区域配置参数.全局配置参数用于设置整体的资源共享环境,对里面的每一个独立的共享资源都有效.区域配置参数则用于设置单独的共享资源,且仅对该资源有效. ...

  10. Codeforces 1364C - Ehab and Prefix MEXs

    题意:给1e5的数组a 保证 ai <= ai+1  ai<=i  求一个一样长的数组b 使得mex(b1,b2···bi) = ai QAQ:不知道为啥这1600分的题比赛时出不了 啊啊 ...