miio
/
bus-de-go


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
							<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>{{ page.Title }}</title>
    <link rel="stylesheet" href="/assets/css/style.css" media="all">
    <style type="text/css">
      body {
        background-color: black;
        color: white;
      }

      table {
        width: 100%;
        margin: auto;
      }

      table, th, td {
            border:none;
          }
      h1 {
        text-align: center;
      }

      hr {
        border-bottom: 5px solid white;
      }

      td {
        height: 50px;
        font-size: 20px;
      }

      #time {
       color: yellow;
      }
      tr.row1 {
        background-color: #20258b;
      }

      tr.row2 {
        background-color: #4168ff;
      }

    </style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<table border="0">
<tr id="header">
  <th>定刻</th>
  <th>変更</th>
  <th>行先</th>
  <th>バス会社</th>
  <th>便名</th>
  <th>天気</th>
  <th>備考</th>
  <th id="time"></time>
</tr>
</table>
<hr />
<table  border="0">
<tbody>
{% for ctime in times %}
{% if forloop.Counter0|divisibleby:2 %}
<tr class="row2">
{% else %}
<tr class="row1">
{% endif %}
  <td>{{ ctime.Hour }}:{{ ctime.Minute }}</td>
  <td> </td>
  <td>{{ ctime.Start }} to {{ ctime.End }}</td>
  <td>{{ctime.Campany }}</td>
  <td> -- </td>
  <td> -- </td>
  <td></td>
</tr>
{% endfor %}
</tbody>
</table>


<script>

  setInterval(function () {
//時刻データを取得して変数jikanに格納する
var jikan= new Date();

//時・分・秒を取得する
var hour = ( ("000") + jikan.getHours()).substr(-2);
var minute = ( ("000") + jikan.getMinutes()).substr(-2);
var second = ( ("000") + jikan.getSeconds()).substr(-2);

var display_time = hour+ ":" + minute + ":" + second;

var current_time = hour + '' +  minute + second;
var reload_time =  ( ("000") + {{times.0.Hour}}).substr(-2) + '' +  ( ("000") + {{times.0.Minute}}).substr(-2) + "00";
var next_reload_count = (reload_time - current_time);
$("#time").html(display_time + "/" + next_reload_count);

  if (0 > next_reload_count) {
    setTimeout(function () {
      window.location = "/";
    }, 10000);
  }


  }, 1000);
</script>

</body>
</html>