File tree Expand file tree Collapse file tree 5 files changed +91
-0
lines changed
FLASK PROJECTS/Anniversary time Expand file tree Collapse file tree 5 files changed +91
-0
lines changed Original file line number Diff line number Diff line change 1+ # Anniversary Timing
2+
3+ Simple timing page implemented using flask
Original file line number Diff line number Diff line change 1+ from flask import Flask , render_template
2+ from datetime import datetime
3+
4+ app = Flask (__name__ )
5+
6+ # 在此定义纪念日日期
7+ anniversary_date = datetime (2024 , 6 , 16 )
8+
9+ @app .route ('/' )
10+ def index ():
11+ current_date = datetime .now ()
12+ delta = current_date - anniversary_date
13+ days_passed = delta .days
14+ return render_template ('index.html' , days_passed = days_passed , anniversary_date = anniversary_date .strftime ("%Y-%m-%d %H:%M:%S" ))
15+
16+ if __name__ == '__main__' :
17+ app .run (debug = False )
Original file line number Diff line number Diff line change 1+ body {
2+ margin : 0 ;
3+ padding : 0 ;
4+ font-family : Arial, sans-serif;
5+ background : url ('background.jpg' ) no-repeat center center fixed;
6+ background-size : cover;
7+ color : white;
8+ display : flex;
9+ justify-content : center;
10+ align-items : center;
11+ height : 100vh ;
12+ }
13+
14+ .container {
15+ text-align : center;
16+ background-color : rgba (0 , 0 , 0 , 0.5 );
17+ padding : 20px ;
18+ border-radius : 10px ;
19+ }
20+
21+ h1 {
22+ font-size : 3em ;
23+ }
24+
25+ .time {
26+ font-size : 2em ;
27+ margin-top : 20px ;
28+ }
29+
30+ .time span {
31+ font-weight : bold;
32+ }
Original file line number Diff line number Diff line change 1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > Anniversary</ title >
7+ < link rel ="stylesheet " href ="{{ url_for('static', filename='style.css') }} ">
8+ < script >
9+ function updateTimer ( ) {
10+ const anniversaryDate = new Date ( "{{ anniversary_date }}" ) ;
11+ const currentDate = new Date ( ) ;
12+ const timeDiff = currentDate - anniversaryDate ;
13+
14+ const days = Math . floor ( timeDiff / ( 1000 * 60 * 60 * 24 ) ) ;
15+ const hours = Math . floor ( ( timeDiff % ( 1000 * 60 * 60 * 24 ) ) / ( 1000 * 60 * 60 ) ) ;
16+ const minutes = Math . floor ( ( timeDiff % ( 1000 * 60 * 60 ) ) / ( 1000 * 60 ) ) ;
17+ const seconds = Math . floor ( ( timeDiff % ( 1000 * 60 ) ) / 1000 ) ;
18+
19+ document . getElementById ( "days" ) . innerText = days ;
20+ document . getElementById ( "hours" ) . innerText = hours ;
21+ document . getElementById ( "minutes" ) . innerText = minutes ;
22+ document . getElementById ( "seconds" ) . innerText = seconds ;
23+ }
24+
25+ setInterval ( updateTimer , 1000 ) ;
26+ </ script >
27+ </ head >
28+ < body onload ="updateTimer() ">
29+ < div class ="container ">
30+ < h1 > It has passed the xx anniversary</ h1 >
31+ < div class ="time ">
32+ < span id ="days "> 0</ span > 天
33+ < span id ="hours "> 0</ span > 小时
34+ < span id ="minutes "> 0</ span > 分钟
35+ < span id ="seconds "> 0</ span > 秒
36+ </ div >
37+ </ div >
38+ </ body >
39+ </ html >
You can’t perform that action at this time.
0 commit comments