夜光带你走进 前端工程师（二十四 jS ）
夜光序言：
只愿与雪般轻盈飘扬的潇洒，
待光华微绽我退场绝不拖沓。
正文：
jS 百度换肤效果：
入口函数
Window.onload=function(){
内部放置JS
}
这个函数的意思就是说：当我们页面加载完毕之后，采取执行函数体里面的JS部分
所以，这句话也可以放在页面的顶端即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0 ; padding: 0}
body{
background: url("3.jpg" ) top center ;
}
.box{
height:1500px;
background: rgba(255,255,255,.3);
text-align: center;
padding-top: 50px;
}
.box img{
cursor: pointer; /* //小手的形状 */
}
</style>
</head>
<body>
<div class="box">
<img src="5.jpg" width="100px">
<img src="3.jpg" width="100px">
<img src="4.jpg" width="100px">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0 ; padding: 0}
body{
background: url("3.jpg" ) top center ;
}
.box{
height:1500px;
background: rgba(255,255,255,.3);
text-align: center;
padding-top: 50px;
}
.box img{
cursor: pointer; /* //小手的形状 */
}
</style>
<script>
window.onload=function(){
//要做事先找人 找事件源 JS精华
var pic1=document.getElementById("pic1"); //运用ID
var pic2=document.getElementById("pic2"); //运用ID
var pic3=document.getElementById("pic3"); //运用ID
pic1.onclick=function(){
document.body.style.backgroundImage= "url(3.jpg )";
};
pic2.onclick=function(){
document.body.style.backgroundImage="url(5.jpg)";
};
pic3.onclick=function(){
document.body.style.backgroundImage="url(4.jpg)"; //这是关键 ，点击换肤
}
}
</script>
</head>
<body>
<div class="box">
<img src="3.jpg" alt="" width="100px" id="pic1"/>
<img src="5.jpg" alt="" width="100px" id="pic2"/>
<img src="4.jpg" alt="" width="100px" id="pic3"/>
</div>
</body>
</html>
//通过JS id这个属性来实现换页面皮肤
//实现了点击换肤这种操作，帅气
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0 ; padding: 0}
body{
background: url("3.jpg" ) top center ;
}
.box{
height:1500px;
background: rgba(255,255,255,.3);
text-align: center;
padding-top: 50px;
}
.box img{
cursor: pointer; /* //小手的形状 */
}
p{
text-align: center;
font-size: 60px;
font-family: 隶书;
}
</style>
<script>
window.onload=function(){
//要做事先找人 找事件源 JS精华
var pic1=document.getElementById("pic1");
var pic2=document.getElementById("pic2");
var pic3=document.getElementById("pic3");
pic1.onclick=function(){
document.body.style.backgroundImage= "url(3.jpg )";
};
pic2.onclick=function(){
document.body.style.backgroundImage="url(5.jpg)";
};
pic3.onclick=function(){
document.body.style.backgroundImage="url(4.jpg)";
}
}
</script>
</head>
<body>
<p>三种页面皮肤 夜光【贺钰】设计</p>
<div class="box">
<img src="3.jpg" alt="" width="100px" id="pic1"/>
<img src="5.jpg" alt="" width="100px" id="pic2"/>
<img src="4.jpg" alt="" width="100px" id="pic3"/>
</div>
</body>
</html>