1 - 输入框内容显示和隐藏（加强训练）
- 题目描述
仿世纪佳缘网，显示和隐藏输入框中的提示内容，具体表现如下图：
1）输入框获得焦点，提示内容消失，边框变色
2）输入框失去焦点，如果内容为空，提示内容恢复，边框变色；如果内容不为空，只有边框变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box input {
outline: none;
}
.user,
.pwd {
color: #aeaead;
}
.btn {
width: 70px;
background-color: #0087be;
border: none;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<input type="text" name="" id="" class="user" value="邮箱/ID/手机号">
<input type="text" name="" id="" class="pwd" value="密码">
<button class="btn">登录</button>
</div>
<script>
// <!-- 仿世纪佳缘网，显示和隐藏输入框中的提示内容，具体表现如下图：
// 1） 输入框获得焦点， 提示内容消失， 边框变色
// 2） 输入框失去焦点， 如果内容为空， 提示内容恢复， 边框变色； 如果内容不为空， 只有边框变色 -->
// 1.绑定事件先:user + pwd两个发生变化
var user = document.querySelector('.user');
var pwd = document.querySelector('.pwd');
// 2.会发生的时间 注册事件 获得焦点
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 = '邮箱/ID/手机号';
}
this.style.border = '1px solid #ccc'
}
pwd.onfocus = function() { //获得焦点事件
if (this.value === '密码') {
this.value = '';
this.type = 'password';
}
}
pwd.onblur = function() {
if (this.value === '') {
this.value = '密码';
this.type = 'text'
}
}
</script>
</body>
</html>
2 - 京东关闭广告（直接隐藏即可）（加强训练）
-
题目描述
仿京东网，单击关闭广告，具体表现如下图：
<style>
.box {
/* 子绝父相 */
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
outline: none;
}
.box img {
position: absolute;
top: 5px;
right: 31px;
width: 24px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="img/close.png" alt="" id="eye">
</label>
<input type="password" id="pwd">
</div>
<script>
// 1.先获取元素
var eye = document.getElementById('eye'); //获取id
var pwd = document.getElementById('pwd');
// 2.添加处理事件
var flag = 0
eye.onclick = function() {
if (flag == 0) {
pwd.type = 'type';
this.src = 'img/open.png'
flag = 1;
} else {
pwd.type = 'password'
this.src = 'img/close.png'
flag = 0;
}
}
</script>
这里没背景图，拿背景色代替
3 - 新浪下拉菜单（加强训练）
-
题目描述
仿新浪网，鼠标移入显示下拉菜单，鼠标移出隐藏下拉菜单，具体表现如下图：
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
.nav {
/* width: 100%; */
width: 76px;
height: 40px;
border-top: 3px solid orange;
border-bottom: 1px solid #ccc;
padding-left: 30px;
background-color: rgba(0, 0, 0, .1);
}
/* .nav_first {
width: 76px;
height: 40px;
} */
.nav_a,
.icon {
height: 40px;
line-height: 38px;
text-align: center;
color: orange;
}
</style>
</head>
<body>
<div class="nav">
<div class="box">
<a href="javascript:;" class="nav_a">微博</a><i class="icon">></i>
</div>
<div>
<ul>
<li class="list_one" style="display: none;"><a href="#">私信</a></li>
<li class="list_two" style="display: none;"><a href="#">评论</a></li>
<li class="list_three" style="display: none;"><a href="#">@我</a></li>
</ul>
</div>
</div>
<!-- 事件 -->
<script>
var ico = document.querySelector('.box');
var list1 = document.querySelector('.list_one');
var list2 = document.querySelector('.list_two');
var list3 = document.querySelector('.list_three');
ico.onmouseover = function() {
list1.style.display = 'block';
list2.style.display = 'block';
list3.style.display = 'block';
}
ico.onmouseout = function() {
list1.style.display = 'none';
list2.style.display = 'none';
list3.style.display = 'none';
}
</script>
4 - 网页开关灯（加强训练）
-
题目描述
单击按钮，控制网页开关灯，具体表现如下图：
<style>
div {
width: 100%;
height: 1500px;
background-color: black;
}
.btn {
border: none;
width: 80px;
height: 40px;
color: #000;
font-size: 18px;
}
</style>
</head>
<body>
<div><button class="btn">开关灯</button></div>
<script>
var div = document.querySelector('div');
var btn = document.querySelector('.btn');
// 注册事件
var flag = 0;
btn.onclick = function() {
if (flag === 0) {
div.style.backgroundColor = 'white';
flag = 1;
} else {
div.style.backgroundColor = 'black';
flag = 0;
}
}
</script>
原创文章 51
获赞 82
访问量 1万+