python todo-list网页实现_todolist网页版

作者：你好赵伟 | 2024-02-23 08:22:56

踩

todolist网页版

开始

先献上代码

todolist.py

from flask import Flask,render_template
todolist = []
app = Flask(__name__)
@app.route('/')
def home():
	return render_template('todolist.html')
@app.route('/api/todolist/checkItems',methods=['POST'])
def checkTodo():
	return str(todolist),200
@app.route('/api/todolist/delItem/<int:item>',methods=['POST'])
def delTodo(item):
	todolist.pop(item)
	return ''
@app.route('/api/todolist/addItem/<content>',methods=['POST'])
def addTodo(content):
	todolist.append(content)
	return ''
app.run()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

template/todolist.html

<!DOCTYPE html>
<html>
<head>
<title>todolist日程表</title>
</head>
<body>
<h1>todolist日程表</h1>
创建新的日程new todo:<input type="text" id="newTodo" name="newTodo" /><input type="button" id="submit" value="submit确认" name="submit" />
<br />
<input type="button" id="clear" name="clear" value="删除已完成的delete the finished items">
<br />
<div id="div">
</div>
</body>
<script>
var newTodo = document.getElementById('newTodo')
var submit = document.getElementById('submit')
var clear = document.getElementById('clear')
var div = document.getElementById('div')
function init(){
	if(window.XMLHttpRequest){
		return new XMLHttpRequest()
	}else if(window.ActiveXObject){
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
}
function recieveData(){
http = init()
http.open('POST','/api/todolist/checkItems')
http.onreadystatechange = function(){
if(http.status == 200 && http.responseText){
var resp = eval(http.responseText)
for(var i = 0;i < resp.length;i ++){
var item = resp[i]
item = '<input name="todoCheckBtns" type="checkbox"><label name="todoLabels">' + item + '</label>'
if(div.innerHTML.indexOf(item) == -1){
div.innerHTML += item
div.innerHTML += '<br name="newlines" />'
}
}
}
}
http.send(null)
}
setInterval('recieveData()',100)
submit.onclick = function(){
var todo = newTodo.value
http = init()
http.open("POST","/api/todolist/addItem/" + todo)
http.send(null)
}
clear.onclick = function(){
var checkBtns = document.getElementsByName('todoCheckBtns')
var labels = document.getElementsByName('todoLabels')
var newlines = document.getElementsByName('newlines')
if(checkBtns.length < 1){
return
}
var len = checkBtns.length
for(var i = len - 1;i >= 0;i --){
if(checkBtns[i].checked){
checkBtns[i].outerHTML = ""
labels[i].outerHTML = ""
newlines[i].outerHTML = ""
http = init()
http.open('POST','/api/todolist/delItem/' + i)
http.send(null)
}
}
}
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

代码剖析

main.py

初始化

from flask import Flask,render_template
todolist = []
app = Flask(__name__)
1
2
3

添加根路由

@app.route('/')
def home():
	return render_template('todolist.html')
1
2
3

添加接口

@app.route('/api/todolist/checkItems',methods=['POST'])
def checkTodo():
	return str(todolist),200
@app.route('/api/todolist/delItem/<int:item>',methods=['POST'])
def delTodo(item):
	todolist.pop(item)
	return ''
@app.route('/api/todolist/addItem/<content>',methods=['POST'])
def addTodo(content):
	todolist.append(content)
	return ''
1
2
3
4
5
6
7
8
9
10
11

开始运行

app.run()
1

templates/todolist.html

初始化

<!DOCTYPE html>
<html>
1
2

标题

<head>
<title>todolist日程表</title>
</head>
<body>
<h1>todolist日程表</h1>
1
2
3
4
5

操作部分

创建新的日程new todo:<input type="text" id="newTodo" name="newTodo" /><input type="button" id="submit" value="submit确认" name="submit" />
<br />
<input type="button" id="clear" name="clear" value="删除已完成的delete the finished items">
<br />
1
2
3
4

todo项存放用的div

<div id="div">
</div>
</body>
1
2
3

script部分

初始化

var newTodo = document.getElementById('newTodo')
var submit = document.getElementById('submit')
var clear = document.getElementById('clear')
var div = document.getElementById('div')
function init(){
	if(window.XMLHttpRequest){
		return new XMLHttpRequest()
	}else if(window.ActiveXObject){
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
}
1
2
3
4
5
6
7
8
9
10
11

100ms一次接收数据

function recieveData(){
http = init()
http.open('POST','/api/todolist/checkItems')
http.onreadystatechange = function(){
if(http.status == 200 && http.responseText){
var resp = eval(http.responseText)
for(var i = 0;i < resp.length;i ++){
var item = resp[i]
item = '<input name="todoCheckBtns" type="checkbox"><label name="todoLabels">' + item + '</label>'
if(div.innerHTML.indexOf(item) == -1){
div.innerHTML += item
div.innerHTML += '<br name="newlines" />'
}
}
}
}
http.send(null)
}
setInterval('recieveData()',100)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

新建项

submit.onclick = function(){
var todo = newTodo.value
http = init()
http.open("POST","/api/todolist/addItem/" + todo)
http.send(null)
}
1
2
3
4
5
6

整理todo-list部分

clear.onclick = function(){
var checkBtns = document.getElementsByName('todoCheckBtns')
var labels = document.getElementsByName('todoLabels')
var newlines = document.getElementsByName('newlines')
if(checkBtns.length < 1){
return
}
var len = checkBtns.length
for(var i = len - 1;i >= 0;i --){
if(checkBtns[i].checked){
checkBtns[i].outerHTML = ""
labels[i].outerHTML = ""
newlines[i].outerHTML = ""
http = init()
http.open('POST','/api/todolist/delItem/' + i)
http.send(null)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

最后闭环

</script>
</html>
1
2

github

作者

hit-road

拜拜,下课!

hit-road不定期跟新，不见不散！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/135016