【资源帖】Date对象及案例

[zptcsoft]

Date对象资源

1. 阮一峰 Date 对象
2. MDN Date对象
3. 课程讲义
4. Moment.js 官方网站

Date对象案例

1. 数字时钟
2. 模拟时钟
3. 倒计时时钟
4. Vue.js实现的漂亮时钟
5. 颜色背景时钟
6. canvas实现的环形时钟

[zptcsoft]

网页时钟效果收集 #326

[zptcsoft]

秒针的实现

#clock {
	width: 300px;
	height: 300px;
	background: url(https://bestace.github.io/fed/ppt/demos/jsBase/img/clock.jpg);
	background-size: 100%;
	position: relative;
}

#sec {
	width: 2px;
	height: 100px;
	background-color: #f00;
	position: absolute;
	left: 150px;
	bottom: 150px;
	transform-origin: 50% bottom;
	/*transform: rotate(30deg);*/
}

<div id="clock">
	<div id="sec"></div>
</div>

var oSec = document.getElementById("sec");
function getNow() {
	now = new Date();
	var hour = now.getHours();
	var min = now.getMinutes();
	var sec = now.getSeconds();
	oSec.style.transform="rotate("+sec*6+"deg)";		
	setTimeout(getNow, 1000);
}
getNow();

[zptcsoft]

Moment.js的中文定制

moment.defineLocale('zh-cn', {
	months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
	monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
	weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
	weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
	weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
	longDateFormat: {
		LT: 'Ah点mm分',
		LTS: 'Ah点m分s秒',
		L: 'YYYY-MM-DD',
		LL: 'YYYY年MMMD日',
		LLL: 'YYYY年MMMD日Ah点mm分',
		LLLL: 'YYYY年MMMD日ddddAh点mm分',
		l: 'YYYY-MM-DD',
		ll: 'YYYY年MMMD日',
		lll: 'YYYY年MMMD日Ah点mm分',
		llll: 'YYYY年MMMD日ddddAh点mm分'
	},
	meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
	meridiemHour: function(hour, meridiem) {
		if(hour === 12) {
			hour = 0;
		}
		if(meridiem === '凌晨' || meridiem === '早上' ||
			meridiem === '上午') {
			return hour;
		} else if(meridiem === '下午' || meridiem === '晚上') {
			return hour + 12;
		} else {
			// '中午'
			return hour >= 11 ? hour : hour + 12;
		}
	},
	meridiem: function(hour, minute, isLower) {
		var hm = hour * 100 + minute;
		if(hm < 600) {
			return '凌晨';
		} else if(hm < 900) {
			return '早上';
		} else if(hm < 1130) {
			return '上午';
		} else if(hm < 1230) {
			return '中午';
		} else if(hm < 1800) {
			return '下午';
		} else {
			return '晚上';
		}
	},
	calendar: {
		sameDay: function() {
			return this.minutes() === 0 ? '[今天]Ah[点整]' : '[今天]LT';
		},
		nextDay: function() {
			return this.minutes() === 0 ? '[明天]Ah[点整]' : '[明天]LT';
		},
		lastDay: function() {
			return this.minutes() === 0 ? '[昨天]Ah[点整]' : '[昨天]LT';
		},
		nextWeek: function() {
			var startOfWeek, prefix;
			startOfWeek = moment().startOf('week');
			prefix = this.unix() - startOfWeek.unix() >= 7 * 24 * 3600 ? '[下]' : '[本]';
			return this.minutes() === 0 ? prefix + 'dddAh点整' : prefix + 'dddAh点mm';
		},
		lastWeek: function() {
			var startOfWeek, prefix;
			startOfWeek = moment().startOf('week');
			prefix = this.unix() < startOfWeek.unix() ? '[上]' : '[本]';
			return this.minutes() === 0 ? prefix + 'dddAh点整' : prefix + 'dddAh点mm';
		},
		sameElse: 'LL'
	},
	ordinalParse: /\d{1,2}(日|月|周)/,
	ordinal: function(number, period) {
		switch(period) {
			case 'd':
			case 'D':
			case 'DDD':
				return number + '日';
			case 'M':
				return number + '月';
			case 'w':
			case 'W':
				return number + '周';
			default:
				return number;
		}
	},
	relativeTime: {
		future: '%s内',
		past: '%s前',
		s: '几秒',
		m: '1 分钟',
		mm: '%d 分钟',
		h: '1 小时',
		hh: '%d 小时',
		d: '1 天',
		dd: '%d 天',
		M: '1 个月',
		MM: '%d 个月',
		y: '1 年',
		yy: '%d 年'
	},
	week: {
		// GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
		dow: 1, // Monday is the first day of the week.
		doy: 4 // The week that contains Jan 4th is the first week of the year.
	}
});