DOM操作练习(1)
2018-05-29 本文已影响0人
天使投资
1.显示和隐藏盒子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示和隐藏盒子</title>
<style>
button {
margin: 10px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
}
.show {
display: block;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<div></div>
<script>
//需求：点击button,隐藏盒子。改变文字，在点击按钮，显示出来。
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
var btn = document.getElementById("btn");
var div = document.getElementsByTagName("div")[0];
btn.onclick = function() {
if (this.innerHTML === "隐藏") {
div.className = "hide";
btn.innerHTML = "显示";
} else {
div.className = "show";
btn.innerHTML = "隐藏";
}
}
</script>
</body>
</html>
2.切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img id="icon" src="img/icon_01.png" alt="">
<p></p>
<button id="prev">上一张</button>
<button id="next">下一张</button>
<script>
window.onload = function () {
// 1. 获取需要的标签
var icon = document.getElementById("icon");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
// 2. 监听按钮的点击
var maxIndex = 9, minIndex = 1, currentIndex = minIndex;
prev.onclick = function () {
if (currentIndex === minIndex){ // 边界值
currentIndex = maxIndex;
}else { // 正常情况
currentIndex --;
}
icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
console.log(icon.src);
};
next.onclick = function () {
if (currentIndex === maxIndex){ // 边界值
currentIndex = minIndex;
}else { // 正常情况
currentIndex ++;
}
icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
console.log(icon.src);
};
}
</script>
</body>
</html>
3.宠物相册
动物相册.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
margin: 50px;
}
#fj{
list-style: none;
}
#fj li{
float: left;
margin-left: 10px;
}
#big_img{
margin-left: 10px;
}
#des{
margin: 10px;
color: orangered;
font-size: 20px;
}
</style>
</head>
<body>
<!--大图描述-->
<p id="des">蒲公英</p>
<!--大图展示-->
<img id="big_img" src="img/1.jpg" alt="" width="540">
<!--小图列表-->
<ul id="fj">
<li>
<a href="img/1.jpg" title="蒲公英">
<img src="img/1.jpg" width="100" alt="蒲公英">
</a>
</li>
<li>
<a href="img/2.jpg" title="热气球">
<img src="img/2.jpg" width="100" alt="热气球">
</a>
</li>
<li>
<a href="img/3.jpg" title="别致小屋">
<img src="img/3.jpg" width="100" alt="别致小屋">
</a>
</li>
<li>
<a href="img/4.jpg" title="高山湖水">
<img src="img/4.jpg" width="100" alt="高山湖水">
</a>
</li>
<li>
<a href="img/5.jpg" title="高速公路">
<img src="img/5.jpg" width="100" alt="高速公路">
</a>
</li>
</ul>
<script>
window.onload = function () {
// 1. 获取需要的标签
var ul = document.getElementById("fj");
var aList = ul.getElementsByTagName("a");
// console.log(aList[1]);
var des = document.getElementById("des");
var big_img = document.getElementById("big_img");
// 2.绑定事件
for(var i=0; i<aList.length; i++){
aList[i].onclick = function () {
big_img.src = this.href;
des.innerHTML = this.title;
/* console.log(this.href);
console.log(this.title);*/
return false;
}
}
}
</script>
</body>
</html>
4.关闭小广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
position: relative;
display: inline-block;
}
#close{
position: absolute;
right: 18px;
top:18px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<img id="icon" src="img/img1.jpg" alt="" width="258">
<img id="close" src="img/close.jpg" alt="" width="40">
</div>
<script type="text/html">
window.onload = function () {
// 1. 获取需要的标签
var box = document.getElementById("box");
var close = document.getElementById("close");
// console.log(box, close);
// 2. 给事件源绑定事件
close.onclick = function () {
box.style.display = "none";
}
}
</script>
<script>
window.onload = function () {
// 1. 获取标签
var close = document.getElementById("close");
// 2. 监听点击事件
close.onclick = function () {
this.parentNode.style.display = "none";
}
}
</script>
</body>
</html>
5.二维码显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#e_coder{
width: 50px;
height: 50px;
background: url("images/e_coder_normal.png") no-repeat;
position: fixed;
top: 40%;
left: 0;
cursor: pointer;
}
#e_app{
position: absolute;
left: 50px;
top: -50px;
/*隐藏*/
display: none;
}
</style>
</head>
<body>
<div id="e_coder">
<div id="e_app">
<img src="images/e_coder.jpg" alt="公众号" width="150">
</div>
</div>
<script>
window.onload = function () {
// 1.获取相应的标签
var e_coder = document.getElementById("e_coder");
var e_app = document.getElementById("e_app");
// 2.监听鼠标进入
e_coder.onmouseover = function () {
// 2.1 改变背景图片
this.style.background = 'url("images/e_coder_selected.png") no-repeat';
// 2.2 显示二维码
e_app.style.display = "block";
};
// 3. 监听鼠标的离开
e_coder.onmouseout = function () {
// 3.1 改变背景图片
this.style.background = 'url("images/e_coder_normal.png") no-repeat';
// 3.2 隐藏二维码
e_app.style.display = "none";
}
}
</script>
</body>
</html>
6. 图标切换
图标切换.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
border: 1px solid #cccccc;
width: 360px;
height: 70px;
padding-top: 360px;
margin: 100px auto;
background: url("images/01big.jpg") no-repeat;
}
ul{
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="images/01.jpg" alt=""></li>
<li><img src="images/02.jpg" alt=""></li>
<li><img src="images/03.jpg" alt=""></li>
<li><img src="images/04.jpg" alt=""></li>
<li><img src="images/05.jpg" alt=""></li>
</ul>
</div>
<script>
window.onload = function () {
// 1. 获取需要的标签
var box = document.getElementById("box");
var allLi = box.getElementsByTagName("li");
// 2. 监听鼠标的进入
for(var i=0; i<allLi.length; i++){
var sLi = allLi[i];
sLi.index = i+1;
sLi.onmouseover = function () {
console.log(this.index);
box.style.background = 'url("images/0'+ this.index +'big.jpg") no-repeat';
}
}
}
</script>
</body>
</html>
7.百度换肤
百度换肤.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
vertical-align: top;
}
body{
background: url("images/1.jpg") no-repeat;
background-size:cover;
}
#box{
background-color: rgba(255, 255, 255, .5);
}
#box ul{
display: flex;
justify-content: space-around;
align-items: center;
cursor: pointer;
}
#box ul li img{
width: 180px;
height: 120px;
margin: 10px 0;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
</ul>
</div>
<script>
window.onload = function () {
// 1. 获取需要的标签
var box = document.getElementById("box");
var allLis = box.getElementsByTagName("li");
// 2. 遍历监听
for(var i=0; i<allLis.length; i++){
// 2.1 取到当个li
var sLi = allLis[i];
sLi.index = i+1;
// 2.2 绑定事件
sLi.onclick = function () {
document.body.style.background = 'url("images/'+ this.index +'.jpg") no-repeat';
}
}
}
</script>
</body>
</html>
