サンプルを見ながら、スマホ版のタイムカードを作成を考えています。
タイマー表示させたいのですが、思うように値がセットできません。
テーブルの中の値の参照方法が悪いと思うのですが、どのように参照すればよろしいでしょうか。
ご教授ください。
以下サンプルソースです。
(function() {
“use strict”;
// 打刻ボタン表示
kintone.events.on(‘mobile.app.record.index.show’, function(event) {
var Shukkincss = ‘height:120px;width:50%;font-size:35pt;border-radius:10px;color:red; background: -moz-linear-gradient(bottom,yellow, khaki 50%,yellow);background: -webkit-gradient(linear, left bottom, left top, from(yellow), color-stop(0.5, khaki), to(yellow));’;
var Taikincss = ‘height:120px;width:50%;font-size:35pt;border-radius:10px;color:white;background: -moz-linear-gradient(bottom,royalblue, mediumblue 50%,royalblue);background: -webkit-gradient(linear, left bottom, left top, from(blue), color-stop(0.5, mediumblue), to(blue));’;
var Divcss = ‘margin:0; padding:0; list-style:none;height:50px;padding:10px;background:#44810F;border-bottom:1px solid #fff;color:#fff;’;
var Yearcss = ‘width:150px; text-align:center; virtical-align:bottom;’;
var Datecss = ‘width:150px; text-align:center;’;
var Timecss = ‘font-size:200%;’;
// divタグ要素を作成
var myDisplayDiv = document.createElement(‘div’);
myDisplayDiv.style = Divcss;
// tableタグ要素を作成
var table = document.createElement(‘table’);
table.id = ‘nametbl’;
table.border = ‘0’;
// tbodyタグ要素作成し、tableタグ要素に追加
var tbody = document.createElement(‘tbody’);
table.appendChild(tbody);
// 1行目のTRタグ要素を作成しTBODYタグ要素に追加
var tr1 = document.createElement(‘tr’);
var td1_1 = document.createElement(‘td’);
var td1_2 = document.createElement(‘td’);
td1_1.style = Yearcss;
td1_1.id = ‘year’;
td1_1.innerHTML=‘2017’;
td1_2.style = Timecss;
td1_2.id = ‘time’;
td1_2.rowSpan = ‘2’;
td1_2.innerHTML=‘16:45’;
tr1.appendChild(td1_1);
tr1.appendChild(td1_2);
tbody.appendChild(tr1);
// 2行目のTRタグ要素を作成しTBODYタグ要素に追加
var tr2 = document.createElement(‘tr’);
var td2_1 = document.createElement(‘td’);
td2_1.id = ‘date’;
td2_1.style = Datecss;
td2_1.innerHTML=‘08/22’;
tr2.appendChild(td2_1);
tbody.appendChild(tr2);
// tableタグ要素をBODYタグに追加
kintone.mobile.app.getHeaderSpaceElement().appendChild(myDisplayDiv);
myDisplayDiv.appendChild(table);
});
// サーバーの時間を取得する
function getUTCDateByServer() {
var r;
return (r = new XMLHttpRequest)
? (r.open (‘HEAD’, ‘#’, false), r.send (null), new Date (r.getResponseHeader (‘Date’))) : null;
}
// 指定された文字の指定された長さのゼロサプレスを取得する
function zero_suppress(s, len){
var str = ‘’;
for (var i=0;i<len ;i+=1) { str += ‘0’; }
str += s;
return str.substr(str.length - len, len);
}
// 時計に表示する関数
function set_digitTime(){
var dt = new Date(getUTCDateByServer());
var yyyy, MM, dd, hh, mm, ss;
var DAY = [‘SUN’,‘MON’,‘TUE’,‘WED’,‘THU’,‘FRI’,‘SAT’,]
yyyy = dt.getUTCFullYear();
MM = zero_suppress(dt.getUTCMonth() + 1, 2);
dd = zero_suppress(dt.getUTCDate(), 2);
hh = zero_suppress(dt.getUTCHours() + 9, 2);
mm = zero_suppress(dt.getUTCMinutes(), 2);
ss = zero_suppress(dt.getUTCSeconds(), 2);
$(‘#year’)[0].innerHTML = yyyy; //←yearの参照方法がわかりません。
$(‘#date’)[0].innerHTML = MM + ‘/’ + dd + ’ ’ + DAY[dt.getUTCDay()];
$(‘#time’)[0].innerHTML = hh + ‘:’ + mm + ‘:’ + ss;
}
// 1000ミリ秒ごとにset_digitTime()を繰り返す
set_digitTime();
setInterval(set_digitTime, 1000);
})();