参考にしたのは下記サイト
おてがる!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
の部分をごにょごにょすればいいです。
以外と簡単で、便利です。
コメントを残す