【妙味课堂】JS热身课后习题
<!--
*
*
* @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热身课后习题的更多相关文章
- 妙味课堂——JavaScript基础课程笔记
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- 妙味课堂——HTML+CSS(第一课)
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...
- 妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示
1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...
- 妙味课堂史上最全的javascript视频教程，前端开发人员必备知识点，新手易学，拔高必备！！！
妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分 ...
- 妙味课堂——HTML+CSS(第四课)(二)
单开一篇来讲一个大点的话题——清浮动 来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...
- 妙味远程课堂-JS热身运动-上
希望某个元素移除视线 display:none//显示无 visibility:hidden//可见性 隐藏 width/height 改为0 透明度 定位,left/top值为负值 用与背景颜色一样 ...
- 网易云课堂--妙味 《js基础课程》
==小例子1 ==JS中允许将"." 替换成 “[ ]” document.getElementById('btn1') 写成 document['etElementById' ...
- 妙味课堂——HTML+CSS(第二课)
常见标签——img标签 <img src="图片地址" alt="图片名"/> alt属性是图片名字,是给百度搜索引擎抓取使用的.也有当图片地址不正 ...
随机推荐
- Java性能优化之编程技巧总结
程序的性能受代码质量的直接影响.在本文中,主要介绍一些代码编写的小技巧和惯例,这些技巧有助于在代码级别上提升系统性能. 1.慎用异常 在Java软件开发中,经常使用 try-catch 进行错误捕获, ...
- Python 学习 第十三篇：数据的读写-文件、DataFrame、json
Python的文件是一个重要的对象,使用open()函数来打开文件,创建文件对象,进行文件的读写操作.当数据用于交换信息时,通常需要把数据保存为有格式的文本数据,可以保存为有特定的行分隔符和列分隔符的 ...
- 一篇 SpringData+JPA 总结
概述 SpringData,Spring 的一个子项目,用于简化数据库访问,支持 NoSQL 和关系数据库存储 SpringData 项目所支持 NoSQL 存储 MongDB(文档数据库) Neo4 ...
- js、jquery实现放大镜效果
在一些电商网站的商品详情页面,都会有放大镜效果,实现起来并不是很困难,今天用了两个小时,写了一个放大镜效果的实例,来分享给大家! 实现的效果大概是这个样子的 预览 先来看一下效果吧,点击下面的链接预览 ...
- elasticsearch数据输入和输出
Elastcisearch 是分布式的 文档 存储.它能存储和检索复杂的数据结构–序列化成为JSON文档–以 实时 的方式. 换句话说,一旦一个文档被存储在 Elasticsearch 中,它就是可以 ...
- 03-命令图片.doc
- js总结：利用js获取下拉框的value值和文本值
select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的. html代码: ...
- PHP开发编码规范
(转载:https://blog.csdn.net/alexdream/article/details/2213313) 这些年来多从事Linux下PHP和C相关的开发,带过很多项目和团队,下面是根据 ...
- Jquery 选择器 特殊字符 转义字符
1.Jquery 选择器 id包含特殊字符,加双斜线 \\ 例 <input type="text" id="dbo_HouseInfo.HouseResour ...
- [转帖]dd命令详解
dd命令详解 https://czmmiao.iteye.com/blog/1748748 之前一直对linux的命令很恐惧 现在发现 其实不是那么复杂 要仔细学习就可以了 比如 dd = disk ...