1.夜间模式的开启与关闭
a.放置点击的按钮或图片。
b.定义开关切换函数。
c.onclick函数调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>夜晚模式</title>
<script>
function mySwitch(){
var oBody = document.getElementById("myBody");
var oOnOff = document.getElementById("myOnOff");
if(oOnOff.src.match("bulbon")){
oOnOff.src="http://www.runoob.com/images/pic_bulbon.gif";
oBody.style.background="black";
oBody.style.color="white";
}else{
oOnOff.src="http://www.runoob.com/images/pic_bulbon.gif";
oBody.style.background="white";
oBody.style.color="black";
}
}
</script>
</head>
<body id="myBody">
<img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px">
<script>
document.write(Date())
</script>
</body>
</html>
2.父模板的制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>广州商学院</title>
<script>
function mySwitch(){
var oBody = document.getElementById("myBody");
var oOnOff = document.getElementById("myOnOff");
if(oOnOff.src.match("bulbon")){
oOnOff.src="http://www.runoob.com/images/pic_bulbon.gif";
oBody.style.background="black";
oBody.style.color="white";
}else{
oOnOff.src="http://www.runoob.com/images/pic_bulbon.gif";
oBody.style.background="white";
oBody.style.color="black";
}
}
</script>
<link rel="stylesheet" type="text/css" href="../static/css/beryl.css"/>.
<script src="../static/js/beryl.js"></script>
</head>
<body>
<input type="text">
<button>查找</button>
<div class="recommend">
<div class="img">
<a href="http://www.gzcc.cn"><img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"></a>
<div class="img"><a href="http://www.gzcc.cn">校友风采</a></div>
</div>
<div class="desc">
<a href="http://www.gzcc.cn"><img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a>
<div class="desc"><a href="http://www.gzcc.cn">校园风光</a> </div>
</div>
<div class="img">
<a href="http://www.gzcc.cn"><img src="http://oa.gzcc.cn/uploadfile/2017/1031/thumb_685_450_20171031053127116.jpg"></a>
<div class="img"><a href="http://www.gzcc.cn">学生风采</a></div>
</div>
<div class="img">
<a href="http://www.gzcc.cn"><img src="http://oa.gzcc.cn/uploadfile/2017/1031/thumb_685_450_20171031035811173.jpg"></a>
<div class="img"><a href="http://www.gzcc.cn">教师风采</a></div>
</div>
</div>
<div class="clearfloat">
<img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg">
</div>
</body>
<img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px">
<script>
document.write(Date())
</script>
</html>
img {
width: 300px;
}
div .img {
border: 1px solid #ccc;
width: 150px;
float: left;
margin: 5px;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
text-align: center;
padding: 5px;
}
div.clearfloat {
clear: both;
}
原文：http://www.cnblogs.com/BerylF/p/7775426.html