likes
comments
collection
share

使用brython写一个任务列表我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了! 我相信很多小伙伴或多或少,在

作者站长头像
站长
· 阅读数 25

我相信很多小伙伴或多或少,在答应别人做某件事情后,有时候忘做了,别人来问结果的时候,才想起,还有这么一件事,本篇使用brython写一个任务列表,让你记住你还有多少事没做。

效果展示

运行效果

使用brython写一个任务列表我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了! 我相信很多小伙伴或多或少,在

初始化项目

使用brython写一个任务列表我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了! 我相信很多小伙伴或多或少,在

创建新项目后,点击Script右侧的设置,加入依赖资源。

使用brython写一个任务列表我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了! 我相信很多小伙伴或多或少,在

cdn.jsdelivr.net/npm/jcode-t…

cdn.jsdelivr.net/npm/brython…

cdn.jsdelivr.net/npm/brython…

使用brython写一个任务列表我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了! 我相信很多小伙伴或多或少,在

最后使用写一个案例测试一下。

使用brython写一个任务列表我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了! 我相信很多小伙伴或多或少,在

运行后,若出现了hello world,则证明环境安装完毕。

项目逻辑

任务列表较为简单,其中用户一个输入框每一个提交按钮,提交之后,会产生一条待执行任务,任务会附带一个按钮,是完成。点击完成后,会纳入已完成中,可以将其删除。

使用brython写一个任务列表我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了! 我相信很多小伙伴或多或少,在

当对任务点击【已完成】后,会纳入已完成中。

使用brython写一个任务列表我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了! 我相信很多小伙伴或多或少,在

此时就可以删除之。

项目逻辑

我们底层数据,使用2个字典来存储数据,其中一个是待执行任务,还有一个是已完成,其中每个任务都有一个任务ID

具体如下:

使用brython写一个任务列表我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了! 我相信很多小伙伴或多或少,在

其中,我们以ID为主键,若出现在 “已完成”字典,就不会出现在 “待完成”字典中。

上述底层数据铺垫后,使用table将其渲染出来即可。

使用brython写一个任务列表我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了! 我相信很多小伙伴或多或少,在

页面编写

我们页面代码如下:

<div id="app">
  
  <div id="userInput">
    <textarea id="txt"></textarea>
    <br />
    <button id="input_btn">添加工作队列</button>
  </div>

  <div id="displayInfo">
  
  </div>

</div>

<!-- 此处省略JCode代码 -->

上述代码,我们创建了一个textarea供用户输入,而后添加一个按钮,提交用户输入的数据,最后是定义一个容器displayInfo,以便供python渲染,此时可以记住我们的iddisplayInfo

我们渲染CSS后,效果如下:

使用brython写一个任务列表我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了! 我相信很多小伙伴或多或少,在

Python业务编写

由于添加任务列表是通过按钮触发的,所以我们要写一个点击事件,其中代码如下:

document["input_btn"].bind("click",addNodes)

其中,input_btn是我们在页面编写的时候,定义的textareaid,而addNodes是我们执行的方法,我们来具体看下:

# 增加任务
def addNodes(ev):
  global ids
  global jobs
  global overJobs
  ids = ids + 1

  nowDate = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())

  val = document["txt"].value

  if val == "" :
    document["txt"] <= "请输入数据再添加队列"
    return

  val = nowDate + ": " + val
  jobs[ids] = val


  showTables()

其中,我们global定义的在方法之外已经定义了,idsint类型,用于存储主键idjobsoverJobs是我们定义的字典,代表的意思为计划任务 和 已完成任务。

获取textarea中用户输入的数据,从而直接将其存储到jobs中,而后调用showTables()方法来展示页面,其中代码如下:

# 展示数据
def showTables():
  # 清理数据
  document["displayInfo"].clear()
  tb.clear()
  overTb.clear()

  if 0 != len(jobs):
    for k,v in jobs.items():
      over_btn = BUTTON("已完成",**{"id":k})
      over_btn.bind("click",completeJobs)
      tb <= TR(TD(over_btn)+TD(v,style="width:90%"))

    document["displayInfo"] <= tb

	# 省略展示overJob的代码

如上代码是渲染表格的python代码,其逻辑为通过遍历字典的行为,来生成表格数据和按钮,其中我们需要知道每个按钮是干什么的,所以在定义按钮的时候吗,需要指定主键id的值和点击对象,其代码为: BUTTON("已完成",**{"id":k}),而后将表格内容输出到屏幕上。

我们最后来看下完成任务的python代码

# 完成任务
def completeJobs(ev):
  ID = int(ev.currentTarget.id)

  overJobs[ID] = jobs[ID]
  del jobs[ID] 

  showTables()

其代码的逻辑为获取由按钮传入的主键id,再将数据其从jobs字典挪到overJobs字典中,这里又按钮传入的主键,其类型为str,我们需要将其转为int才能用于获取数据。

效果展示

添加:“pdudo 记得使用app查看文章”

使用brython写一个任务列表我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了! 我相信很多小伙伴或多或少,在

添加: “切记每天看书,记得输入输出 ”

使用brython写一个任务列表我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了! 我相信很多小伙伴或多或少,在

不仅如此,我们还可以直接再其编写html格式的文字,例如: 使用brython写一个任务列表我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了! 我相信很多小伙伴或多或少,在

结束 和 删除任务 就不一一展示了。

总结

好了,好玩吧,快动动你的小手指来试试吧。

转载自:https://juejin.cn/post/7146221485311393822
评论
请登录