倒数计时器，如何使用 HTML 更新 Python Flask 中的变量？

【问题标题】：Countdown timer, how to update variable in Python Flask with HTML?倒数计时器，如何使用 HTML 更新 Python Flask 中的变量？
【发布时间】：2022-01-31 02:06:20
【问题描述】：

一般来说，我是编码新手，我的老师告诉我们用物理 LED 制作倒数计时器，并使用网络服务器（烧瓶）作为虚拟按钮。我想显示计时器的当前时间，但我似乎无法使用 LED 进行当前时间倒计时，因为它试图在更新之前完成 LED 代码。每次点击都会更新，计数工作... 这是我的烧瓶代码：

import RPi.GPIO as GPIO
import time
from flask import Flask, render_template, request

app = Flask(__name__)

GPIO.setmode (GPIO.BCM)
GPIO.setup(5, GPIO.OUT)
GPIO.setup(6, GPIO.OUT)
GPIO.setup(13, GPIO.OUT)
GPIO.setup(19, GPIO.OUT)
GPIO.setup(26, GPIO.OUT)


intRepeat = 0
intCount = 0


@app.route('/')
def index():
    templateData = {
        'intCount' : intCount
    }
    return render_template('index3.html', **templateData)
    
@app.route('/up/')
def up():
    global intCount 
    intCount = intCount + 1
    if intCount == 1:
        GPIO.output(5, GPIO.HIGH)
    elif intCount == 2:
        GPIO.output(6, GPIO.HIGH)
        GPIO.output(5, GPIO.LOW)
    elif intCount == 3:
        GPIO.output(5, GPIO.HIGH)
    elif intCount == 4:
        GPIO.output(5, GPIO.LOW)
        GPIO.output(6, GPIO.LOW)
        GPIO.output(13, GPIO.HIGH)
    elif intCount == 5:
        GPIO.output(5, GPIO.HIGH)
    elif intCount == 6: 
        GPIO.output(5, GPIO.LOW)
        GPIO.output(6, GPIO.HIGH)
    elif intCount == 7:
        GPIO.output(5, GPIO.HIGH)
    elif intCount == 8: 
        GPIO.output(5, GPIO.LOW)
        GPIO.output(6, GPIO.LOW)
        GPIO.output(13, GPIO.LOW)
        GPIO.output(19, GPIO.HIGH)
    elif intCount == 9: 
        GPIO.output(5, GPIO.HIGH)
    elif intCount == 10:
        GPIO.output(5, GPIO.LOW)
        GPIO.output(6, GPIO.HIGH)
    elif intCount == 11:
        GPIO.output(5, GPIO.HIGH)
    elif intCount == 12:
        GPIO.output(5, GPIO.LOW)
        GPIO.output(6, GPIO.LOW)
        GPIO.output(13, GPIO.HIGH)
    elif intCount == 13: 
        GPIO.output(5, GPIO.HIGH)
    elif intCount == 14:
        GPIO.output(5, GPIO.LOW)
        GPIO.output(6, GPIO.HIGH)
    elif intCount == 15:
        GPIO.output(5, GPIO.HIGH)
    elif intCount == 16:
        GPIO.output(5, GPIO.LOW)
        GPIO.output(6, GPIO.LOW)
        GPIO.output(13, GPIO.LOW)
        GPIO.output(19, GPIO.LOW)
        GPIO.output(26, GPIO.HIGH)
    elif intCount == 17: 
        GPIO.output(5, GPIO.HIGH)
    elif intCount == 18:
        GPIO.output(5, GPIO.LOW)
        GPIO.output(6, GPIO.HIGH)
    elif intCount == 19:
        GPIO.output(5, GPIO.HIGH)
    elif intCount == 20:
        GPIO.output(5, GPIO.LOW)
        GPIO.output(6, GPIO.LOW)
        GPIO.output(13, GPIO.HIGH)
    elif intCount == 21:
        GPIO.output(5, GPIO.HIGH)
    elif intCount == 22:
        GPIO.output(5, GPIO.LOW)
        GPIO.output(6, GPIO.HIGH)
    elif intCount == 23:
        GPIO.output(5, GPIO.HIGH)
    elif intCount == 24:
        GPIO.output(5, GPIO.LOW)
        GPIO.output(6, GPIO.LOW)
        GPIO.output(13, GPIO.LOW)
        GPIO.output(19, GPIO.HIGH)
    elif intCount == 25: 
        GPIO.output(5, GPIO.HIGH)
    elif intCount == 26:
        GPIO.output(5, GPIO.LOW)
        GPIO.output(6, GPIO.HIGH)
    elif intCount == 27:
        GPIO.output(5, GPIO.HIGH)
    elif intCount == 28:
        GPIO.output(5, GPIO.LOW)
        GPIO.output(6, GPIO.LOW)
        GPIO.output(13, GPIO.HIGH)
    elif intCount == 29:
        GPIO.output(5, GPIO.HIGH)
    elif intCount == 30:
        GPIO.output(5, GPIO.LOW)
        GPIO.output(6, GPIO.HIGH)
    elif intCount == 31:
        GPIO.output(5, GPIO.HIGH)
    elif intCount == 32:
        intCount = intCount - 1
    templateData = {
        'intCount' : intCount
    }
    return render_template('index3.html', **templateData)
    
@app.route('/down/')
def down():
    global intCount
    while(intCount > 0):
        intCount = intCount - 1
        time.sleep(1) 
        if  intCount == 31:
            GPIO.output(5, GPIO.HIGH)
            GPIO.output(6, GPIO.HIGH)
            GPIO.output(13, GPIO.HIGH)
            GPIO.output(19, GPIO.HIGH)
            GPIO.output(26, GPIO.HIGH)
        elif intCount == 30:
            GPIO.output(5, GPIO.LOW)
            GPIO.output(6, GPIO.HIGH)
            GPIO.output(13, GPIO.HIGH)
            GPIO.output(19, GPIO.HIGH)
            GPIO.output(26, GPIO.HIGH)
        elif intCount == 29:
            GPIO.output(5, GPIO.HIGH)
            GPIO.output(6, GPIO.LOW)
            GPIO.output(13, GPIO.HIGH)
            GPIO.output(19, GPIO.HIGH)
            GPIO.output(26, GPIO.HIGH)
        elif intCount == 28:
            GPIO.output(5, GPIO.LOW)
            GPIO.output(6, GPIO.LOW)
            GPIO.output(13, GPIO.HIGH)
            GPIO.output(19, GPIO.HIGH)
            GPIO.output(26, GPIO.HIGH)
        elif intCount == 27:
            GPIO.output(5, GPIO.HIGH)
            GPIO.output(6, GPIO.HIGH)
            GPIO.output(13, GPIO.LOW)
            GPIO.output(19, GPIO.HIGH)
            GPIO.output(26, GPIO.HIGH)
        elif intCount == 26:
            GPIO.output(5, GPIO.LOW)
            GPIO.output(6, GPIO.HIGH)
            GPIO.output(13, GPIO.LOW)
            GPIO.output(19, GPIO.HIGH)
            GPIO.output(26, GPIO.HIGH)
        elif intCount == 25:
            GPIO.output(5, GPIO.HIGH)
            GPIO.output(6, GPIO.LOW)
            GPIO.output(13, GPIO.LOW)
            GPIO.output(19, GPIO.HIGH)
            GPIO.output(26, GPIO.HIGH)
        elif intCount == 24:
            GPIO.output(5, GPIO.LOW)
            GPIO.output(6, GPIO.LOW)
            GPIO.output(13, GPIO.LOW)
            GPIO.output(19, GPIO.HIGH)
            GPIO.output(26, GPIO.HIGH)
        elif intCount == 23:
            GPIO.output(5, GPIO.HIGH)
            GPIO.output(6, GPIO.HIGH)
            GPIO.output(13, GPIO.HIGH)
            GPIO.output(19, GPIO.LOW)
            GPIO.output(26, GPIO.HIGH)
        elif intCount == 22:
            GPIO.output(5, GPIO.LOW)
            GPIO.output(6, GPIO.HIGH)
            GPIO.output(13, GPIO.HIGH)
            GPIO.output(19, GPIO.LOW)
            GPIO.output(26, GPIO.HIGH)
        elif intCount == 21:
            GPIO.output(5, GPIO.HIGH)
            GPIO.output(6, GPIO.LOW)
            GPIO.output(13, GPIO.HIGH)
            GPIO.output(19, GPIO.LOW)
            GPIO.output(26, GPIO.HIGH)
        elif intCount == 20:
            GPIO.output(5, GPIO.LOW)
            GPIO.output(6, GPIO.LOW)
            GPIO.output(13, GPIO.HIGH)
            GPIO.output(19, GPIO.LOW)
            GPIO.output(26, GPIO.HIGH)
        elif intCount == 19:
            GPIO.output(5, GPIO.HIGH)
            GPIO.output(6, GPIO.HIGH)
            GPIO.output(13, GPIO.LOW)
            GPIO.output(19, GPIO.LOW)
            GPIO.output(26, GPIO.HIGH)
        elif intCount == 18:
            GPIO.output(5, GPIO.LOW)
            GPIO.output(6, GPIO.HIGH)
            GPIO.output(13, GPIO.LOW)
            GPIO.output(19, GPIO.LOW)
            GPIO.output(26, GPIO.HIGH)
        elif intCount == 17:
            GPIO.output(5, GPIO.HIGH)
            GPIO.output(6, GPIO.LOW)
            GPIO.output(13, GPIO.LOW)
            GPIO.output(19, GPIO.LOW)
            GPIO.output(26, GPIO.HIGH)
        elif intCount == 16:
            GPIO.output(5, GPIO.LOW)
            GPIO.output(6, GPIO.LOW)
            GPIO.output(13, GPIO.LOW)
            GPIO.output(19, GPIO.LOW)
            GPIO.output(26, GPIO.HIGH)
        elif intCount == 15:
            GPIO.output(5, GPIO.HIGH)
            GPIO.output(6, GPIO.HIGH)
            GPIO.output(13, GPIO.HIGH)
            GPIO.output(19, GPIO.HIGH)
            GPIO.output(26, GPIO.LOW)
        elif intCount == 14:
            GPIO.output(5, GPIO.LOW)
            GPIO.output(6, GPIO.HIGH)
            GPIO.output(13, GPIO.HIGH)
            GPIO.output(19, GPIO.HIGH)
            GPIO.output(26, GPIO.LOW)
        elif intCount == 13:
            GPIO.output(5, GPIO.HIGH)
            GPIO.output(6, GPIO.LOW)
            GPIO.output(13, GPIO.HIGH)
            GPIO.output(19, GPIO.HIGH)
            GPIO.output(26, GPIO.LOW)
        elif intCount == 12:
            GPIO.output(5, GPIO.LOW)
            GPIO.output(6, GPIO.LOW)
            GPIO.output(13, GPIO.HIGH)
            GPIO.output(19, GPIO.HIGH)
            GPIO.output(26, GPIO.LOW)
        elif intCount == 11:
            GPIO.output(5, GPIO.HIGH)
            GPIO.output(6, GPIO.HIGH)
            GPIO.output(13, GPIO.LOW)
            GPIO.output(19, GPIO.HIGH)
            GPIO.output(26, GPIO.LOW)
        elif intCount == 10:
            GPIO.output(5, GPIO.LOW)
            GPIO.output(6, GPIO.HIGH)
            GPIO.output(13, GPIO.LOW)
            GPIO.output(19, GPIO.HIGH)
            GPIO.output(26, GPIO.LOW)
        elif intCount == 9:
            GPIO.output(5, GPIO.HIGH)
            GPIO.output(6, GPIO.LOW)
            GPIO.output(13, GPIO.LOW)
            GPIO.output(19, GPIO.HIGH)
            GPIO.output(26, GPIO.LOW)
        elif intCount == 8:
            GPIO.output(5, GPIO.LOW)
            GPIO.output(6, GPIO.LOW)
            GPIO.output(13, GPIO.LOW)
            GPIO.output(19, GPIO.HIGH)
            GPIO.output(26, GPIO.LOW)
        elif intCount == 7:
            GPIO.output(5, GPIO.HIGH)
            GPIO.output(6, GPIO.HIGH)
            GPIO.output(13, GPIO.HIGH)
            GPIO.output(19, GPIO.LOW)
            GPIO.output(26, GPIO.LOW)
        elif intCount == 6:
            GPIO.output(5, GPIO.LOW)
            GPIO.output(6, GPIO.HIGH)
            GPIO.output(13, GPIO.HIGH)
            GPIO.output(19, GPIO.LOW)
            GPIO.output(26, GPIO.LOW)
        elif intCount == 5:
            GPIO.output(5, GPIO.HIGH)
            GPIO.output(6, GPIO.LOW)
            GPIO.output(13, GPIO.HIGH)
            GPIO.output(19, GPIO.LOW)
            GPIO.output(26, GPIO.LOW)
        elif intCount == 4:
            GPIO.output(5, GPIO.LOW)
            GPIO.output(6, GPIO.LOW)
            GPIO.output(13, GPIO.HIGH)
            GPIO.output(19, GPIO.LOW)
            GPIO.output(26, GPIO.LOW)
        elif intCount == 3:
            GPIO.output(5, GPIO.HIGH)
            GPIO.output(6, GPIO.HIGH)
            GPIO.output(13, GPIO.LOW)
            GPIO.output(19, GPIO.LOW)
            GPIO.output(26, GPIO.LOW)
        elif intCount == 2:
            GPIO.output(5, GPIO.LOW)
            GPIO.output(6, GPIO.HIGH)
            GPIO.output(13, GPIO.LOW)
            GPIO.output(19, GPIO.LOW)
            GPIO.output(26, GPIO.LOW)
        elif intCount == 1:
            GPIO.output(5, GPIO.HIGH)
            GPIO.output(6, GPIO.LOW)
            GPIO.output(13, GPIO.LOW)
            GPIO.output(19, GPIO.LOW)
            GPIO.output(26, GPIO.LOW)
        elif intCount == 0:
            GPIO.output(5, GPIO.LOW)
            GPIO.output(6, GPIO.LOW)
            GPIO.output(13, GPIO.LOW)
            GPIO.output(19, GPIO.LOW)
            GPIO.output(26, GPIO.LOW)
    #loop for repeated flashing
    global intRepeat
    while(intRepeat <= 5) and (intCount == 0):
        intRepeat = intRepeat + 1
        time.sleep(0.4)
        GPIO.output(5, GPIO.HIGH)
        GPIO.output(6, GPIO.LOW)
        GPIO.output(13, GPIO.HIGH)
        GPIO.output(19, GPIO.LOW)
        GPIO.output(26, GPIO.HIGH)
        time.sleep(0.4)
        GPIO.output(5, GPIO.LOW)
        GPIO.output(6, GPIO.HIGH)
        GPIO.output(13, GPIO.LOW)
        GPIO.output(19, GPIO.HIGH)
        GPIO.output(26, GPIO.LOW)
    GPIO.output(5, GPIO.LOW)
    GPIO.output(6, GPIO.LOW)
    GPIO.output(13, GPIO.LOW)
    GPIO.output(19, GPIO.LOW)
    GPIO.output(26, GPIO.LOW)
    intRepeat = 0
    templateData = {
    'intCount' : intCount
    }
    return render_template('index3.html', **templateData)


@app.route('/reset/')
def reset():
    global intCount
    intCount = 0
    GPIO.output(5, GPIO.LOW)
    GPIO.output(6, GPIO.LOW)
    GPIO.output(13, GPIO.LOW)
    GPIO.output(19, GPIO.LOW)
    GPIO.output(26, GPIO.LOW)
    templateData = {
    'intCount' : intCount
    }
    return render_template('index3.html', **templateData)


if __name__ == '__main__':
    app.run(debug=True, port=777, host='0.0.0.0')

这是我的 HTML 索引模板

<!DOCTYPE html>
    <body>

        <h1>CountDown Timer 1.0<h1>
        <p>Current time: {{ intCount }}</p>
        <p>
        <form action="/up/">
            <input type="submit" style="height:200px;width:200px" value="Count Up" />
        </form>
        </p>
        <p>
        <form action="/down/">
            <input type="submit" style="height:200px;width:200px" value="Start!" />
        </form>
        </p>
        <p>
        <form action="/reset/">
            <input type="submit" style="height:200px;width:200px" value="Reset/Stop" />
        </form>
        </p>
    </body>
</html>

我看过其他使用 AJAX 的帖子，但我不知道该怎么做

PS 我知道二进制 LED 倒计时效率低下，但这会...

【问题讨论】：

    标签： python html flask timer countdown


    【解决方案1】：

    好的，首先，欢迎来到编程世界！

    这个问题的解决方案并不难，另一篇说使用 AJAX 的帖子是 100% 正确的，所以我做了一些可以帮助你的实现。

    index3.html 文件：

    <!DOCTYPE html>
<body>

    <h1>CountDown Timer 1.0<h1>
    <p id="count">Current time: {{ intCount }}</p>
    <p>
    <!--onclick is a event that execute some function segment on some click in the element-->
        <button onclick="sendAddComand()" style="height:200px;width:200px"">Count Up</button>
    </p>
    <p>
        <button style="height:200px;width:200px"">Start!</button>
    </p>
    <p>
        <button style="height:200px;width:200px"">Reset/Stop</button>
    </p>
    <p>
    <!--onclick is a event that execute some function segment on some click in the element-->
        <button onclick="getStatus()" style="height:200px;width:200px">Refresh</button>
    </p>
    <script>
        function getStatus(){
            //Fetch is a command to make a HTTP request
            fetch("/getCountStatus",{
                //Set the request method to GET
                method:"GET"
                /*The response is a promise, if you dk what's that, is basically
                a thing that have probability of fail (in this context)
                "then()" if is evething ok, "catch()" if something bad happened
                */
            }).then((Response) => {
                //The response text is a promise too, we need do the same process
                Response.text().then((value) => {
                    //If we got the value, put it in the count
                    /* If you dk what's is that: this is a DOM interaction,
                    i just take the element with "count" id and put the modified text inside it */
                    document.getElementById("count").innerText = "Current time: " + value;
                }).catch(() => {
                    window.alert("fail on get status");
                })
            })
        }
        //Everything here is a basically copy of the code up here
        function sendAddComand(){
            fetch("/up/",{
                method : "GET"
            }).then((Response) => {
                    Response.text().then((text) => {
                        document.getElementById("count").innerText =     
"Current time: " + text;
                })
            })
        }
    </script>
</body>

    在上面的代码中，您可以看到对于按钮执行的每个“onclick”事件，一个功能段被激活，每个功能段都向服务器请求一个 url，执行一些代码并返回一个数字输入网站的计数，看下一段代码

    server.py 文件：

    from distutils.log import debug
from flask import Flask, render_template

app = Flask(__name__)
app.debug = True;


intCount = 0

@app.get("/")
def index():
    return render_template("index3.html")

@app.get("/down/")
def downIt():
    global intCount
    intCount -= 1

    #Do anything here...

    #Here i'm returning the current value of count, so you can get
    #It in you web site
    return str(intCount)

@app.get("/up/")
def upIt():
    global intCount
    intCount += 1

    #Do anything here...


    #Here i'm returning the current value of count, so you can get
    #It in you web site
    return str(intCount)

@app.get("/getCountStatus")
def status():
    global intCount
    return str(intCount)


@app.get("/reset/")
def resetIt():
    global intCount
    intCount = 0;

    # Do anything here...

    return str(intCount) #Again i'm returning the value, to the web site change in the count

    好吧，我希望你明白如何在客户端和服务器之间进行通信并通过它发送数据。

    如果你能理解，请告诉我。

    【讨论】：

    • 好的，我的 GPIO LED 代码可以使用您的代码，但是“开始”按钮有问题。倒计时数字不会随 LED 一起更新。它只会在 intCount 倒计时到 0 后更新。或者我需要单击刷新按钮。无论如何它会自动完成？
    • 我只写了“计数”和“刷新”按钮的代码，其余的只有你知道在你的代码上实现的逻辑，使用 fetch 与你的服务器交互，你现在就知道了如何在两者之间传输数据。
    • 是否可以在while循环中返回intCount？
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode