JSFiddle - React, Tailwind, and code Playground

by Hao Wu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
時間:
<p id='clock'></p>

JavaScript

/**
 * 取得民國年, 格式為 yyy-MM-dd
 * 
 * @param {type} date 日期
 * @returns {String} 回傳民國年
 */
function getFormatDate(date) {
  var year = date.getFullYear() - 1911;
  var month = date.getMonth() + 1;
  var day = date.getDate();

  return year + '-' + ('0' + month).substr(-2, 2) + '-' + ('0' + day).substr(-2, 2);
}

var AttendClock = new(function() {
  this.offset = 0;
  this.calibrate = function(datetime) {
    this.offset = datetime - new Date();
  };
  this.now = function() {
    var d = new Date();
    d.setTime(d.getTime() + this.offset);
    return d;
  };
})();

/**
 * 將輸入的日期字串, 轉成民國年時間, 格式為 yyy-MM-dd hh:mm:ss
 * @param {type} datetime 日期
 * @returns {Date} 回傳民國年
 */
function calibrateClock(datetime) {
  var now = new Date();
  return now.setTime(now.getTime() + datetime.getTime());
}

/**
 * 將輸入的日期字串, 轉成民國年時間, 格式為 yyy-MM-dd hh:mm:ss
 * 
 * @param {type} datetime 日期
 * @returns {String} 回傳民國年
 */
function getMinguoDateTime(datetime) {
  //	var datetime = new Date(strDateTime);
  var year = datetime.getFullYear() - 1911;
  var month = datetime.getMonth() + 1;
  var day = datetime.getDate();
  var h = datetime.getHours();
  var m = datetime.getMinutes();
  var s = datetime.getSeconds();

  return year + '-' + ('0' + month).substr(-2, 2) + '-' + ('0' + day).substr(-2, 2) + ' ' + ('0' + h).substr(-2, 2) + ':' + ('0' + m).substr(-2, 2) + ':' + ('0' + s).substr(-2, 2);
}

// 校時
AttendClock.calibrate(new Date(2017, 08, 12, 12, 00, 00));

setInterval(function() {
  console.log('現在時間: ' + AttendClock.now());
  $('#clock').html(getMinguoDateTime(AttendClock.now()));
}, 1000);