console
function getMonthDay (year, month) {
return new Date(year, month + 1, 0).getDate();
}
function getFirstDay (year, month) {
var firstDay = new Date(year, month, 1).getDay();
return firstDay == 0 ? 7 : firstDay;
}
function getLastMonthDay (year, month) {
return new Date(year, month, 0).getDate();
}
function leftPad (num) {
return num < 10 ? "0" + num : num + "";
}
function getTds () {
var _tds = document.getElementsByTagName('td'),
ary = [],
len = _tds.length;
for (i = 0; i < len; i++) {
if (_tds[i].parentNode.parentNode.nodeName == 'TBODY') {
_tds[i].onclick = (function (e) {
return function () {
var oldSelect = document.getElementById('selected');
oldSelect && oldSelect.removeAttribute('id');
e.id = 'selected';
}
})(_tds[i]);
ary.push(_tds[i]);
}
}
return ary;
}
function setTable (year, month) {
var _now = new Date(),
_nowYear = _now.getFullYear(),
_nowMonth = _now.getMonth(),
_nowDate = _now.getDate();
_tds = getTds(),
len = _tds.length,
monthDay = getMonthDay(year, month),
firstDay = getFirstDay(year, month),
lastMonthDay = getLastMonthDay(year, month),
_selectMonth = document.getElementById('selectMonth')
_selectMonth.innerHTML = year + "年" + leftPad(month + 1) + "月";
for (var i = 0; i < len; i++) {
if (_tds[i].className == 'today') {
_tds[i].className = '';
}
if (_tds[i].id == 'selected') {
_tds[i].removeAttribute('id');
}
if (i < firstDay - 1) {
_tds[i].innerHTML = (i + 1) + lastMonthDay - (firstDay - 1);
_tds[i].style.color = "#969696";
} else if (i < firstDay + monthDay - 1) {
_tds[i].innerHTML = (i + 1) - (firstDay - 1);
_tds[i].style.color = "#E1E1E1";
if (_nowYear == year && _nowMonth == month && _tds[i].innerHTML == _nowDate) {
_tds[i].className = 'today';
_tds[i].id = 'selected';
}
} else {
_tds[i].innerHTML = (i + 1) - ((firstDay - 1) + monthDay);
_tds[i].style.color = "#969696";
}
}
}
function upAndDown (e) {
var num = document.getElementById('selectMonth').innerHTML.match(/\d+/g),
year = parseInt(num[0]),
month = parseInt(num[1]);
if (e.className == 'down') {
month ++;
if (month > 12) {
year ++;
month = 1;
}
} else {
month --;
if (month < 1) {
year --;
month = 12;
}
}
setTable(year, month - 1);
}
function countTime () {
var _now = new Date(),
year = _now.getFullYear(),
month = _now.getMonth(),
day = _now.getDate(),
week = _now.getDay(),
hours = _now.getHours(),
minutes = _now.getMinutes(),
seconds = _now.getSeconds();
document.getElementById('countTime').innerHTML = leftPad(hours) + ":" + leftPad(minutes) + ":" + leftPad(seconds);
setTimeout("countTime()", 500);
}
function showDate () {
var _now = new Date(),
year = _now.getFullYear(),
month = _now.getMonth(),
day = _now.getDate(),
week = _now.getDay(),
weekAry = ["日", "一", "二", "三", "四", "五", "六"];
document.getElementById('showDate').innerHTML = year + "年" + leftPad(month + 1) + "月" + day + "日,星期" + weekAry[week];
}
window.onload = function () {
var _now = new Date(),
year = _now.getFullYear(),
month = _now.getMonth(),
day = _now.getDate();
countTime();
showDate();
setTable(year, month, day);
}
<body>
<p>已实现上下箭头切换月份功能</p>
<p>点击日期选择月份功能、日期时间设置功能和鼠标滚轮切换月份均未实现</p>
<div id="r">
<span id="countTime"></span>
<span id="showDate" class="yellowSpan"></span>
<div id="panelHead">
<span id="selectMonth"></span>
<img class="down" onclick="upAndDown(this)" src="http://sandbox.runjs.cn/uploads/rs/186/mf579xno/down.png" />
<img class="up" onclick="upAndDown(this)" src="http://sandbox.runjs.cn/uploads/rs/186/mf579xno/up.png" />
</div>
<table>
<thead>
<tr>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
<td>日</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<span class="yellowSpan">日期和时间设置</span>
</div>
</body>
html, body, div, table, thead, tbody, tr, td, span {margin: 0; padding: 0; font-size: 21px; line-height: 30px; text-align: center; background-color: #555; color: #FFF; }
#r {margin: auto; padding: 15px; width: 330px; height: 440px; border: 2px solid #858585; box-shadow: 0 0 4px #858585; }
#r>span {display: block; text-align: left; text-indent: 16px; }
#r .yellowSpan {height: 30px; font-size: 14px; color: #EEFF59; cursor: pointer; }
#r #countTime {height: 40px; font-size: 45px; }
#r #showDate {margin-bottom: 20px; }
#r #panelHead {height: 30px; }
#r #panelHead>span#selectMonth {float: left; cursor: default; text-indent: 18px; }
#r #panelHead>.up, #r #panelHead>.down {cursor: default; padding: 0; border: 0; widows: 28px; height: 30px;float: right; margin:0 10px; }
#r table {width: 100%; }
#r table td {padding: 0px; height: 35px; border: 2px solid transparent; }
#r table thead td {font-weight: bold; cursor: default; font-size: 14px; }
#r table tbody td {cursor: default; }
#r table tbody td#selected {border: 2px solid #BBCC29; box-shadow: 0 0 4px #BBCC29; }
#r table tbody td.today {border: 2px solid #BBCC29; box-shadow: 0 0 4px #BBCC29; background-color: #BBCC29; }
#r table tbody td#selected.today {border: 2px solid #000; box-shadow: 0 0 2px 2px #BBCC29; }
#r table tbody td:hover {border: 2px solid #858585; box-shadow: 0 0 4px #858585; }
#r table tbody td#selected:hover {border: 2px solid #9EAB29; box-shadow: 0 0 4px #9EAB29; }
#r table tbody td#selected.today:hover {border: 2px solid #000; box-shadow: 0 0 4px #9EAB29; }