<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script>
onload = function () {
var box1 = document.getElementById("box"); // 提取ul
var tExt = document.getElementsByTagName("div")[0]; //提取div
var month = document.getElementssByTagName("li"); // 声明变量保存所有的月份
var len = month.length;
function mOnth(){
for(var i = 0; i<len;i++){
month[i].index = i;
month[i].onclick = function () {
for(var j = 0;j<len;j++){
month[i].className = ""; // 遍历所有的li 中的class为空(清除)
}
this.className = "active"; // 给每一个遍历到的li元素,添加css中的一个class名为active的样式
tExt.innerHTML = (this.index+1) + "月份"; //输出文本框中的内容,只有数字变化,所以拼接每一个li的下标数+1(下标从0开始的);
}
}
}
mOnth ();
}
</script>
<style>
body{
background: black;
}
*{
margin: 0;padding: 0;
}
.active{
background: white;
color: yellow;
}
ul{
height: 400px;
width: 700px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background: #ccc;
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
li{
transition: all 1s;
margin-top: 10px;
list-style: none;
height: 80px;
width: 145px;
background: red;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
li:hover{
transform: scale(1.2);
transform: rotateZ(360deg);
}
li p {
font-size: 25px;
font-weight: 700;
font-family: "微软雅黑";
}
.text{
width: 240px;
height: 58px;
text-align: center;
line-height: 58px;
font-size: 30px;
font-family:"微软雅黑";
}
</style>
<body>
<ul id="box">
<li class="active">
<p>1</p>
<a>Jan</a>
</li>
<li>
<p>2</p>
<a>Jan</a>
</li>
<li >
<p>3</p>
<a>Jan</a>
</li>
<li>
<p>4</p>
<a>Jan</a>
</li>
<li>
<p>5</p>
<a>Jan</a>
</li>
<li>
<p>6</p>
<a>Jan</a>
</li>
<li>
<p>7</p>
<a>Jan</a>
</li>
<li>
<p>8</p>
<a>Jan</a>
</li>
<li>
<p>9</p>
<a>Jan</a>
</li>
<li>
<p>10</p>
<a>Jan</a>
</li>
<li>
<p>11</p>
<a>Jan</a>
</li>
<li>
<p>12</p>
<a>Jan</a>
</li>
<div class="text">
1月份
</div>
</ul>
</body>
</html>