使用JavaScript和CSS样式制作一个日历

来源：互联网发布：npm 淘宝镜像 sass 编辑：程序博客网时间：2024/04/29 22:32

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: #890;
}
#tabs{
border: 10px solid #ccc;
margin:50px auto;
width: 340px;
background-color: #DDD;
text-align: center;
}
#tabs ul li{
float: left;
list-style-type: none;
width:70px;
height:65px;
border:4px solid #588;
margin:5px;
background-color:#222;
color:white;
line-height:8px;
}
#tabs .active{
color:#C66;
background-color: #fff;
}
.text{
clear: both;
margin:10px 40px;
background-color: #EEE;
padding:2px;
line-height: 14px;
}
</style>
<script type="text/javascript">
debugger;
window.onload = function(){
var array = [
"一月小寒接大寒",
"二月立春雨水连",
"惊蛰春分在三月",
"清明谷雨四月天",
"五月立夏和小满",
"六月芒种夏至连",
"七月大暑和小暑",
"立秋处暑八月间",
"九月白露接秋分",
"寒露霜降十月全",
"立冬小雪十一月",
"大雪冬至迎新年"
];

var oDiv = document.getElementById("tabs");
var aLi = oDiv.getElementsByTagName("li");
var oTxt = oDiv.getElementsByTagName("div")[0];
for (var i = 0; i< aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function(){
for(var j = 0;j<aLi.length;j++){
aLi[j].className = "";
}
this.className = "active";
oTxt.innerHTML = "<h2>" + (this.index+1) + "月活动<h2><h4>" + array[this.index] + "</h4>";
}
}
}
</script>
</head>
<body>
<div id="tabs" class="calender">
<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>
<h4>一月小寒接大寒</h4>
</div>
</div>
</body>
</html>

0 0