この記事の元のテキストへのリンク：https：//blog.csdn.net/xzk9381/article/details/110931387
JSを使用して簡単なカレンダー機能を実装します。ご不明な点がございましたら、以下のコメントセクションでご相談ください。コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
#topNode {
width: 420px;
float: left;
border: 1px solid black;
border-radius: 10px;
margin-left: 500px;
margin-top: 300px;
background-color: #ccc;
}
#date {
width: 100%;
height: 20px;
line-height: 20px;
text-align: center;
}
#prev {
float: left;
cursor: pointer;
margin-left: 5px;
}
#next {
float: right;
cursor: pointer;
margin-right: 5px;
}
#week {
width: 100%;
height: 20px;
line-height: 20px;
float: left;
margin-top: 5px;
}
#week span {
float: left;
width: 60px;
height: 100%;
line-height: 20px;
text-align: center;
}
#dateList li {
float: left;
width: 60px;
height: 40px;
text-align: center;
line-height: 40px;
}
.red {
color: red;
}
.today {
border-radius: 20px;
background-color: red;
color: white;
}
</style>
<script type="text/javascript">
onload = function (){
var myDate = new Date(),
myYear = myDate.getFullYear(),
myMonth = myDate.getMonth();
year.innerHTML = myYear;
month.innerHTML = myMonth + 1;
getAllDate()
var m = month.innerHTML,
y = year.innerHTML;
prev.onclick = function (){
m--;
if ( m == 0 ){
m = 12;
y--;
}
month.innerHTML = m;
year.innerHTML = y;
getAllDate()
}
next.onclick = function (){
m++;
if ( m == 13 ){
m = 1;
y++;
}
month.innerHTML = m;
year.innerHTML = y;
getAllDate()
}
function getAllDate(){
function getMonthDays(year,month){
var myDate = new Date(year,month,0);
return myDate.getDate();
}
function getFirstDay(year,month){
var myDate = new Date(year,month - 1,1),
week = myDate.getDay();
( week ==0 )?week == 7:week;
return week;
}
dateList.innerHTML = ''
for ( var n = 0;n < getFirstDay(year.innerHTML,month.innerHTML) - 1;n++){
var myLi = document.createElement('li')
dateList.appendChild(myLi)
}
var days = getMonthDays(year.innerHTML,month.innerHTML)
for (var n = 1;n <= days;n++){
var myLi = document.createElement('li')
myLi.innerHTML = n;
dateList.appendChild(myLi)
}
for (var n = 0;n < dateList.children.length;n++){
if (n % 7 == 5 || n % 7 == 6){
dateList.children[n].classList.add('red');
}
if (dateList.children[n].innerHTML == myDate.getDate()){
if (month.innerHTML == myDate.getMonth() + 1 && year.innerHTML == myDate.getFullYear()){
dateList.children[n].classList.add('today');
}
}
}
}
}
</script>
</head>
<body>
<div id="topNode">
<div id="date">
<span id="prev">prev</span>
<span id="year"></span>年
<span id="month"></span>月
<span id="next">next</span>
</div>
<div id="week">
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span style="color: red">六</span>
<span style="color: red">日</span>
</div>
<ul id="dateList"></ul>
</div>
</body>
</html>
この記事の元のテキストへのリンク：https：//blog.csdn.net/xzk9381/article/details/110931387