<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 百度换肤 </title>
<style>
html,
body,
div {
margin: 0;
padding: 0;
}
body {
width: 100%;
background: url(../images/01.jpg);
}
.back {
width: 100%;
height: 200px;
background: rgba(228, 168, 168, 0.3);
text-align: center;
}
.back img {
height: 200px;
}
</style>
</head>
<body>
<div class="back">
<a href="../images/01.jpg">
<img src="../images/01.jpg" alt="">
</a>
<a href="../images/02.jpg">
<img src="../images/02.jpg" alt="">
</a>
<a href="../images/03.jpg">
<img src="../images/03.jpg" alt="">
</a>
<a href="../images/04.jpg">
<img src="../images/04.jpg" alt="">
</a>
</div>
<script>
// 页面刚刚打开的时候
// 如果是第一次访问这个网站，肯定没有这个记录，那么会得到null
var url = localStorage.getItem('url');
if (url) {
//赋值给body
document.body.style.background = "url(" + url + ")";
}
//先找到所有a标签
var aList = document.getElementsByTagName('a');
// 遍历每个a，给它们加点击事件
for (var i = 0; i < aList.length; i++) {
aList[i].onclick = function () {
// 给body的背景图片
document.body.style.background = "url(" + this.href + ")";
// 把图片路径保存到localStorage
localStorage.setItem('url', this.href);
return false;
}
}
</script>
</body>
</html>
网友评论