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の部分をごにょごにょすればいいです。
以外と簡単で、便利です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です