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

Posted 2020-10-13 刘大哈哈

tags:

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

夜间模式的开启与关闭

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

onclick函数调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function mySwitch() {
            var myele=document.getElementById("on_off")
            if(myele.src.match("bulbon")){
                myele.src="http://www.runoob.com/images/pic_bulboff.gif"
                document.getElementById("myBody").style.background="black"
                document.getElementById("demo").style.color="white"
            }
            else {
                myele.src="http://www.runoob.com/images/pic_bulbon.gif"
                document.getElementById("myBody").style.background="white"
                document.getElementById("demo").style.color="black"

            }
        }
    </script>
</head>
<body id="myBody">
<p id="demo"> 你好呀
<img id="on_off" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="50px" >
<script>
    document.write(Date())
    document.getElementById("demo").innerHTML=data();
</script></p>
<button type="button" onclick=window.alert("i")>date</button>
</body>

</html>

父模板的制作

制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。
汇总相关的样式形成独立的css文件。
汇总相关的js代码形成独立的js文件。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base target="_blank">
    <title>杂七杂八网</title>
     <link rel="stylesheet" type="text/css" href="../static/css/text.css">
        <script>
        function mySwitch() {
            var myele=document.getElementById("on_off")
            if(myele.src.match("bulbon")){
                myele.src="http://www.runoob.com/images/pic_bulboff.gif"
                document.getElementById("myBody").style.background="black"
                document.getElementById("demo").style.color="white"
            }
            else {
                myele.src="http://www.runoob.com/images/pic_bulbon.gif"
                document.getElementById("myBody").style.background="white"
                document.getElementById("demo").style.color="black"
            }
        }
    </script>
</head>

<body id="myBody" >
<nav class="aaa">
    <img src="http://p3.so.qhimgs1.com/bdr/_240_/t01b3b860d0555c8393.png"style="height: 40px;width: 45px; ">
    <a href="http://www.iqiyi.com/">官网首页</a>
    <a href="http://www.aiqiyibofangqi.com/">一键下载APP</a>
    <a href="{{ url_for("denglu") }}">用户登录</a>
    <a href="{{ url_for("zhuce") }}">注册</a>
    <input type="text"placeholder="请输入搜索内容">
    <input type="button"value="搜索">
    <img id="on_off" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" style="height: 40px;width: 35px; " >
</nav>
<div id="bottom">
    <a href="">联系我们</a>
    <a href="">加入我们</a>
    <a href="">品牌与徽标</a>
    <a href="">帮助中心</a>
    <a href="">合作伙伴</a>
</div>

</body>
</html>

 #bottom{
     position:fixed;
            bottom:50px;
            left:600px;
}
        #bottom a{
            font-size: 12px;
            color: #828078;
            text-decoration: none;
        }

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

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