7.做一个简单的日历

最新推荐文章于 2025-12-15 06:58:03 发布

原创最新推荐文章于 2025-12-15 06:58:03 发布 · 642 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #日历

本文介绍了一个使用JavaScript实现的简单月份切换效果示例。通过点击不同的列表项来更改显示的月份，并更新页面上的文本内容。该示例展示了如何利用DOM操作实现基本的交互功能。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

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>