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

Posted 2020-10-13 ..L

tags:

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

夜间模式的开启与关闭

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




<!DOCTYPE html>
<html lang="en" xmlns:color="http://www.w3.rog/1999/xhtml">
<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("myBody").style.color="white"
            }
            else
            {
                myele.src="http://www.runoob.com/images/pic_bulbon.gif"
                document.getElementById("myBody").style.background="white"
                document.getElementById("myBody").style.color="black"
            }
        }
    </script>
</head>
<body id="myBody">
<img id="on_off" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="50px">


    <script>
    document.write(Date())

</script>


</body>
</html>

父模板的制作

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<body>
<nav>
    <img src="https://p1.pstatp.com/origin/39a00003fc004e34ec7d" width="50" height="50" >
    <input type="text">
    <button type="submit">搜索</button>
    <a href="{{ url_for(\'base\') }}">首页</a>
    <a href="http://127.0.0.1:5000/ll">登录</a>
    <a href="{{ url_for(\'zc\') }}">注册</a>


</nav>
</body>
</html>

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

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