一个小时，零基础入门，看完这篇30行代码 教你实现百度换肤！
Posted 贪吃ღ大魔王
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个小时，零基础入门，看完这篇30行代码 教你实现百度换肤！相关的知识，希望对你有一定的参考价值。
| 百度换肤效果 |
零基础入门，只要有兴趣，20分钟教你学会百度换肤效果。没错，只需要20行代码就能搞。
废话少说，直接上效果：
先了解一下html节点对象
DOM的树形结构（节点树）
html中的所有标签，文本，空格都可以叫做节点对象。
我们可以通过DOM的选择器 来操作节点：
获取节点对象
1.通过标签id 获取节点
var obj = document.getElementById("id名称")
描 述：获取网页指定id名字的元素，返回一个对象
语 法：var obj = document.getElementById("id名称")
参 数：id名称（注：需要加引号）
返回值：对象，对象的属性就是HTML标签的属性
2.通过标签名称获取节点
var obj = document.getElementsByTagName("标签名称")
功 能：获取网站指定标签名称的元素
语 法：var obj = document.getElementsByTagName("标签名称")
参 数：标签名称（注：需要加引号）
返回值：返回一个集合（数组），集合中每个元素都是一个单独标签对象
3.通过标签name获取节点
var obj = document.getElementsByName("标签name名称")
功 能：通过标签的name值获取元素
语 法：var obj = document.getElementsByName("标签name名称")
参 数：标签的name名称（注：需要加引号）
返回值：返回值是数组，通常用来获取有name的input的值
4.通过标签类名获取节点
var obj = document.getElementsByClassName() ("标签的class属性名称")
功 能：通过class名获取元素
语 法：var obj = document.getElementsByClassName() ("标签的class属性名称")
参 数：标签的class属性名称（注：需要加引号）
返回值：返回值是数组
注：
不是所有标签都有name值；
在低版本的浏览器中，getElementsByName和getElementsByClassName有兼容性
ES5选择器：强大到超乎想象，支持IE8+。ECMAScript借鉴了jQuery选择器的
document.querySelector(); //返回匹配到的第一个元素
document.querySelectorAll(); //返回一个数组，哪怕只有一个元素
可以直接填写,我们需要找的标签名,类名,id名称
给事件绑定点击事件
直接给节点绑定事件
/获取节点对象
节点对象.onclick = function(){
}
通过监听器给节点绑定点击事件
/获取节点对象
节点对象.addEventListener（function（）{
}）
了解的差不多了 我们可以从这里开始写我们的百度换肤具体代码：
先再一个div盒子中存放五张我们需要的图片:
<body>
<div>
<img src="img/百度换肤1.jpg"/>
<img src="img/百度换肤2.jpg"/>
<img src="img/百度换肤3.jpg"/>
<img src="img/百度换肤4.jpg"/>
<img src="img/百度换肤5.jpg"/>
</div>
</body>
运行后，五张图片就会这样呈现再浏览器页面中
然后我们通过css来给他们设置样式:
CSS:
<style type="text/css">
div{
margin: 50px auto;
width: 500px;
height: 100px;
background-color: white;
display: flex;
justify-content: space-around;
}
div img{
width: 90px;
height: 98px;
}
body{
background: url(img/百度换肤1.jpg) center;
}
</style>
我们要将五张图片设置一定的大小，放在div盒子中，将div放在body中间。
再将其中一张图片作为body的背景图片。
下面也是最重要的一部来实现背景图片的切换。
我们需要用到DOM对节点对象的操作
1.先获取我们需要操作的节点
也就是所有图片节点
var box = document.querySelector('div').querySelectorAll('img');
注意：这里获取的是全部图片节点，他们存放一起
然后我们需要给每张图片绑定点击事件
我们需要遍历来绑定
for (var i = 0;i < box.length;i++) {
box[i].onclick = function() {
console.log(this);
}
}
这里我们注意this的指向可以将他打印出来，看他是否指向我们的操作的节点对象，
确定是指向操作的节点对象后，当点击当前图片对象后，将它的路径设置给body
document.body.style.backgroundImage = 'url('+this.src+')';
最后整体js代码：
<script type="text/javascript">
var box = document.querySelector('div').querySelectorAll('img');
for (var i = 0;i < box.length;i++) {
box[i].onclick = function() {
console.log(this);
document.body.style.backgroundImage = 'url('+this.src+')';
}
}
</script>
码源：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
margin: 50px auto;
width: 500px;
height: 100px;
background-color: white;
display: flex;
justify-content: space-around;
}
div img{
width: 90px;
height: 98px;
}
body{
background: url(img/百度换肤1.jpg) center;
}
</style>
</head>
<body>
<div>
<img src="img/百度换肤1.jpg"/>
<img src="img/百度换肤2.jpg"/>
<img src="img/百度换肤3.jpg"/>
<img src="img/百度换肤4.jpg"/>
<img src="img/百度换肤5.jpg"/>
</div>
<script type="text/javascript">
var box = document.querySelector('div').querySelectorAll('img');
for (var i = 0;i < box.length;i++) {
box[i].onclick = function() {
console.log(this);
document.body.style.backgroundImage = 'url('+this.src+')';
}
}
</script>
</body>
</html>
看完这篇博文后，怎么样？是否你已经迫不及待要试着来敲一下这个效果了。
觉得博主写的不错的，可以关注三连，更多的好玩开发案例每天更新~~
以上是关于一个小时，零基础入门，看完这篇30行代码 教你实现百度换肤！的主要内容，如果未能解决你的问题，请参考以下文章
MySQL零基础从入门到精通，看完这篇直接毕业！（图文并茂，实战教学）
黑客入门教程（非常详细）从零基础入门到精通，看完这一篇就够了