夜间模式的开启与关闭，父模板的制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>夜晚模式</title>
    <script>
        function mySwich() {
            var oBody = document.getElementById("myBody");
            var oOnoff = document.getElementById("myOnoff");
            if (oOnoff.src.match("1509")){
                oOnoff.src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=150";
                oBody.style.background="black";
                oBody.style.color="green";

            }else {
                oOnoff.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509";
                oBody.style.background="white";
                oBody.style.color="pink";
            }
        }
    </script>
</head>
<body id="myBody">

<img id="myOnoff" onclick="mySwich()" src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=150" width="60px">
<script>
    document.write(Date())
</script>
</body>
</html>

　　—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>base</title>
    <link rel="stylesheet" href="../static/css/base.css" type="text/css">
    <script src="../static/js/base.js"></script>

</head>
<body id="myBody">
<nav>

    <img id="myOnOff" onclick="mySwitch()"
         src="http://pic.58pic.com/58pic/12/38/64/52Y58PICFWV.jpg" width="100"height="50">
    <a href="http://www.narutom.com/video/">首页</a>
    <input type="text">
    <button>查找</button>
</nav>
<div class="area">

</div>


<div class="area1">
    <div class="img">
        <a href="https://baike.baidu.com/item/%E6%BC%A9%E6%B6%A1%E9%B8%A3%E4%BA%BA/322717?fr=aladdin"><img
                src="http://img3.imgtn.bdimg.com/it/u=1024789900,1375050730&fm=214&gp=0.jpg"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E6%BC%A9%E6%B6%A1%E9%B8%A3%E4%BA%BA/322717?fr=aladdin">漩涡鸣人</a></div>
    </div>
    <div class="img">
        <a href="https://baike.baidu.com/item/%E5%AE%87%E6%99%BA%E6%B3%A2%E4%BD%90%E5%8A%A9">
            <img src="http://dl.bizhi.sogou.com/images/2012/04/17/232306.jpg"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E5%AE%87%E6%99%BA%E6%B3%A2%E4%BD%90%E5%8A%A9">宇智波佐助</a></div>
    </div>
    <div class="img">
        <a href="https://baike.baidu.com/item/%E8%87%AA%E6%9D%A5%E4%B9%9F/7041?fr=aladdin">
            <img src="http://img3.imgtn.bdimg.com/it/u=3803389959,1787876432&fm=214&gp=0.jpg"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E8%87%AA%E6%9D%A5%E4%B9%9F/7041?fr=aladdin">自来也</a>
        </div>
    </div>
</div>

<br>
<br>

</body>
</html>

.img {
    border: 1px solid #cccccc;
     300px;
    margin: 5px;
    float: left;

}

div.img img {
     100%;
    height: auto;
}

div.desc {
    text-align: center;
    padding: 5px;
}

div.img:hover {
    border: 1px solid #000000;
}

.area {
    height: 100px;
}


.area1 {
    height: 180px;
}

function mySwitch() {
    var oBody = document.getElementById("myBody");
    var oOnoff = document.getElementById("myOnOff");
    if (oOnoff.src.match(1606497334)) {
        oOnoff.src = "http://pic.58pic.com/58pic/12/38/64/52Y58PICFWV.jpg";
        oBody.style.background = "black";
        oBody.style.color = "yellow";
    } else {
        oOnoff.src = "http://wenwen.soso.com/p/20101019/20101019113210-1606497334.jpg";
        oBody.style.background = "white";
        oBody.style.color = "black";
    }


}