<!--
*
*
* @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. disruptor 高性能之道

    disruptor是一个高性能的线程间异步通信的框架,即在同一个JVM进程中的多线程间消息传递.应用disruptor知名项目有如下的一些:Storm, Camel, Log4j2,还有目前的美团点评 ...

  2. 单点登录SSO：图示和讲解

    目录 概述 示例运行效果动画 跨域Web SSO时序图 代码截图 几个基本概念 涉及的站点和页面 重点理解:单点登录的核心步骤 敢说最准确的单点登录图示,因为: 我严格对照所画时序图的每个步骤,开发了 ...

  3. 单点登录SSO：概述与示例

    目录 概述 演示一:零改造实施单点登录 演示二: 单点注销 演示三:集成AD认证 演示四:客户端单点登录 演示五:移动端单点登录 单点登录SSO概述 本系列将由浅入深的,带大家掌握最新单点登录SSO方 ...

  4. ESP8266的低功耗方案-睡眠模式

    在某些时候我们设计的产品可能不具备持久供电的环境,那通常会采用锂电池.干电池一类的轻便型的非持久性电源.当遇到这种情况时,产品的续航能力可能就会成用户评估产品的一个重要指标,加大电池容量当然是最为直接 ...

  5. [Linux]Debian 9重启DNS重置问题

    先编辑/etc/resolv.conf, 添加一个DNS, 比如114.114.114.114 然后sudo apt-get install resolvconf 然后编辑/etc/resolvcon ...

  6. 通过设置线程池的最小线程数来提高task的效率，SetMinThreads。

    http://www.cnblogs.com/Charltsing/p/taskpoolthread.html task默认对线程的调度是逐步增加的,连续多次运行并发线程,会提高占用的线程数,而等若干 ...

  7. 关于 pip安装的可能错误的排除

    今天安装selenium总是报错(下为错误信息) C:\Python27\Scripts>pip install seleniumCollecting seleniumC:\Python27\l ...

  8. stark组件的增删改（新）

      1.效果图 2.详细步骤解析 3.总结.代码   1.效果图 增 删除 改 2.详细步骤解析 1.构造增删改查url,反向解析 2.ModelForm定制add.edit页面 3.starak中的 ...

  9. CodeForces Round #529 Div.3

    http://codeforces.com/contest/1095 A. Repeating Cipher #include <bits/stdc++.h> using namespac ...

  10. 解决Window安全中心对Kitematic-0.17.3-Ubuntu.zip提示病毒，但无法删除的问题。

    Trojan:JS/Tisifi.B 类型:特洛伊木马 containerfile: C:\Users\Administrator\Desktop\Kitematic-0.17.3-Ubuntu.zi ...