每日作业-Web APIs第01天
1 - 输入框内容显示和隐藏（加强训练）
-
题目描述
仿世纪佳缘网，显示和隐藏输入框中的提示内容，具体表现如下图：
1）输入框获得焦点，提示内容消失，边框变色
2）输入框失去焦点，如果内容为空，提示内容恢复，边框变色；如果内容不为空，只有边框变色
-
训练目标
能够操作元素的属性和样式属性
-
训练提示
1.给文本框注册获得焦点事件，清空value值，改变border的颜色
2.给文本框注册失去焦点事件
扫描二维码关注公众号，回复： 13457598 查看本文章
3.获取并判断文本框的内容
4.内容为空，恢复提示内容，边框恢复原来的颜色
5.内容不为空，边框恢复原来的颜色
6.类名，样式已写好直接使用。
-
参考方案
显示隐藏文本框案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.input_text {
border: 1px solid #d9d9d9;
color: #aaa;
outline: none;
}
.input_text_focus {
border: 1px solid #ffd6db;
color: #888;
outline: none;
}
</style>
</head>
<body>
<div class="new_header">
<div class="new_wrap">
<form id="hder_login_form_new" method="post">
<input type="text" class="input_text" id="uname" value="邮箱/ID/手机号">
</form>
</div>
</div>
<script>
var user = document.querySelector('.input_text');
var pwd = document.querySelector('.pwd');
user.onfocus = function() {
if (this.value === '邮箱/ID/手机号') {
this.value = '';
}
this.style.color = '#333'
this.style.border = '1px solid pink'
}
user.onblur = function() {
if (this.value === '') {
this.value = '';
}
this.style.border="1px solid black"
}
</script>
</body>
</html>
2 - 京东关闭广告（直接隐藏即可）（加强训练）
-
题目描述
仿京东网，单击关闭广告，具体表现如下图：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8KvZnu4k-1635836348065)(images/1550739254881.png)]](https://img-blog.csdnimg.cn/5910a433ffc040fa9a405acb1218776c.png)
-
训练目标
能够操作元素的样式属性
-
训练提示
1.获取要操作的关闭按钮和广告元素
2.关闭按钮注册单击事件
3.隐藏广告元素 （设置目标元素的style.display为none或者添加删除类名的方式）
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.iconfont {
font-family: iconfont, sans-serif;
font-style: normal;
-webkit-text-stroke-width: .2px;
-moz-osx-font-smoothing: grayscale;
}
#J_event_lk {
display: block;
width: 100%;
height: 80px;
background: url(luzhou.jpg) no-repeat 50% 0;
}
#J_event_close {
cursor: pointer;
position: absolute;
right: 5px;
top: 5px;
background: url(close.jpg);
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div id="J_event" style="position: relative;background-color:#cd1c1c;">
<div id="luzhou" class="grid_c1" style="position: relative;">
<a id="J_event_lk" href="" target="_blank"></a>
<i id="J_event_close"></i>
</div>
</div>
<script>
let a1=document.getElementById("J_event_close");
let a2=document.getElementById("luzhou")
a1.onclick=function(){
a2.style.display="none"
}
</script>
</body></html>
3 - 新浪下拉菜单（加强训练）
-
题目描述
仿新浪网，鼠标移入显示下拉菜单，鼠标移出隐藏下拉菜单，具体表现如下图：
-
训练目标
能够操作元素的样式属性
-
训练提示
1.获取要操作的“微博”和下拉菜单元素
2.给“微博”注册鼠标移入事件，显示下拉菜单 onmouseover(鼠标移入事件)
3.给“微博”注册鼠标移出事件，隐藏下拉菜单 onmouseout（鼠标移出事件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.tn-person-r .tn-title {
float: left;
font-size: 14px;
position: relative;
margin-left: 20px;
width: 80px;
}
.tn-person-r .tn-title .tn-tab {
border: 1px solid #FCFCFC;
border-width: 0 1px;
color: #4C4C4C;
display: inline-block;
cursor: pointer;
position: relative;
z-index: 9999;
padding: 0 2px 0 0;
text-decoration: none;
width: 76px;
height: 40px;
line-height: 40px;
text-align: center;
}
.tn-person-r .tn-arrow {
display: inline-block;
width: 8px;
height: 5px;
margin: 0 0 0 5px;
overflow: hidden;
vertical-align: middle;
font-size: 12px;
line-height: 13px;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
background: url(icon.png) 0 -977px no-repeat;
}
.tn-person-r .tn-new {
margin-top: -10px;
position: absolute;
background: url(icon.png) 0 -1017px;
width: 14px;
height: 11px;
}
.tn-person-r .tn-topmenulist-a-weibo,
.tn-topmenulist-a-other {
width: 77px;
}
.tn-person-r .tn-topmenulist-a {
border: 1px solid #EBBE7A;
border-top: 0;
overflow: hidden;
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
top: 41px;
left: 0;
}
.tn-person-r .tn-topmenulist .tn-text-list {
border-bottom: 1px solid #FECC5B;
margin: 0 0 -2px;
width: 80px;
}
.tn-person-r .tn-topmenulist .tn-text-list li {
width: 50px;
line-height: 31px;
border-bottom: 1px solid #FECC5B;
color: #333;
padding: 0 15px;
}
</style>
</head>
<body>
<div class="top-nav">
<div class="tn-bg">
<div class="tn-header">
<div class="tn-person-r">
<div class="tn-title " id="SI_Top_Weibo">
<a target="_blank" href="javascript:;" class="tn-tab" id="weibo">
<i>微博<em class="tn-new" style="display:none;"></em>
<span class="tn-arrow"> </span>
</i>
</a>
<div style="display: none;" class="tn-topmenulist tn-topmenulist-a tn-topmenulist-a-weibo" id="weibo_list">
<ul class="tn-text-list">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
let AA=document.getElementById("weibo");
let DD=document.getElementById("weibo_list")
AA.onmousemove=function(){
DD.style.display='block'
}
AA.onmouseout=function(){
DD.style.display='none'
}
</script>
</html>