js五道经典练习题--第一道
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
body{
font-family: "微软雅黑";
}
.btn{
padding: 6px 8px;
outline: none;
border: 1px solid #fff;
background: blueviolet;
color: #fff;
cursor: pointer;
}
#div{
width: 100px;
height: 100px;
border: 1px solid #333;
}
.mask{
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
left: 0;
top: 0;
display: none;
}
.mask_dialog{
width: 300px;
height: 300px;
background: #fff;
margin: 0 auto;
padding: 20px;
}
.item1{
margin-bottom: 10px;
}
a{
text-decoration: none;
color: #333333;
display: inline-block;
width: 46px;
height: 46px;
border: 1px solid #333333;
text-align: center;
line-height: 46px;
}
a:hover{
background: orange;
}
</style>
</head>
<body>
<h3>
请为下面的DIV添加样式
<button class="btn" id="btn">按钮</button>
</h3>
<div id="div">
</div>
<div class="mask" id="mask">
<div class="mask_dialog">
<div class="item1">
<span>请选择颜色(px)</span>
<a href="javascript:;">红</a>
<a href="javascript:;">蓝</a>
<a href="javascript:;">绿</a>
</div>
<div class="item1">
<span>请选择宽度(px)</span>
<a href="javascript:;">200</a>
<a href="javascript:;">300</a>
<a href="javascript:;">400</a>
</div>
<div class="item1">
<span>请选择高度(px)</span>
<a href="javascript:;">200</a>
<a href="javascript:;">300</a>
<a href="javascript:;">400</a>
</div>
<div class="mask_footer">
<button class="btn" id="cancel">取消</button>
<button class="btn" id="comfire">确定</button>
</div>
</div>
</div>
<script>
var arr = ["red","blue","green","200","300","400","200","300","400"]
var oBtn = document.getElementById("btn")
var oMask = document.getElementById("mask")
var oA = oMask.getElementsByTagName("a")
var oDiv = document.getElementById("div")
var oCancel = document.getElementById("cancel")
var oComfire = document.getElementById("comfire")
oBtn.onclick = function(){
oMask.style.display = "block"
}
for (var i=0;i<oA.length;i++) {
oA[i].index = i
oA[i].onclick = function(){
// alert(this.index)
if(this.index>=0&&this.index<=2){
oDiv.style.background = arr[this.index]
}else if(this.index>=3 && this.index<=5){
oDiv.style.width = arr[this.index]+"px"
}else{
oDiv.style.height = arr[this.index]+"px"
}
}
}
oCancel.onclick = function(){
oDiv.style.background = "#fff"
oDiv.style.width = 100+"px"
oDiv.style.height = 100+"px"
oMask.style.display = "none"
}
oComfire.onclick = function(){
oMask.style.display = "none"
}
</script>
</body>
</html>
js五道经典练习题--第一道的更多相关文章
- js五道经典练习题--第五道成绩列表
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js五道经典练习题--第四道qq好友列表
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js五道经典练习题--第三道实现购物车功能
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js五道经典练习题--第二道仿qq聊天框
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- Python经典练习题1：一个整数，它加上100后是一个完全平方数，再加上168又是一个完全平方数，请问该数是多少？
Python经典练习题 网上能够搜得到的答案为: for i in range(1,85): if 168 % i == 0: j = 168 / i; if i > j and (i + j) ...
- 【视频+图文】Java基础经典练习题（一）输出2-100之间的素数，及素数个数
目录 第一题:判断2-100之间有多少个素数,并输出所有素数. 1.视频讲解: 2.思路分析: 代码讲解:以i=4为例 4.为大家准备了彩蛋: 能解决题目的代码并不是一次就可以写好的 我们需要根据我们 ...
- MYSQL经典练习题，熟悉DQL
MYSQL经典练习题 (本练习题可让你熟悉DQL,快速的上手DQL) 首先,先在数据库中建立基本数据库以及表项: DROP DATABASE IF EXISTS `test`; CREATE DATA ...
- 170106、用9种办法解决 JS 闭包经典面试题之 for 循环取 i
闭包 1.正确的说,应该是指一个闭包域,每当声明了一个函数,它就产生了一个闭包域(可以解释为每个函数都有自己的函数栈),每个闭包域(Function 对象)都有一个 function scope(不是 ...
- 用9种办法解决 JS 闭包经典面试题之 for 循环取 i
2017-01-06 Tomson JavaScript 转自 https://segmentfault.com/a/1190000003818163 闭包 1.正确的说,应该是指一个闭包域,每当声明 ...
随机推荐
- LED
LED 时间限制: 1 Sec 内存限制: 128 MB 题目描述 数字显示器题目描述:最近学校晚上文化广场的人很多哇,原因是晚上大屏幕会放电影.无聊的艾神和x73也决定一起去文化大广场看一场电影, ...
- Luogu 2577[ZJOI2005]午餐 - 动态规划
Solution 啊... 我太菜了唔 不看题解是不可能的, 这辈子都不可能的. 首先一个队伍中排队轮到某个人的时间是递增的, 又要加上吃饭时间, 所以只能使吃饭时间递减, 才能满足最优,于是以吃饭时 ...
- 关于C的int
在c运行库头文件<stdint.h>中typedef各种类型的int typedef signed char int8_t; typedef unsigned char uint8_t; ...
- ubuntu如何实现双屏显示
转载自https://blog.csdn.net/tianmaxingkong_/article/details/50570538
- IOS初级：UIwindow
AppDelegate.h @property (strong, nonatomic) UIWindow *window; AppDelegate.m - (BOOL)application:(UIA ...
- 学习第一天-JAVA
第一题打印1到1000的奇数 public class OneToThousandOdd{ public static void main(String[] args) { short num = 1 ...
- 【转载】 H264的I/P/B帧类型判断
http://blog.csdn.net/zhuweigangzwg/article/details/44152239 这里首先说明下H264的结构: 00 00 00 01/00 00 01-> ...
- spring事件机制
前置知识补充: 程序里面所谓的“上下文”就是程序的执行环境,打个比方:你就相当于web程序,你的房子就相当于web程序的上下文,你可以在家里放东西,也可以取东西,你的衣食住行都依赖这个房子,这个房子就 ...
- oracle 大量连接导致数据库不能登录
系统遇到过几次这种问题,一个系统申请的session数过大,导致数据库进程数满,无法连接的问题. pl sql develope 报的错误是:ORA-12170:TNS:链接超时 oracle用户登录 ...
- 2018.10.25 洛谷P4187 [USACO18JAN]Stamp Painting（计数dp）
传送门 其实本来想做组合数学的2333. 谁知道是道dpdpdp. 唉只能顺手做了 还是用真难则反的思想. 这题我们倒着考虑,只需要求出不合法方案数就行了. 这个显然是随便dpdpdp的. f[i]f ...