夜間模式的開啓與關閉，父模板的製做

時間 2019-11-10

原文原文鏈接

夜間模式的開啓與關閉
1. 放置點擊的按鈕或圖片。
2. 定義開關切換函數。
3. onclick函數調用。
父模板的製做
1. 製做網站網頁共有元素的父模板html，包括頂部導航，中間區塊劃分，底部導航，底部說明等。
2. 彙總相關的樣式造成獨立的css文件。
3. 彙總相關的js代碼造成獨立的js文件。
4. 造成完整的base.html+css+js

htmlcss

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>夜間模式</title>
    <link rel="stylesheet" type="text/css" href="../static/css/switch.css">
    <script src ="../static/js/switch.js"></script>
    <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>
</head>
<body id="myBody">

<h2>Night</h2>

<nav>
    <img id="myOnOff" onclick="mySwitch()"
         src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1241908247,1796600239&fm=200&gp=0.jpg" width="50px">
    <script>
        document.write(Date())
    </script>
<ul class="nav nav-pills">
    <li class="active"><a href="http://localhost:63342/20171102/templates/base.html?_ijt=o1hdmoofeia6snqa8m8effsoo4#">首頁</a></li>
    <li><a href="https://baike.baidu.com/item/%E4%BA%94%E6%9C%88%E5%A4%A9/17011?fr=aladdin">百度百科</a></li>
    <li><a href="http://v.baidu.com/person_intro/?id=158809&video_uri=person_card">參加綜藝</a></li>
    <li><a href="http://www.1905.com/mdb/star/224">電影做品</a></li>
    <li><a href="http://www.xiami.com/artist/3110">音樂做品</a></li>
    <li><a href="http://tieba.baidu.com/f?kw=%CE%E5%D4%C2%CC%EC&fr=ala0&loc=rec">貼吧</a></li>
</ul>

</nav>
<div class="area">
</div>

<div class="wuyuetian">
    <div class="img">
        <a href="http://tieba.baidu.com/p/1479820595"><img
                src="http://imgsrc.baidu.com/forum/w%3D580/sign=981b43943a292df597c3ac1d8c305ce2/4af8d72a6059252dd8df9bbf349b033b5ab5b946.jpg"></a>
        <div class="desc"><a href="http://tieba.baidu.com/p/1479820595">阿信 </a></div>
    </div>

    <div class="img">
        <a href="http://tieba.baidu.com/p/1479820595"><img
                src="http://imgsrc.baidu.com/forum/w%3D580/sign=e06f694f51da81cb4ee683c56267d0a4/3c50f3deb48f8c54d9ef44943a292df5e0fe7f4a.jpg"></a>
        <div class="desc"><a href="http://tieba.baidu.com/p/1479820595">石頭</a></div>
    </div>

    <div class="img">
        <a href="http://tieba.baidu.com/p/1479820595"><img
                src="http://imgsrc.baidu.com/forum/w%3D580/sign=5fb4fe662e738bd4c421b239918a876c/2a13c8fcc3cec3fd790326ced688d43f87942749.jpg"></a>
        <div class="desc"><a href="http://tieba.baidu.com/p/1479820595">怪獸</a></div>
    </div>

   <div class="img">
        <a href="http://tieba.baidu.com/p/1479820595"><img
                src="http://imgsrc.baidu.com/forum/w%3D580/sign=a58b1295a8d3fd1f3609a232004f25ce/022297dda144ad347e82063cd0a20cf431ad8549.jpg"></a>
        <div class="desc"><a href="http://tieba.baidu.com/p/1479820595">瑪莎</a></div>
    </div>
   <div class="img">
        <a href="http://tieba.baidu.com/p/1479820595"><img
                src="http://imgsrc.baidu.com/forum/w%3D580/sign=d5da0ab39b504fc2a25fb00dd5dce7f0/9af690529822720ef60764417bcb0a46f31fab46.jpg"></a>
        <div class="desc"><a href="http://tieba.baidu.com/p/1479820595">丸尾 </a></div>
    </div>





</body>
</html>

　　jshtml

function mySwitch() {
    var oBody = document.getElementById("myBody");
    var oOnoff = document.getElementById("myOnOff");
    if (oOnoff.src.match("100x100")){
        oOnoff.src = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1241908247,1796600239&fm=200&gp=0.jpg"
        oBody.style.background = "black";
        oBody.style.color ="white";
    }else {
        oOnoff.src = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3952690403,2307372256&fm=200&gp=0.jpg"
        oBody.style.background ="white";
        oBody.style.color ="black";
    }

　　cssjquery

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

}

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

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

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

.area {
    height: 300px;
}


.wuyuetian {
    height: 180px;
}

h2{
    color: red;
    font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
}