<!--
*
*
* @Author: wyy
* @Date: 2018-04-15 17:36:35
* @Email: 2752154874@qq.com
* @Last Modified by: wyy
* @Last Modified time: 2018-05-04 17:28:11
*
*
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js-dem-3</title>
<meta name="viewport" content="device-width">
<meta name="decription" content="a js test">
<style>
body {
background: #e9feff7a;
}
.set {
font-size: 18px;
margin-bottom: 10px;
}
.default {
width: 100px;
height: 100px;
border-style: solid;
background: #fff;
}
.set_btn {
background-color: red;
color:white;
}
.set_menu {
width: 270px;
height: auto;
margin: 80px 600px;
background-color: #c6c5c530;
display: none;
}
.small_bg {
width: 270px;
height: 38px;
margin-left: 13px;
}
p {
float: left;
margin-top: 10px;

}
.set_menu ul {
list-style-type: none;
}
.small_bg li {
float: left;
padding: 10px 8px;
}
input {
border: none;
vertical-align: middle;
}
input#red {
background: #d95d69;
color: white;
}
input#yellow {
background: #d7cc51;
color: white;
}
input#blue {
background: #4884dd;
color: white;
}
.num_btn {
border-style: groove;
}
.s_btn {
background-color: blue;
color: white;
margin-left: 15px;
}
</style>
</head>
<body id="all">
<div class="set">请为下面的Div设置样式
<input type="button" class="set_btn" id="set" value="设置"></div>
<div class="default" id="def"></div>
<div class="set_menu" id="menu">
<div class="small_bg">
<p>请选择背景颜色:</p>
<ul>
<li><input type="button" value="红" id="red"></li>
<li><input type="button" value="黄" id="yellow"></li>
<li><input type="button" value="蓝" id="blue"></li>
</ul>
</div>
<div class="small_bg">
<p>请选择宽(px):</p>
<ul>
<li><input type="button" class="num_btn" value="200" id="w2"></li>
<li><input type="button" class="num_btn" value="300" id="w3"></li>
<li><input type="button" class="num_btn" value="400" id="w4"></li>
</ul>
</div>
<div class="small_bg">
<p>请选择高(px):</p>
<ul>
<li><input type="button" class="num_btn" value="200" id="h2"></li>
<li><input type="button" class="num_btn" value="300" id="h3"></li>
<li><input type="button" class="num_btn" value="400" id="h4"></li>
</ul>
</div>
<div class="small_bg">
<ul>
<li><input class="s_btn" type="button" value="恢复" id="recover"></li>
<li><input class="s_btn" type="button" value="确定" id="ok"></li>
</ul>
</div>
</div>
</body>
<script>

window.onload = function(){
var oSetbtn = document.getElementById("set");
var oSetmenu = document.getElementById("menu");
var oDef = document.getElementById("def");
var oBackground = document.getElementById("all");
var oRed = document.getElementById("red");
var oYellow = document.getElementById("yellow");
var oBlue = document.getElementById("blue");
var oSetok = document.getElementById("ok");
var oRecover = document.getElementById("recover");
var oW2 = document.getElementById("w2");
var oW3 = document.getElementById("w3");
var oW4 = document.getElementById("w4");
var oH2 = document.getElementById("h2");
var oH3 = document.getElementById("h3");
var oH4 = document.getElementById("h4");

oSetbtn.onclick=function (){
oSetmenu.style.display = 'block';
oBackground.style.background = '#ebeabe4d';
}
oRed.onclick=function (){
oRed.style.background = 'red';
oDef.style.background = 'red';
oYellow.style.background = '#d7cc51';
oBlue.style.background = '#4884dd';
}
oYellow.onclick=function (){
oYellow.style.background = 'yellow';
oDef.style.background = 'yellow';
oRed.style.background = '#d95d69';
oBlue.style.background = '#4884dd';
}
oBlue.onclick=function (){
oBlue.style.background = 'blue';
oDef.style.background = 'blue';
oRed.style.background = '#d95d69';
oYellow.style.background = '#d7cc51';
}
oW2.onclick=function (){
oDef.style.width = '200px';
}
oW3.onclick=function (){
oDef.style.width = '300px';
}
oW4.onclick=function (){
oDef.style.width = '400px';
}
oH2.onclick=function (){
oDef.style.height = '200px';
}

oH3.onclick=function (){
oDef.style.height = '300px';
}
oH4.onclick=function (){
oDef.style.height = '400px';
}
oRecover.onclick=function(){
oDef.style.width = '100px';
oDef.style.height = '100px';
oDef.style.background = '#fff';
}
oSetok.onclick=function (){
oSetmenu.style.display = 'none';
}
}

</script>
</html>

【妙味课堂】JS热身课后习题的更多相关文章

  1. 妙味课堂——JavaScript基础课程笔记

    集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...

  2. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  3. 妙味课堂——HTML+CSS(第一课)

    一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...

  4. 妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示

    1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...

  5. 妙味课堂史上最全的javascript视频教程，前端开发人员必备知识点，新手易学，拔高必备！！！

    妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分  ...

  6. 妙味课堂——HTML+CSS(第四课)(二)

    单开一篇来讲一个大点的话题——清浮动    来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...

  7. 妙味远程课堂-JS热身运动-上

    希望某个元素移除视线 display:none//显示无 visibility:hidden//可见性 隐藏 width/height 改为0 透明度 定位,left/top值为负值 用与背景颜色一样 ...

  8. 网易云课堂--妙味 《js基础课程》

    ==小例子1   ==JS中允许将"." 替换成 “[ ]” document.getElementById('btn1') 写成 document['etElementById' ...

  9. 妙味课堂——HTML+CSS(第二课)

    常见标签——img标签 <img src="图片地址" alt="图片名"/> alt属性是图片名字,是给百度搜索引擎抓取使用的.也有当图片地址不正 ...

随机推荐

  1. Ajax跨越问题原因分析与解决思路

    1.什么是AJAX跨域问题 简单来说,就是前端调用后端服务接口时 如果服务接口不是同一个域,就会产生跨域问题 2.AJAX跨域场景 前后端分离.服务化的开发模式 前后端开发独立,前端需要大量调用后端接 ...

  2. Netty入门（一）之webSocket聊天室

    一:简介 Netty 是一个提供 asynchronous event-driven (异步事件驱动)的网络应用框架,是一个用以快速开发高性能.高可靠性协议的服务器和客户端. 换句话说,Netty 是 ...

  3. ML.NET 示例：聚类之鸢尾花

    写在前面 准备近期将微软的machinelearning-samples翻译成中文,水平有限,如有错漏,请大家多多指正. 如果有朋友对此感兴趣,可以加入我:https://github.com/fei ...

  4. JVM规范系列开篇：为什么要读JVM规范？

    许多人知道类加载机制.JVM内存模型,但他们可能不知道什么是<Java虚拟机规范>.对于Java开发来说,<Java虚拟机规范>才是最为官方.准确的一个文档,了解这个规范可以让 ...

  5. 平均精度均值(mAP)——目标检测模型性能统计量

    在机器学习领域,对于大多数常见问题,通常会有多个模型可供选择.当然,每个模型会有自己的特性,并会受到不同因素的影响而表现不同. 每个模型的好坏是通过评价它在某个数据集上的性能来判断的,这个数据集通常被 ...

  6. handsontable 的核心方法

    原文地址:http://blog.csdn.net/mafan121/article/details/46122577 1.为handsontable添加钩子方法 addHook(key,callba ...

  7. websockect外网无法访问问题

    项目在测试环境可以正常使用websockect,然而把项目发布到公网上却无法使用问题. 有几种解决方案,1.防火墙未加入入站规则,否则没有权限连接到外网. 方法:控制面板--window防火墙---高 ...

  8. public private protected default小结

    public:可以被所有其他类所访问: private:只能被自己访问和修改: protected:自身.子类及同一个包中类可以访问: default:声明时没有加修饰符,同一包中的类可以访问:当子类 ...

  9. struts2的基本使用

    struts2在web中当作前端控制器,接收来自页面的请求,使用过滤器拦截模式对请求进行拦截并交给相应配置的action类处理. 所以在web中使用最重要的是struts2的核心过滤器StrutsPr ...

  10. p9半幺群

    如何不理解划红线的地方?第二个划红线地方,请举一个例子 1.0不是幺元 2.f(1)=2, f(2)=1, f(3)=3, g(1)=2, g(2)=3, g(3)=1  fg不等于gf