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);