Javascript实现"点按钮出随机背景色的"三个DIV
<!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的更多相关文章
- iOS之按钮出现时加一个动画效果
//按钮出现时的动画效果 + (void)buttonAnimation:(UIButton *)sender { CAKeyframeAnimation *animation = [CAKeyfra ...
- JavaScript点击按钮显示 确认对话框
//JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...
- Javascript&Ajax-深入浅出JSONP--解决ajax跨域问题
Javascript&Ajax-深入浅出JSONP--解决ajax跨域问题 原理讲解: 链接地址:http://www.cnblogs.com/chopper/archive/2012/03/ ...
- JS控制语句 编程练习 学生数据，分别是姓名、性别、年龄和年级，接下来呢，我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦。
编程练习 在一个大学的编程选修课班里,我们得到了一组参加该班级的学生数据,分别是姓名.性别.年龄和年级,接下来呢,我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦. 学生信息如下 ...
- javaScript 删除事件 弹出确认 取消对话框
javaScript 删除事件 弹出确认 取消对话框 1. <a href="javascript:if(confirm('确实要删除?'))location='http://www. ...
- CSS实现按钮点击后根据背景色加深效果-一颗优雅草bigniu
具体代码如下 button{ position: relative; } button:active::before { display: block; content: ''; position: ...
- 使用 JavaScript自定义函数计算出教室的体积大小，其中教室的长、宽、高分别为 8 米、5 米、3 米
查看本章节 查看作业目录 需求说明: 使用 JavaScript自定义函数计算出教室的体积大小,其中教室的长.宽.高分别为 8 米.5 米.3 米 实现思路: 创建 HTML 页面 在页面的 < ...
- javascript实现掉落弹出层------Day29
顾名思义.所谓"掉落弹出层".就是出现一个弹出层,而出现的位置是从上方向下掉落.掉落到指定的位置停止,这样分析起来.和"右下角弹出提醒对话框"比起来,确有异曲同 ...
- JavaScript判断图片是否加载完成的三种方式
JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 ...
随机推荐
- 转 jmeter录制https请求
jmeter录制https请求 文章转自:https://www.cnblogs.com/zhengna/p/10180998.html 工具:Jmeter4.0 + Java1.8 需求:对某ht ...
- Any race is a bug. When there is a race, the compiler is free to do whatever it wants.
https://mp.weixin.qq.com/s/pVJiFdDDKVx707eKL19bjA 谈谈 Golang 中的 Data Race 原创 ms2008 poslua 2019-05-13 ...
- OPC UA 统一架构） (二)
OPC UA (二) 重头戏,捞取数据,才是该干的事.想获取数据,先有数据源DataPrivade,DataPrivade的数据集合不能和BaseDataVariableState的集合存储同一地址, ...
- Node 使用webpack编写简单的前端应用
编写目的 1. 使用 Node 依赖webpack.jQuery编写简单的前端应用. 操作步骤 (1)新建一个目录 $ mkdir simple-app-demo $ cd simple-app-de ...
- （一）Spring Boot 常用注解
文章目录 一.注解(annotations)列表 二.注解(annotations)详解 三.JPA注解 四.SpringMVC相关注解 五.全局异常处理 @ExceptionHandler(Exce ...
- Spring框架——IOC&DI
Spring Spring 目标 内容 Spring与web整合的原理 Spring 中包含的关键特性 Spring架构图 企业级框架 企业级系统 IOCDI IOC DI IOC和DI 为什么使用依 ...
- Java 复习整理day05
1 package com.it.demo01_oop; 2 3 import java.util.Arrays; 4 5 /* 6 案例: 演示面向过程和面向对象代码的区别 7 8 面向过程编程思想 ...
- 力扣643.子数组最大平均数I-C语言实现
题目 给定 n 个整数,找出平均数最大且长度为 k 的连续子数组,并输出该最大平均数. 示例: 输入:[1,12,-5,-6,50,3], k = 4 输出:12.75 解释:最大平均数 (12-5- ...
- GPLT L2-024 部落 （并查集）
N ≤ 104,输入如下数据如果没有路径压缩可能会超时. 10000 2 1 2 2 3 4 2 5 6 -- 2 9997 9998 2 9999 10000 2 9999 9997 -- 2 5 ...
- LA3902 Network (树上dfs)
题目链接:点击打开链接 题意:n台机器连成一个树状网络,其中叶节点是客户端,其他节点是服务器,目前有一台服务器s正在提供服务.让你在其他服务器上也安排同样的服务,使得每台客户端到最近服务器的距离不超过 ...