一、项目介绍
- 项目名称：万年历
- 项目简介：点击实现主要月份切换，并实现备忘录的更新
- 项目目标：用简洁的代码实现美观且通顺的需求
二、项目逻辑
- 有一张万年历
- 用无序列表实现每一个月份的排序
- 遍历所有的月份，进行active的设置
- 换月份实现同步换备忘录
三、项目实现
1. style
<style>
*{margin: 0;list-style: none;padding: 0;}
#box1{width: 405px;height: 700px;background: #ecfff4;border: 1px solid #a3a3a3;margin: 100px auto;padding-top: 40px;padding-left: 40px;cursor: pointer;}
#box1 li{width: 100px;height: 100px;background: rgb(171, 211, 180);border: 1px solid black;float: left;margin: 10px;text-align: center;color: rgb(25, 107, 69);}
ul li:nth-child(10){margin-bottom: 30px;}
li h2{font-size: 35px;line-height: 60px;}
li p{font-size: 30px;}
.box2{float: left;width: 360px;height: 160px;background: rgba(230, 252, 210, 0.623);border: 1px solid rgb(46, 94, 62);margin-left: 2px;padding-left: 20px;padding-top: 20px;box-sizing: border-box;}
#box1 .active{background: rgb(43, 95, 79);color: rgb(228, 255, 240);border: 1px solid black;}
.box2 h3{font-size: 26px;color: cadetblue;line-height: 50px;}
.box2 p{font-size: 24px;color: cadetblue;}
</style>
2. body
<body>
<div id="box1">
<ul>
<li class="active"><h2>1</h2><p>JAN</p></li>
<li><h2>2</h2><p>JAN</p></li>
<li><h2>3</h2><p>JAN</p></li>
<li><h2>4</h2><p>JAN</p></li>
<li><h2>5</h2><p>JAN</p></li>
<li><h2>6</h2><p>JAN</p></li>
<li><h2>7</h2><p>JAN</p></li>
<li><h2>8</h2><p>JAN</p></li>
<li><h2>9</h2><p>JAN</p></li>
<li><h2>10</h2><p>JAN</p></li>
<li><h2>11</h2><p>JAN</p></li>
<li><h2>12</h2><p>JAN</p></li>
</ul>
<div class="box2">
<h3>1月活动</h3>
<p>'今天我很开心！😊'</p>
</div>
</div>
</body>
3. js
var arr = ['今天我很开心！😊',
'今天我很快乐！😼',
'今天我很幸福！✌',
'今天我很难过😔',
'今天我很伤心😟',
'今天我很激动🤩',
'今天我很愤怒🤬',
'今天我很安静🤫',
'今天我很努力！✊',
'今天也要继续努力💪',
'明年快要到来🔪',
'平安顺遂🍎']
var all = document.querySelectorAll("#box1 li")
var oh = document.querySelector(".box2 h3")
var op = document.querySelector(".box2 p")
for(var i=0;i<all.length;i++){
all[i].abc = i;
all[i].onclick = function () {
for(var j=0;j<all.length;j++){
all[j].className = '';
}
this.className = 'active';
oh.innerHTML = this.abc + 1 + '月活动';
op.innerHTML = arr[this.abc];
}
}
