You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
416 lines
12 KiB
416 lines
12 KiB
3 years ago
|
YL.onReady(function () {
|
||
|
|
var lang = YL.static.lang === 'zh-cn' || YL.static.lang === 'zh-tw'?
|
||
|
|
{
|
||
|
|
Mon: '星期一',
|
||
|
|
MonShort: '一',
|
||
|
|
Tues: '星期二',
|
||
|
|
TuesShort: '二',
|
||
|
|
Wed: '星期三',
|
||
|
|
WedShort: '三',
|
||
|
|
Thur: '星期四',
|
||
|
|
ThurShort: '四',
|
||
|
|
Fri: '星期五',
|
||
|
|
FriShort: '五',
|
||
|
|
Sat: '星期六',
|
||
|
|
SatShort: '六',
|
||
|
|
Sun: '星期日',
|
||
|
|
SunShort: '日',
|
||
|
|
Jan: '1月',
|
||
|
|
Feb: '2月',
|
||
|
|
Mar: '3月',
|
||
|
|
Apr: '4月',
|
||
|
|
May: '5月',
|
||
|
|
June: '6月',
|
||
|
|
July: '7月',
|
||
|
|
Aug: '8月',
|
||
|
|
Sept: '9月',
|
||
|
|
Oct: '10月',
|
||
|
|
Nov: '11月',
|
||
|
|
Dec: '12月',
|
||
|
|
}:
|
||
|
|
{
|
||
|
|
Mon: 'Monday',
|
||
|
|
MonShort: 'Mon',
|
||
|
|
Tues: 'Tuesday',
|
||
|
|
TuesShort: 'Tues',
|
||
|
|
Wed: 'Wednesday',
|
||
|
|
WedShort: 'Wed',
|
||
|
|
Thur: 'Thursday',
|
||
|
|
ThurShort: 'Thur',
|
||
|
|
Fri: 'Friday',
|
||
|
|
FriShort: 'Fri',
|
||
|
|
Sat: 'Saturday',
|
||
|
|
SatShort: 'Sat',
|
||
|
|
Sun: 'Sunday',
|
||
|
|
SunShort: 'Sun',
|
||
|
|
Jan: 'Jan',
|
||
|
|
Feb: 'Feb',
|
||
|
|
Mar: 'Mar',
|
||
|
|
Apr: 'Apr',
|
||
|
|
May: 'May',
|
||
|
|
June: 'June',
|
||
|
|
July: 'July',
|
||
|
|
Aug: 'Aug',
|
||
|
|
Sept: 'Sept',
|
||
|
|
Oct: 'Oct',
|
||
|
|
Nov: 'Nov',
|
||
|
|
Dec: 'Dec',
|
||
|
|
};
|
||
|
|
|
||
|
|
var o_box_time = document.getElementById('_box_time');
|
||
|
|
var aDiv_time = o_box_time.getElementsByClassName('div-time');
|
||
|
|
var arrWeek = [lang.Sun, lang.Mon, lang.Tues, lang.Wed, lang.Thur, lang.Fri, lang.Sat];
|
||
|
|
var oCalendar = o_box_time.getElementsByClassName('calendar')[0];
|
||
|
|
var _aStrong = oCalendar.getElementsByTagName('strong');
|
||
|
|
var oDays = oCalendar.getElementsByClassName('_days')[0].getElementsByTagName('ul')[0];
|
||
|
|
var _oHeader = document.getElementsByClassName('_header')[0];
|
||
|
|
var _r_l = _oHeader.getElementsByTagName('span');
|
||
|
|
var _oYears_months = o_box_time.getElementsByClassName('_years_months')[0];
|
||
|
|
var _oYears_months_ul = _oYears_months.getElementsByTagName('ul')[0];
|
||
|
|
var _oNormal = o_box_time.getElementsByClassName('_normal')[0];
|
||
|
|
var _aLi_months = _oYears_months.getElementsByTagName('li');
|
||
|
|
var _delay_time = null;
|
||
|
|
var onOff = 0;
|
||
|
|
var _oTenYears = o_box_time.getElementsByClassName('_tenyears')[0];
|
||
|
|
var _oTenYears_ul = _oTenYears.firstElementChild;
|
||
|
|
var _oTenYears_lis = _oTenYears.getElementsByTagName('li');
|
||
|
|
var _nowDate = new Date();
|
||
|
|
var _setyear = _nowDate.getFullYear();
|
||
|
|
var _setmonth = _nowDate.getMonth();
|
||
|
|
var _setdate = _nowDate.getDate();
|
||
|
|
var _relYear = _setyear;
|
||
|
|
var _relMonth = _setmonth;
|
||
|
|
var _relDate = _setdate;
|
||
|
|
var _temp_ten = 0;
|
||
|
|
initDom();
|
||
|
|
showTime();
|
||
|
|
setInterval(showTime, 1000);
|
||
|
|
|
||
|
|
function showTime() {
|
||
|
|
var date = new Date();
|
||
|
|
var h = date.getHours();
|
||
|
|
var m = date.getMinutes();
|
||
|
|
var s = date.getSeconds();
|
||
|
|
var year = date.getFullYear();
|
||
|
|
var month = date.getMonth() + 1;
|
||
|
|
var day = date.getDate();
|
||
|
|
var week = date.getDay();
|
||
|
|
var str;
|
||
|
|
str = toZero(h) + ':' + toZero(m) + ':' + toZero(s);
|
||
|
|
aDiv_time[0].innerHTML = str;
|
||
|
|
str = year + '/' + month + '/' + day + ',' + arrWeek[week];
|
||
|
|
aDiv_time[1].innerHTML = str;
|
||
|
|
}
|
||
|
|
|
||
|
|
aDiv_time[1].onclick = function () {
|
||
|
|
clearTimeout(_delay_time);
|
||
|
|
_setyear = _relYear;
|
||
|
|
_setmonth = _relMonth;
|
||
|
|
_setdate = _relDate;
|
||
|
|
showDate();
|
||
|
|
onOff = 0;
|
||
|
|
_oYears_months.style.display = 'none';
|
||
|
|
_oNormal.style.display = 'block';
|
||
|
|
_oTenYears.style.display = 'none';
|
||
|
|
for (var i = 0; i < _aLi_months.length; i++) {
|
||
|
|
_aLi_months[i].className = '';
|
||
|
|
}
|
||
|
|
_aLi_months[_setmonth].className = 'active';
|
||
|
|
};
|
||
|
|
var i;
|
||
|
|
for (i = 0; i < 3; i++) {
|
||
|
|
_aLi_months[_setmonth + i * 12].className = 'active';
|
||
|
|
}
|
||
|
|
for (i = 0; i < _aLi_months.length; i++) {
|
||
|
|
(function (n) {
|
||
|
|
_aLi_months[n].onclick = function () {
|
||
|
|
var i;
|
||
|
|
for (i = 0; i < _aLi_months.length; i++) {
|
||
|
|
_aLi_months[i].className = '';
|
||
|
|
}
|
||
|
|
_setmonth = n % 12;
|
||
|
|
for (i = 0; i < _aLi_months.length; i++) {
|
||
|
|
_aLi_months[i].className = '';
|
||
|
|
}
|
||
|
|
|
||
|
|
for (i = 0; i < 3; i++) {
|
||
|
|
_aLi_months[_setmonth + i * 12].className = 'active';
|
||
|
|
}
|
||
|
|
console.log(this.offsetLeft, this.offsetTop);
|
||
|
|
|
||
|
|
clearTimeout(_delay_time);
|
||
|
|
_delay_time = setTimeout(function () {
|
||
|
|
_aStrong[0].innerHTML = _setyear + '/' + (_setmonth + 1);
|
||
|
|
_oYears_months.style.display = 'none';
|
||
|
|
_oNormal.style.display = 'block';
|
||
|
|
|
||
|
|
|
||
|
|
_fn_block(_oNormal);
|
||
|
|
|
||
|
|
_oTenYears.style.display = 'none';
|
||
|
|
// document.title=onOff;
|
||
|
|
showDate();
|
||
|
|
onOff = 0;
|
||
|
|
}, 200);
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
})(i);
|
||
|
|
}
|
||
|
|
|
||
|
|
function _fn_block(ele) {
|
||
|
|
ele.style.transition = '0s';
|
||
|
|
ele.style.transform = 'scale(0.5)';
|
||
|
|
setTimeout(function () {
|
||
|
|
ele.style.transition = '0.3s';
|
||
|
|
ele.style.transform = 'scale(1)';
|
||
|
|
}, 10);
|
||
|
|
}
|
||
|
|
|
||
|
|
showDate();
|
||
|
|
|
||
|
|
function showDate() {
|
||
|
|
var str = '';
|
||
|
|
if (_setmonth === 0) {
|
||
|
|
str = _fn_layout(_setyear - 1, 11, _setdate) + _fn_layout(_setyear, _setmonth, _setdate) + _fn_layout(_setyear, _setmonth + 1, _setdate);
|
||
|
|
} else if (_setmonth === 11) {
|
||
|
|
str = _fn_layout(_setyear, _setmonth - 1, _setdate) + _fn_layout(_setyear, _setmonth, _setdate) + _fn_layout(_setyear + 1, 0, _setdate);
|
||
|
|
} else {
|
||
|
|
str = _fn_layout(_setyear, _setmonth - 1, _setdate) + _fn_layout(_setyear, _setmonth, _setdate) + _fn_layout(_setyear, _setmonth + 1, _setdate);
|
||
|
|
}
|
||
|
|
oDays.innerHTML = str;
|
||
|
|
_aStrong[0].innerHTML = _setyear + '/' + (_setmonth + 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
function _fn_layout(_setyear, _setmonth, _setdate) {
|
||
|
|
if (_setyear === _relYear && _setmonth === _relMonth) {
|
||
|
|
_setdate = _relDate;
|
||
|
|
} else {
|
||
|
|
_setdate = 1;
|
||
|
|
}
|
||
|
|
var _oDate = new Date();
|
||
|
|
var _date;
|
||
|
|
_oDate.setDate(_setdate);
|
||
|
|
_oDate.setMonth(_setmonth);
|
||
|
|
_oDate.setFullYear(_setyear);
|
||
|
|
_date = new Date(_oDate);
|
||
|
|
_date.setDate(0);
|
||
|
|
var _prevDays = _date.getDate();
|
||
|
|
_date = new Date(_oDate);
|
||
|
|
_date.setDate(1);
|
||
|
|
var _week = _date.getDay();
|
||
|
|
_date = new Date(_oDate);
|
||
|
|
_date.setDate(1);
|
||
|
|
_date.setMonth(_setmonth + 1);
|
||
|
|
_date.setDate(0);
|
||
|
|
var _allDays = _date.getDate();
|
||
|
|
var str = '';
|
||
|
|
var num = 0;
|
||
|
|
var i;
|
||
|
|
if (_week === 0) {
|
||
|
|
_week = 7;
|
||
|
|
}
|
||
|
|
for (i = 0; i < _week; i++) {
|
||
|
|
str = '<li class="grey">' + (_prevDays - i) + '</li>' + str;
|
||
|
|
num++;
|
||
|
|
}
|
||
|
|
for (i = 0; i < _allDays; i++) {
|
||
|
|
if (i === _setdate - 1) {
|
||
|
|
str += '<li class="active">' + (i + 1) + '</li>';
|
||
|
|
} else {
|
||
|
|
str += '<li>' + (i + 1) + '</li>';
|
||
|
|
}
|
||
|
|
num++;
|
||
|
|
}
|
||
|
|
for (i = 0; i < 42 - num; i++) {
|
||
|
|
str += '<li class="grey">' + (i + 1) + '</li>';
|
||
|
|
}
|
||
|
|
return str;
|
||
|
|
}
|
||
|
|
|
||
|
|
_aStrong[0].onclick = function () {
|
||
|
|
clearTimeout(_delay_time);
|
||
|
|
if (onOff === 0) {
|
||
|
|
_aStrong[0].innerHTML = _setyear;
|
||
|
|
_oYears_months.style.display = 'block';
|
||
|
|
_fn_block(_oYears_months);
|
||
|
|
_oNormal.style.display = 'none';
|
||
|
|
_oTenYears.style.display = 'none';
|
||
|
|
} else if (onOff === 1) {
|
||
|
|
_temp_ten = 0;
|
||
|
|
_aStrong[0].innerHTML = Math.floor(_setyear / 10) * 10 + '-' + (Math.floor(_setyear / 10) * 10 + 9);
|
||
|
|
_oYears_months.style.display = 'none';
|
||
|
|
_oNormal.style.display = 'none';
|
||
|
|
_oTenYears.style.display = 'block';
|
||
|
|
_fn_block(_oTenYears);
|
||
|
|
} else if (onOff === 2) {
|
||
|
|
_aStrong[0].innerHTML = _setyear + '/' + (_setmonth + 1);
|
||
|
|
_oYears_months.style.display = 'none';
|
||
|
|
_oNormal.style.display = 'block';
|
||
|
|
_fn_block(_oNormal);
|
||
|
|
_oTenYears.style.display = 'none';
|
||
|
|
}
|
||
|
|
var i;
|
||
|
|
for (i = 0; i < _aLi_months.length; i++) {
|
||
|
|
_aLi_months[i].className = '';
|
||
|
|
}
|
||
|
|
for (i = 0; i < 3; i++) {
|
||
|
|
_aLi_months[_setmonth + i * 12].className = 'active';
|
||
|
|
}
|
||
|
|
if (onOff === 1) {
|
||
|
|
ten(_setyear);
|
||
|
|
}
|
||
|
|
if (onOff === 2) {
|
||
|
|
showDate();
|
||
|
|
}
|
||
|
|
onOff++;
|
||
|
|
onOff = onOff % 3;
|
||
|
|
};
|
||
|
|
|
||
|
|
function ten(_year) {
|
||
|
|
_oTenYears_ul.innerHTML = _layout_tenyear(_year - 10) + _layout_tenyear(_year) + _layout_tenyear(_year + 10);
|
||
|
|
|
||
|
|
for (var i = 0; i < _oTenYears_lis.length; i++) {
|
||
|
|
_oTenYears_lis[i].onclick = function () {
|
||
|
|
for (var i = 0; i < _oTenYears_lis.length; i++) {
|
||
|
|
_oTenYears_lis[i].className === 'active' && (_oTenYears_lis[i].className = '');
|
||
|
|
}
|
||
|
|
this.className = 'active';
|
||
|
|
_setyear = parseInt(this.innerHTML);
|
||
|
|
clearTimeout(_delay_time);
|
||
|
|
_delay_time = setTimeout(function () {
|
||
|
|
onOff = 1;
|
||
|
|
_aStrong[0].innerHTML = _setyear;
|
||
|
|
_oYears_months.style.display = 'block';
|
||
|
|
_fn_block(_oYears_months);
|
||
|
|
_oNormal.style.display = 'none';
|
||
|
|
_oTenYears.style.display = 'none';
|
||
|
|
}, 200);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
_r_l[0].onclick = function () {
|
||
|
|
if (onOff === 0) {
|
||
|
|
_setmonth--;
|
||
|
|
if (_setmonth === -1) {
|
||
|
|
_setmonth = 11; //0-11
|
||
|
|
_setyear--;
|
||
|
|
}
|
||
|
|
showDate();
|
||
|
|
oDays.style.transition = '0s';
|
||
|
|
oDays.style.top = '-25.2rem';
|
||
|
|
setTimeout(function () {
|
||
|
|
oDays.style.transition = '0.5s';
|
||
|
|
oDays.style.top = '-12.6rem';
|
||
|
|
}, 10);
|
||
|
|
|
||
|
|
|
||
|
|
} else if (onOff === 1) {
|
||
|
|
_setyear--;
|
||
|
|
_oYears_months_ul.style.transition = '0s';
|
||
|
|
_oYears_months_ul.style.top = '-21.6rem';
|
||
|
|
setTimeout(function () {
|
||
|
|
_oYears_months_ul.style.transition = '0.5s';
|
||
|
|
_oYears_months_ul.style.top = '-10.8rem';
|
||
|
|
}, 10);
|
||
|
|
_aStrong[0].innerHTML = _setyear;
|
||
|
|
} else if (onOff === 2) {
|
||
|
|
_temp_ten--;
|
||
|
|
var _temp = _setyear + 10 * _temp_ten;
|
||
|
|
_aStrong[0].innerHTML = Math.floor(_temp / 10) * 10 + '-' + (Math.floor(_temp / 10) * 10 + 9);
|
||
|
|
ten(_temp);
|
||
|
|
|
||
|
|
_oTenYears_ul.style.transition = '0s';
|
||
|
|
_oTenYears_ul.style.top = '-21.6rem';
|
||
|
|
setTimeout(function () {
|
||
|
|
_oTenYears_ul.style.transition = '0.5s';
|
||
|
|
_oTenYears_ul.style.top = '-10.8rem';
|
||
|
|
}, 10);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
_r_l[1].onclick = function () {
|
||
|
|
if (onOff === 0) {
|
||
|
|
_setmonth++;
|
||
|
|
if (_setmonth === 12) {
|
||
|
|
_setmonth = 0; //0-11
|
||
|
|
_setyear++;
|
||
|
|
}
|
||
|
|
|
||
|
|
showDate();
|
||
|
|
oDays.style.transition = '0s';
|
||
|
|
oDays.style.top = '0';
|
||
|
|
setTimeout(function () {
|
||
|
|
oDays.style.transition = '0.5s';
|
||
|
|
oDays.style.top = '-12.6rem';
|
||
|
|
}, 10);
|
||
|
|
|
||
|
|
} else if (onOff === 1) {
|
||
|
|
_setyear++;
|
||
|
|
_oYears_months_ul.style.transition = '0s';
|
||
|
|
_oYears_months_ul.style.top = '0';
|
||
|
|
setTimeout(function () {
|
||
|
|
_oYears_months_ul.style.transition = '0.5s';
|
||
|
|
_oYears_months_ul.style.top = '-10.8rem';
|
||
|
|
}, 10);
|
||
|
|
_aStrong[0].innerHTML = _setyear;
|
||
|
|
} else if (onOff === 2) {
|
||
|
|
_temp_ten++;
|
||
|
|
var _temp = _setyear + 10 * _temp_ten;
|
||
|
|
_aStrong[0].innerHTML = Math.floor(_temp / 10) * 10 + '-' + (Math.floor(_temp / 10) * 10 + 9);
|
||
|
|
ten(_temp);
|
||
|
|
|
||
|
|
_oTenYears_ul.style.transition = '0s';
|
||
|
|
_oTenYears_ul.style.top = '0';
|
||
|
|
setTimeout(function () {
|
||
|
|
_oTenYears_ul.style.transition = '0.5s';
|
||
|
|
_oTenYears_ul.style.top = '-10.8rem';
|
||
|
|
}, 10);
|
||
|
|
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
function toZero(num) {
|
||
|
|
return num < 10 ? '0' + num : '' + num;
|
||
|
|
}
|
||
|
|
|
||
|
|
function _layout_tenyear(_year) {
|
||
|
|
var str = '';
|
||
|
|
var num = Math.floor(_year / 10) * 10;
|
||
|
|
var start = num - 1;
|
||
|
|
var end = num + 10;
|
||
|
|
for (var i = 0; i < 12; i++) {
|
||
|
|
if ((start + i) === _setyear && (start + i) >= num && (start + i) < end) {
|
||
|
|
str += '<li class="active">' + (start + i) + '</li>';
|
||
|
|
} else if (i === 0 || i === 11) {
|
||
|
|
str += '<li class="grey">' + (start + i) + '</li>';
|
||
|
|
} else {
|
||
|
|
str += '<li>' + (start + i) + '</li>';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return str;
|
||
|
|
}
|
||
|
|
|
||
|
|
function initDom() {
|
||
|
|
var domWeek = o_box_time.getElementsByClassName('_week')[0];
|
||
|
|
var week = [lang.SunShort, lang.MonShort, lang.TuesShort, lang.WedShort, lang.ThurShort, lang.FriShort, lang.SatShort];
|
||
|
|
var months = [lang.Jan, lang.Feb, lang.Mar, lang.Apr, lang.May, lang.June, lang.July, lang.Aug, lang.Sept, lang.Oct, lang.Nov, lang.Dec];
|
||
|
|
week.forEach(function (t) {
|
||
|
|
var span = document.createElement('span');
|
||
|
|
span.innerHTML = t;
|
||
|
|
domWeek.appendChild(span);
|
||
|
|
});
|
||
|
|
var funcAddMonth = function () {
|
||
|
|
months.forEach(function (t) {
|
||
|
|
var li = document.createElement('li');
|
||
|
|
li.innerHTML = t;
|
||
|
|
_oYears_months_ul.appendChild(li);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
funcAddMonth();
|
||
|
|
funcAddMonth();
|
||
|
|
funcAddMonth();
|
||
|
|
}
|
||
|
|
});
|