地方でリモートワーク in Iwate

東京の受託開発会社でリモートワークしてます。

Railsでリアルタイム表示の時計をcoffeescriptで書いた

スポンサーリンク

参考にしたのは下記サイト

おてがる!JavaScriptでシンプルなデジタル時計をつくってみよう(Webフォント使用/サイズ自動調整) - Qiita

これをこのサイトでcofeescriptに変換しました。 js2coffee 2.0 — convert JavaScript to CoffeeScript CofeeScriptの方が見やすいです。

注意するのはこのサイトで変換しただけではRailsのviewで呼び出せません。 関数に@をつけないとrailsのviewでは呼び出せないみたいです。 例:@clock = () ->

@clock = () ->
  weeks = new Array('SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY')
  now = new Date
  y = now.getFullYear()
  mo = now.getMonth() + 1
  d = now.getDate()
  w = weeks[now.getDay()]
  h = now.getHours()
  mi = now.getMinutes()
  s = now.getSeconds()

  if mo < 10
    mo = '0' + mo
  if d < 10
    d = '0' + d
  if mi < 10
    mi = '0' + mi
  if s < 10
    s = '0' + s

  document.getElementById('clock_year').innerHTML = y
  document.getElementById('clock_weeks').innerHTML = w
  document.getElementById('clock_date').innerHTML = mo + '|' + d
  document.getElementById('clock_time').innerHTML = h + ':' + mi
  return

setInterval clock, 1000

マニュフェストファイルでrequireして、肝心のviewでは下記のようにして呼び出します。

<span id="clock_date"></span>
<span id="clock_year"></span>
<span id="clock_weeks"></span>
<span id="clock_time"></span>

表示を変えたければ、coffeeの document.getElementByIdの部分をごにょごにょすればいいです。 以外と簡単で、便利です。