夜间模式的开启与关闭，父模板的制作
Posted 袁华生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了夜间模式的开启与关闭，父模板的制作相关的知识，希望对你有一定的参考价值。
1夜间模式
<!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_bulboff.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>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 倒置的导航栏</title>
<link rel="stylesheet" type="text/css" href="../static/css/lin.css">
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../static/js/daohang.js"></script>
</head>
<body id="mybody">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">首页</a>
</div>
<div>
<ul class="nav navbar-nav">
<li><a href="#" onclick="">登陆</a></li>
<li><a href="#" onclick="">注册</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
设置 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">收藏</a></li>
<li><a href="#">分享</a></li>
<li><a href="#">搜索</a></li>
<li class="divider"></li>
<li><a href="#">点赞</a></li>
</ul>
</li>
<li><a href="#">||</a></li>
</ul>
</div>
<div style="float: left">
<img id="myonoff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" style="width:40px" >
</div>
<div>
<input type="text" name="user" id="user" placeholder="请输入内容">
<input type="button" value="搜索" class="btn btn-success" onclick="">
</div>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<ul class="nav navbar-nav">
<li><img src="http://www.gzcc.cn/2016/images/footer1-logo.png"></li>
<li style="color: bisque;">版权所有@lin</li>
</ul>
</nav>
<script>
document.write(Date())
</script>
<div>
<div class="sa">
<a href="http://desk.zol.com.cn/"><img
src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/0F/06/ChMkJlfI162IeK07AAY_egKaTWoAAU6qQHhDUcABj-S342.jpg"></a>
<div class="st"><a href="http://desk.zol.com.cn/">爱宠大机密1</a></div>
</div>
<div class="sa">
<a href="http://desk.zol.com.cn/"><img
src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/0F/06/ChMkJlfI17KIHB_fAAMRJQRdoxQAAU6qQIhsoEAAxE9307.jpg"></a>
<div class="st"><a href="http://desk.zol.com.cn/">爱宠大机密2</a></div>
</div>
<div class="sa">
<a href="http://desk.zol.com.cn/"><img
src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/0F/06/ChMkJlfI15yIFHF8AANwCMns-CoAAU6qQFNDZMAA3Ag386.jpg"></a>
<div class="st"><a href="http://desk.zol.com.cn/">爱宠大机密3</a></div>
</div>
<div class="sa">
<a href="http://desk.zol.com.cn/"><img
src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/0F/06/ChMkJ1fI18uIPl4SAAH7nIUWw9wAAU6qQKoXZ4AAfu0026.jpg"></a>
<div class="st"><a href="http://desk.zol.com.cn/">爱宠大机密4</a></div>
</div>
</div>
</body>
</html>
js代码
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_bulboff.gif";
oBody.style.background = "black";
oBody.style.color = "yellow"
} else {
oOnoff.src = "http://www.runoob.com/images/pic_bulbon.gif";
oBody.style.background = "white";
oBody.style.color = "black"
}
}
// match()
以上是关于夜间模式的开启与关闭，父模板的制作的主要内容，如果未能解决你的问题，请参考以下文章