<!DOCTYPE html>
<html>
<head>
<title>简易Js年历</title>
<style type="text/css">
*{ margin: 0px; padding: 0px; text-align: center; }
ul{ list-style-type: none; }
.bpp6{ width: 513px; height: 300px; background: #eaeaea; margin: 60px auto; }
.bpp6 ul{ width: 493px; height: 170px; padding: 10px 0 20px 20px; }
.bpp6 ul li{ color: #fff; float: left; width: 50px; height: 50px; cursor: pointer; font-size: 14px; text-align: center;
background: #424242; line-height: 25px; border: 1px solid #424242; margin: 20px 20px 0 0; padding: 5px; }
.bpp6 ul li p{ font-weight: bold; }
.bpp6 ul li.current{ color: #F69; background: #fff; font-size: 15px;}
.monthtext{ width: 489px; height: 68px; border: 2px solid #fff; line-height: 35px; margin: 5px; color: #666; font-size: 15px; padding: 5px; }
</style>
<script src="../../jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="bpp6">
<ul></ul>
<div class="monthtext">
<h2>
<strong>number</strong>
月节日
</h2>
<p>text</p>
</div>
</div>
<script type="text/javascript">
// 创建类用于储存数据
var monthdata = [
{number: '1', month: "JAN", text: "元旦:1月1日至3日放假三天。"},
{number: '2', month: "FER", text: "春节:2月2日至8日放假7天。"},
{number: '3', month: "MAR", text: "妇女节:3月8日妇女节,与我无关。"},
{number: '4', month: "APR", text: "清明节:4月3日至5日放假3天。"},
{number: '5', month: "MAY", text: "劳动节:4月30日至5月2日放假3天。"},
{number: '6', month: "JUN", text: "端午节:6月4日至6日放假3天。"},
{number: '7', month: "JUL", text: "小暑:7月7日小暑。不放假。"},
{number: '8', month: "AUG", text: "七夕节:8月6日七夕节。不放假。"},
{number: '9', month: "SEP", text: "中秋节:9月10日至12日放假3天。"},
{number: '10', month: "OCT", text: "国庆节:10月1日至7日放假7天。"},
{number: '11', month: "NOV", text: "立冬:11月8日立冬。不放假。"},
{number: '12', month: "DEC", text: "艾滋病日:12月1日;废除奴隶制国际日:12月2日。"}
];
$(document).ready(function(){
// 清楚样式函数
var items = document.getElementsByClassName("bpp6")[0].getElementsByTagName("ul")[0].getElementsByTagName("li");
var clean = function(){
for(i = 0; i < monthdata.length; i++){
items[i].className = "";
}
}
// 生成内容
for(var i in monthdata){
$(".bpp6 ul").append("<li>" + "<p>" + monthdata[i].number + "</p>" + "<span>" + monthdata[i].month + "</span>" + "</li>");
}
items[5].className = "current";
$(".monthtext h2 strong").text("6");
$(".monthtext p").text(monthdata[5].text);
// 遍历事件
$(".bpp6 ul li").each(function(i){
$(this).mouseenter(function(){
clean();
this.className = "current";
$(".monthtext h2 strong").text(i + 1);
$(".monthtext p").text(monthdata[i].text);
});
});
});
</script>
</body>
</html>
效果图: