简单的年历制作

来源：互联网发布：淘宝联盟身份验证编辑：程序博客网时间：2024/04/29 07:12

看似简单的代码，如果用心写，很快能写完，写好。加上自己发表，也同时再次练习，加深熟练度

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<title></title>
<title>简易日历 </title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}

#tab {
margin: 50px;
}

#tab ul {
width: 220px;
}

#tab li {
width: 60px;
height: 60px;
background: #000;
color: #fff;
text-align: center;
font-size: 16px;
line-height: 40px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
position: relative;
}

#tab .active {
border: 1px solid #000;
background: #fff;
color: orange;
box-sizing: border-box;
}
#tab h2{
line-height: 40px;
}

#tab ul p{
height: 16px;
position: absolute;
top: 20px;
left: 17px;
}
.text{
clear: both;
width: 200px;
height: 100px;
border: 1px solid #000;
background: #D8D8D8;
}
.text p{

}
</style>
<script>
window.onload = function() {
var arr = [
'快过年了，大家可以商量着去哪玩吧～',
'二月,快到过年了',
'三月雨水变多了，热气渐渐开始热了',
'四月，清明来了，好多人都回家祭祖',
'五月，端午',
'六月，儿童的欢乐',
'七月，建党纪念',
'八月，建军节',
'九月，开学了',
'十月，国庆，也快入秋了',
'十一月天气开始冷了',
'十二月，冬天要来了',
];
var oDiv = document.getElementById('tab');
var aLi = oDiv.getElementsByTagName('li');
var oTxt = oDiv.getElementsByTagName('div')[0];
// alert(typeof(oTxt));
for (var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onclick = function() {
for (var i = 0; i < aLi.length; i++) {
aLi[i].className = '';
}
this.className = 'active';
oTxt.innerHTML = '<h2>' + (this.index + 1) + '月活动</h2><p>' + arr[this.index] + '</p>';
};
}
};
</script>
</head>

<body>
<div id="tab" class="calendar">
<ul>
<li class="active">
<h2>1</h2>
<p>JAN</p>
</li>
<li>
<h2>2</h2>
<p>FER</p>
</li>
<li>
<h2>3</h2>
<p>MAR</p>
</li>
<li>
<h2>4</h2>
<p>APR</p>
</li>
<li>
<h2>5</h2>
<p>MAY</p>
</li>
<li>
<h2>6</h2>
<p>JUN</p>
</li>
<li>
<h2>7</h2>
<p>JUL</p>
</li>
<li>
<h2>8</h2>
<p>AUG</p>
</li>
<li>
<h2>9</h2>
<p>SEP</p>
</li>
<li>
<h2>10</h2>
<p>OCT</p>
</li>
<li>
<h2>11</h2>
<p>NOV</p>
</li>
<li>
<h2>12</h2>
<p>DEC</p>
</li>
</ul>

<div class="text">
<h2>1月活动</h2>
<p>你们毕业啦，准备工作咯</p>
</div>
</div>
</body>

</html>

阅读全文

0 0