TianZD/hexo_blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

new

Browse Source
This commit is contained in:
tianzhendong
2022-04-25 13:40:12 +08:00
commit 41f187e460
349 changed files with 60741 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
source/Windows/res/components/calendar/script.js
+415
View File
@@ -0,0 +1,415 @@
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();
}
});
source/Windows/res/components/calendar/style.css
+161
View File
@@ -0,0 +1,161 @@
#_box_time *{
margin: 0;
padding: 0;
}
#_box_time li{
list-style: none;
}
#_box_time .clearfix:after{
content: '';
visibility: hidden;
display: block;
clear: both;
}
#_box_time{
color: #fff;
position: absolute;
bottom:2rem;
right: 0;
height: 25rem;
width:294px;
}
#_box_time ._h_m_s{
margin-top: 0.6rem;
height: 3.4rem;
font-size: 1.7rem;
line-height: 3.4rem;
text-indent: 1.2rem;
}
#_box_time ._y_m_d{
color: rgba(255, 255, 255, 0.50);
min-width: 12em;
margin-left: 0.8rem;
text-indent: 0.4rem;
font-size: 0.7rem;
height:1.5rem;
line-height: 1.5rem;
margin-bottom: 0.35rem;
text-align: left;
}
#_box_time ._y_m_d:hover{
cursor: pointer;
color: rgba(255, 255, 255, 0.72);
}
#_box_time .calendar {
height: 16.35rem;
}
#_box_time .calendar ._header{
height: 1.9rem;
line-height: 1.9rem;
font-size: 0.9rem;
color: #fff;
opacity: 0.8;
text-indent: 0.3rem;
position: relative;
}
#_box_time .calendar ._header strong{
padding-left: 0.9rem;
height: 1.9rem;
display: block;
width: 6.5rem;
font-weight: normal;
cursor: pointer;
}
#_box_time .calendar ._header strong:hover{
text-shadow: 0 0 3px #fff;
}
#_box_time .calendar ._header span{
cursor: pointer;
color: #fff;
position: absolute;
top:0;
right: 0;
height: 1.9rem;
text-indent: 0.65rem;
display: inline-block;
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
font-weight: bold;
}
#_box_time .calendar ._header span:hover{
text-shadow: 0 0 3px #fff;
}
#_box_time .calendar ._header .aL{
right: 58px;
}
#_box_time .calendar ._header .aR{
right: 18px;
}
#_box_time .calendar ._week {
padding: 0 0.6rem 0;
}
#_box_time .calendar ._week span{
display: block;
width: 2.4rem;
font-size: 0.55rem;
height: 1.85rem;
float: left;
line-height: 1.85rem;
text-align: center;
}
#_box_time .calendar ._days {
height: 12.5rem;
overflow: hidden;
margin: 0 0.6rem 0;
position: relative;
}
#_box_time .calendar ._days ul{
position: absolute;
top:-12.6rem;
left: 0;
}
#_box_time .calendar ._days li{
/*font-family: arial;*/
font-size: 0.9rem;
display: block;
width: 2.3rem;
height: 2rem;
float: left;
line-height: 2rem;
text-align: center;
margin: 0.05rem;
}
#_box_time ._normal{
/*display: none;*/
}
#_box_time .grey { color: rgba(236, 247, 255, 0.36); }
#_box_time .active {
box-shadow: inset 0 0 0 0.1rem rgba(255, 255, 255, 0.36), inset 0 0 0 0.2rem rgba(255, 255, 255, 0.30);
background-color: rgba(255, 255, 255, 0.25);
}
#_box_time ._years_months{
display: none;
}
#_box_time ._tenyears{
display: none;
}
#_box_time ._tenyears,._years_months{
margin-left: 0.65rem;
height: 10.8rem;
position: relative;
overflow: hidden;
}
#_box_time ._tenyears ul,#_box_time ._years_months ul{
position: absolute;
top: -10.8rem;
left: 0;
}
#_box_time ._years_months ul:hover{
/*top: -10.8rem;*/
}
#_box_time ._tenyears li,#_box_time ._years_months li{
cursor: pointer;
width: 4.15rem;
height: 3.6rem;
float: left;
line-height: 3.6rem;
text-align: center;
}
#_box_time ._tenyears li:hover,#_box_time ._years_months li:hover{
text-shadow: 0 0 1px #fff;
}