<!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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>base</title>
<link rel="stylesheet" type="text/css" href="../static/css/moban.css">
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="../static/js/moban.js"></script>
</head>
<body id="mybody">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid" id="container">
<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: right">
<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>
img {
width: 200px;
}
#container {
background: lightsteelblue;
}
div.sa {
border-style: solid;
border-width: 5px;
border-color: gold;
width: 400px;
float: left;
margin: 5px;
}
div.sa img {
width: 80%;
heigh: aute;
}
div.st {
text-align: center;
padding: 2px;
}
div.sa:hover {
border-style: solid;
border-width: 5px;
border-color: green;
}
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 = "green"
} else {
oOnoff.src = "http://www.runoob.com/images/pic_bulbon.gif";
oBody.style.background = "white";
oBody.style.color = "black"
}
}
原文：http://www.cnblogs.com/lhw1997/p/7784640.html