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

Posted 2020-10-13 076陈良舒

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了夜间模式的开启与关闭，父模板的制作相关的知识，希望对你有一定的参考价值。

1.夜间模式的开启与关闭

放置点击的按钮或图片。
定义开关切换函数。
onclick函数调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>夜晚模式</title>
    <h4>*护眼模式展示*</h4>
    <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. 父模板的制作

制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。

汇总相关的样式形成独立的css文件。

汇总相关的js代码形成独立的js文件。

<!DOCTYPE html>
<html lang="en" xmlns:color="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>首页</title>

    <script src="../static/js/light.js"></script>
    <link href="../static/css/base.css" rel="stylesheet" type="text/css">



</head>

<body id="myBody">
<nav class="body">
    <div style="background-color: antiquewhite">
        <a href="{{ url_for(\'base\') }}">首页</a>
        <a href="">下载APP</a>
        <input id="search" type="text" name="search" placeholder="请输入搜索内容：">
        <button id="play" type="submit">查找</button>

        <a class="login" href="{{ url_for(\'login\') }}">登录</a>
        <a class="register" href="{{ url_for(\'register\') }}">注册</a>
        <img id="myOn_Off" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif"  width="50" height="50">
    </div>
          <br>
</nav>
<div class="logo">
          </div>
    <div class="img">
        <a href="http://image.so.com/i?q=%E6%91%84%E5%BD%B1%E4%BD%9C%E5%93%81&src=srp">
            <img src="http://pic1.win4000.com/wallpaper/b/50a06956560a6.jpg"></a>
        <div class="describe"><a href="https://baike.so.com/doc/394320-417527.html">摄影风采</a></div>
    </div>
    <div class="img">
        <a href="https://baike.so.com/doc/23793629-24349761.html">
            <img src="http://pic.87g.com/upload/2016/0902/20160902045804519.jpg"></a>
        <div class="describe"><a href="https://baike.so.com/doc/23793629-24349761.html">游戏动漫</a></div>
    </div>
    <div class="img">
        <a href="https://baike.so.com/doc/23793629-24349761.html">
            <img src="http://pic.qiantucdn.com/58pic/19/20/21/5684847e347a6_1024.jpg"></a>
        <div class="describe"><a href="https://baike.so.com/doc/23793629-24349761.html">美味美食</a></div>
    </div>
    <div class="img">
        <a href="http://image.so.com/i?q=%E6%97%85%E6%B8%B8%E9%A3%8E%E6%99%AF%E5%9B%BE%E7%89%87&src=srp">
            <img src="http://pic.58pic.com/58pic/13/87/72/73t58PICjpT_1024.jpg"></a>
        <div class="describe"><a href="http://image.so.com/i?q=%E6%97%85%E6%B8%B8%E9%A3%8E%E6%99%AF%E5%9B%BE%E7%89%87&src=srp">旅游风景</a></div>
</div>
    <div class="clean">
       <img src="http://pic1.win4000.com/wallpaper/b/50a06956560a6.jpg">
       <img src="http://pic.87g.com/upload/2016/0902/20160902045804519.jpg">
       <img src="http://pic.qiantucdn.com/58pic/19/20/21/5684847e347a6_1024.jpg">
       <img src="http://pic.58pic.com/58pic/13/87/72/73t58PICjpT_1024.jpg">
</div>

    </div>
    <footer>
        <div class="footer_box">
            Copyright@2013-14-520 个人版权，版权所有  telephone:520520 mobile phone:666
        </div>
    </footer>
</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="white";
            }else{
                oOnoff.src="http://www.runoob.com/images/pic_bulbon.gif";
                oBody.style.background="white";
                oBody.style.color="black";
            }
        }

css:

img{
    width: 220px;
}
div.img{
    border: 1px solid #8b7b47;
    width: 220px;
    float:left;
    margin: 10px;
}
div.img img{
    width: 180px;
    height: 180px;
    font-size: 22px;
    display: block;
    margin-left: 22px;
    margin-right: 22px;
}
div.desc{
    text-align: center;
    padding: 5px;
}
div.img:hover{
    border:1px solid #89ff3b;
}
.clean{
    clear: both;
    float: left;
}


.body {
    font-size: 30px;
    display: block;
    margin-left: 20px;
    margin-right: 20px;

}
.wrink {
    font-size: 30px;
    display: block;
    margin-left: 20px;
    margin-right: 20px;
}
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}
footer .footer_box {
    background-color: #ff4f54;
    padding: 10px;
    color: #FFFFFF;
    text-align: center;
}

形成完整的base.html+css+js

以上是关于夜间模式的开启与关闭，父模板的制作的主要内容，如果未能解决你的问题，请参考以下文章

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