PyScript④（時刻を動的に表示）

時刻を動的に表示

PyScriptを使って、時刻を動的に表示してみます。

サンプルコード

動的な表示をするためにはまずimport asyncioと宣言しasyncioライブラリをインポートしておきます。

次に動的に動かしたい関数（今回はfoo関数）にasyncという修飾子をつけます。

foo関数内では、繰り返したい処理をwhile True配下に記載します。

今回は、時刻を取得しそれをoutputDiv2とoutputDiv3に反映しています。

またawait asyncio.sleep(1)を使って、１秒待ってから実行するようにしています。

[ソースコード]

clock.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
<html>
<head>
  <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
  <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>

<body>

  <div class="font-mono">start time: <label id="outputDiv"></label></div>
  <div id="outputDiv2" class="font-mono"></div>
  <div id="outputDiv3" class="font-mono"></div>

  <py-script>
  import asyncio
  from datetime import datetime as dt

  def format_date(dt_, fmt="%m/%d/%Y, %H:%M:%S"):
    return f"{dt_:{fmt}}"

  def now(fmt="%m/%d/%Y, %H:%M:%S"):
    return format_date(dt.now(), fmt)

  async def foo():
    while True:
      await asyncio.sleep(1)
      output = now()
      Element("outputDiv2").write(output)

      out3 = Element("outputDiv3")
      if output[-1] in ["0", "4", "8"]:
        out3.write("It's espresso time!")
      else:
        out3.clear()

  pyscript.run_until_complete(foo())
  </py-script>
</body>
</html>

[ブラウザ表示]

ブラウザ上に時刻が１秒ごとに更新される（動的に表示される）ことを確認できました。