<!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. Ajax编程基础

    目录 Ajax编程基础 传统网站中存在的问题 Ajax概述 Ajax的应用场景 Ajax的运行环境 Ajax运行原理及实现 Ajax运行原理 Ajax的实现步骤 1.创建Ajax对象 2.告诉Ajax ...

  2. Qt QMenuBar和QMenu以及QAction巧妙的使用方法

    这里简单介绍QMenuBar和QMenu以及QAction是什么,其详细功能本文不做介绍,如果还不了解的朋友可以查阅Qt的帮助手册或浏览其它相关博客.如下图,软件中蓝色条框是QMenuBar用来承载Q ...

  3. 基于go-cqhttp实现QQ机器人

    本篇文章记录一下自己在编写QQ机器人的时候所遇到的一些问题和核心功能的实现. QQ机器人RabbitBot采用python编写,由于是个人学习使用,故目前不会开源完整代码,只会放出核心代码供学习参考. ...

  4. MySQL主从复制配置部署

    配置前准备:安装MySQL   MySQL在centOS上的安装传送门: 1.集群规划 hadoop105 hadoop106 hadoop107 MySQL(master) MySQL(slave) ...

  5. 作为一款内存数据库，为什么断电后Redis数据不会丢失

    前言 Redis 作为一款内存数据库,被广泛使用于缓存,分布式锁等场景,那么假如断电或者因其他因素导致 Reids 服务宕机,在重启之后数据会丢失吗? Redis 持久化机制 Redis 虽然是定义为 ...

  6. Hash Map集合和Hash Set集合

    HashMap集合的使用 1.1.每个集合对象的创建(new) 1.2.从集合中添加元素 1.3.从集合中取出某个元素 1.4.遍历集合 public class HashMapTest { publ ...

  7. Spring Boot 核心配置文件 bootstrap & application

    Spring Boot 核心配置文件 bootstrap & application 1.SpringBoot bootstrap配置文件不生效问题 2.bootstrap/ applicat ...

  8. 通过脚本本地下载Jar包

    通过脚本本地下载Jar包 1.脚本 2.pom.xml 1.脚本 download.bat # !/bin/bash mvn -f pom.xml dependency:copy-dependenci ...

  9. var_dump和var_export区别

    1.var_dump() :获取结构化的数据,按照数组的层级输出 2.var_export() :获取结构化的数据,返回有效的php代码,保留结构化形式的存储数据,数据类型为字符串. 例如: < ...

  10. Codeforces Round #664 (Div. 2) C. Boboniu and Bit Operations

    传送门:cf1395C 题意 c[i]=a[i]&b[j],b[j]是b数组中任意一个,求c[1] | c[2] | ... | c[n]最小值. 题解 经典的二进制枚举答案,因为a和b的最大 ...