HTML表示
- {{ val }}がミソapp.py で読み込んだDBの値(val)を渡している。
- test2.html でレイアウトを定義
- style.cssでレイアウトを装飾
- buttonは練習用（押すと現在時刻を表示）
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0.1//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" Content="text/html;charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel= "stylesheet" type= "text/css" href="{{ url_for('static', filename='css/style2.css') }}"> <!--<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static', filename='css/photon.min.css') }}">--> <title>チャコメーター</title> <script type="text/javascript"> var xmlHttp; var myfunc = function(){ dt=new Date(); // Dateオブジェクト生成 h=dt.getHours(); // 時間を得るメソッド m=dt.getMinutes(); // 分を得るメソッド s=dt.getSeconds(); // 秒を得るメソッド var mydiv = document.getElementById("mydiv"); str = h + "時" + m + "分" + s + "秒だワン！"; mydiv.innerHTML = str; } </script> </head> <html> <h1>チャコメーター</h1> <body bgcolor='white'><br> <img class="chaco"; src="{{ url_for('static', filename='image/DSC_7304.jpg') }}" alt=”chaco”> <div id="mydiv"> <p>今、何時？</p><br> </div> <h2> 外の気温：</h2> <div class="value"> <p> 測定時刻 {{ val[0] }} </p> <p> 外の気温 {{ val[2] }} degC</p> <p> 外の湿度 {{ val[3] }} ％</p> <p> 電池電圧 {{ val[1] }} V</p> </div> <br> <p>{{ val }} </p> <p class="button"> <form> <img class="jikan"; src="{{ url_for('static', filename='image/2617.png') }}" onclick="myfunc(1)"> </form> </p> </body> </html>
完成
ブラウザ表示
test2.html
