python使用Flask框架創(chuàng)建一個(gè)簡單的動態(tài)日歷效果

更新時(shí)間：2024年12月21日 11:19:55 作者：鏡花照無眠

這篇文章主要介紹了python使用Flask框架創(chuàng)建一個(gè)簡單的動態(tài)日歷,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧

0. 運(yùn)行效果

運(yùn)行代碼，然后在瀏覽器中訪問 http://127.0.0.1:5000/，將看到一個(gè)動態(tài)日歷，能夠通過點(diǎn)擊按鈕切換月份。

1. 安裝 Flask

首先，確保你已經(jīng)安裝了Flask。如果沒有，可以使用以下命令安裝：

pip install Flask

測試：

from flask import Flask
#from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
#@app.route('/', methods=['GET', 'POST'])
def hello_world():
    return 'Hello, World!'
    #return render_template('calendar.html')
# 僅在開發(fā)環(huán)境中使用
if __name__ == '__main__':
    app.run(debug=True)  # 僅用于開發(fā)環(huán)境

打開 http://127.0.0.1:5000 ，可看到helloworld

2. 項(xiàng)目結(jié)構(gòu)

/項(xiàng)目目錄
├── app.py
├── static
│   └── bg.jpg  # 確保你將背景圖放在這里
└── templates
    └── calendar.html

3. 創(chuàng)建 Flask 應(yīng)用

接下來，創(chuàng)建一個(gè)名為 app.py 的文件。
導(dǎo)入必要的庫：

from flask import Flask, render_template, request
import calendar
from datetime import datetime

其中，render_template: 用于渲染 HTML 模板。request: 用于處理 HTTP 請求數(shù)據(jù)。calendar: Python 的日歷模塊，用于生成日歷。datetime: 用于獲取當(dāng)前日期和時(shí)間。

創(chuàng)建 Flask 應(yīng)用，__name__ 表示當(dāng)前模塊的名稱。

app = Flask(__name__)

定義路由

@app.route('/', methods=['GET', 'POST'])

使用 datetime.now() 獲取當(dāng)前時(shí)間，并提取出當(dāng)前的年月份。

now = datetime.now()  # Get current date and time
year = now.year
month = now.month

表單提交，如果請求是 POST 方法（通常是表單提交），則從表單中獲取用戶選擇的月份和年份。根據(jù)用戶的操作（前一個(gè)月或下一個(gè)月），更新 month 和 year 變量。

if request.method == 'POST':
    month = int(request.form.get('month'))
    year = int(request.form.get('year'))
    if request.form.get('action') == 'prev':
        if month == 1:
            month = 12
            year -= 1
        else:
            month -= 1
    elif request.form.get('action') == 'next':
        if month == 12:
            month = 1
            year += 1
        else:
            month += 1

生成日歷，渲染html模板

cal = calendar.monthcalendar(year, month)
month_year = f"{year}年{month}月"
return render_template('calendar.html', calendar=cal, month_year=month_year, year=year, month=month, now=now)

代碼如下：

from flask import Flask, render_template, request
import calendar
from datetime import datetime
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def index():
    now = datetime.now()  # Get current date and time
    year = now.year
    month = now.month
    if request.method == 'POST':
        month = int(request.form.get('month'))
        year = int(request.form.get('year'))
        if request.form.get('action') == 'prev':
            if month == 1:
                month = 12
                year -= 1
            else:
                month -= 1
        elif request.form.get('action') == 'next':
            if month == 12:
                month = 1
                year += 1
            else:
                month += 1
    # Generate calendar
    cal = calendar.monthcalendar(year, month)
    month_year = f"{year}年{month}月"
    return render_template('calendar.html', calendar=cal, month_year=month_year, year=year, month=month, now=now)
if __name__ == '__main__':
    app.run(debug=True)

4. 創(chuàng)建 HTML 模板

在與 app.py 相同的目錄下，創(chuàng)建一個(gè)名為 templates 的文件夾，并在其中創(chuàng)建一個(gè)名為 calendar.html 的文件，添加代碼：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>動態(tài)日歷</title>
    <style>
        body {
            background: url('/static/bg.jpg') no-repeat center center fixed;
            background-size: cover;
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        .calendar-container {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 300px;
            border: 2px solid white;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            padding: 10px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            text-align: center;
            padding: 10px;
            border: 1px solid #ddd;
        }
        .today {
            background-color: red;
            color: white;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .button {
            cursor: pointer;
            font-size: 1.2em;
            padding: 5px 10px;
            background: lightgray;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="calendar-container">
    <div class="header">
        <form method="post" style="display: inline;">
            <input type="hidden" name="month" value="{{ month }}">
            <input type="hidden" name="year" value="{{ year }}">
            <button class="button" name="action" value="prev">&#9664;</button>
        </form>
        <span>{{ month_year }}</span>
        <form method="post" style="display: inline;">
            <input type="hidden" name="month" value="{{ month }}">
            <input type="hidden" name="year" value="{{ year }}">
            <button class="button" name="action" value="next">&#9654;</button>
        </form>
    </div>
    <table>
    <tr>
        <th>日</th>
        <th>一</th>
        <th>二</th>
        <th>三</th>
        <th>四</th>
        <th>五</th>
        <th>六</th>
    </tr>
    {% for week in calendar %}
    <tr>
        {% for day in week %}
        {% if day == 0 %}
        <td></td>
        {% else %}
        <td {% if day == now.day and year == now.year and month == now.month %}class="today"{% endif %}>{{ day }}</td>
        {% endif %}
        {% endfor %}
    </tr>
    {% endfor %}
</table>
</div>
</body>
</html>

背景圖路徑設(shè)置，F(xiàn)lask 會自動為 static 目錄中的文件處理 URL，因此可以這樣引用它：

background: url('/static/bg.jpg');

到此這篇關(guān)于python使用Flask框架創(chuàng)建一個(gè)簡單的動態(tài)日歷效果的文章就介紹到這了,更多相關(guān)python Flask動態(tài)日歷內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: