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>
分享