<!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. scrapy框架基于管道的持久化存储

    scrapy框架的使用 基于管道的持久化存储的编码流程 在爬虫文件中数据解析 将解析到的数据封装到一个叫做Item类型的对象 将item类型的对象提交给管道 管道负责调用process_item的方法 ...

  2. ElasticSearch-命令行客户端操作

    1.引言 实际开发中,主要有三种方式可以作为elasticsearch服务的客户端: 第一种,elasticsearch-head插件(可视化工具) 第二种,使用elasticsearch提供的Res ...

  3. PCB导线长宽与电源压降

    为了计算PCB中电源线走线后的压降,需要知道PCB中使用的铜的电阻率, PCB板中的铜是直接贴上去的铜箔,因此可以当成纯铜(我问了PCB打样的厂家他们的铜的电阻率,但是他们给我说不知道,所以干脆就当成 ...

  4. python工业互联网应用实战3—Django Admin列表

    Django Admin笔者使用下来可以说是Django框架的开发利器,业务model构建完成后,我们就能快速的构建一个增删查改的后台管理框架.对于大量的企业管理业务开发来说,可以快速的构建一个可发布 ...

  5. 面对key数量多和区间查询低效问题：Hash索引趴窝，LSM树申请出场

    摘要:Hash索引有两个明显的限制:(1)当key的数量很多时,维护Hash索引会给内存带来很大的压力:(2)区间查询很低效.如何对这两个限制进行优化呢?这就轮到本文介绍的主角,LSM树,出场了. 我 ...

  6. Obligations for calling close() on the iterable returned by a WSGI application

    Graham Dumpleton: Obligations for calling close() on the iterable returned by a WSGI application. ht ...

  7. 线上一次大量 CLOSE_WAIT 复盘

    https://mp.weixin.qq.com/s/PfM3hEsDa3CMLbbKqis-og 线上一次大量 CLOSE_WAIT 复盘 原创 ms2008 poslua 2019-07-05 最 ...

  8. Python学习【第7篇】：字符串拼接

    1.格式化字符有%s,%d,%f浮点数 %s代表格式化字符串,s是string意思 msg = 'my name is %s'%"xiaoxing"print(msg)运行结果:m ...

  9. maven pom文件的 name 标签 和 url标签到底是什么作用

  10. Quartz.Net 组件的封装使用Quartz.AspNetCore

    Quartz.Net 组件的封装使用 Quartz.Net是面向.NET的一款功能齐全的开源作业调度组件,你可以把它嵌入你的系统中实现作业调度,也可以基于Quartz.Net开发一套完整的作业调度系统 ...