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

夜间模式的开启与关闭

  1. 放置点击的按钮或图片。
  2. 定义开关切换函数。
  3. 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("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>

  

父模板的制作

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

py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def fu():
    return render_template('fu.html')

@app.route('/test/')
def test():
    return 'test'

@app.route('/login/')
def login():
    return render_template('login.html')

@app.route('/regist/')
def regist():
    return render_template('regist.html')

if __name__ == '__main__':
    app.run(debug=True)

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
  <link href="../static/fu.css" rel="stylesheet" type="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("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">
<input type="text" name="search">
<button type="submit">搜索</button>

<a href="http://127.0.0.1:5000/">首页</a>
<a href="http://127.0.0.1:5000/login">登录</a>
<a href="http://127.0.0.1:5000/regist">注册</a>


<h1>首页</h1>

<hr>
<a id="a">常见问题 / </a><a class="textblue">联系我们 / </a><a>用户意见 / </a><a>@create by haili</a>
</body>

</html>

 

posted @ 2017-11-04 21:50  李海力学编程  阅读(251)  评论(0)    收藏  举报