-
Notifications
You must be signed in to change notification settings - Fork 0
/
05.简易日历(有问题).html
115 lines (112 loc) · 2.58 KB
/
05.简易日历(有问题).html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS制作简易日历</title>
<style type="text/css">
.clear{
clear:both;
}
#tab{
width: 216px;
border: 20px solid #aaa;
margin: 0 auto;
}
#tab #content{
background: #ccc;
padding-bottom: 30px;
}
#tab ul{
margin: 0;
padding: 0px;
background: #AAAAAA;
}
#tab li{
list-style: none;
width: 70px;
height: 70px;
border: 1px solid #999999;
float: left;
color: white;
background: #333;
text-align: center;
}
#tab li h2{
margin: 10px 0px 0px 0px;
}
#tab h1{
margin: 0;
line-height: 80px;
}
#tab li p{
margin: 0px;
}
#tab .active{
background-color: #FFFFFF;
color: red;
}
/*
原先没有写#tab,样式无法实现效果.
原因:选择器的优先级——特指度
id 100
class 10
element 1
哪个特指度计算结果大 ,浏览器就以哪个为优先
参考：https://www.cnblogs.com/wangfupeng1988/p/4285251.html
*/
</style>
<script type="text/javascript">
window.onload=function(){
var arr=[
"一月快过年啦",
"二月段US谁都不阿萨德撒",
"三月",
"四月",
"五月",
"六月",
"年代初",
"十多年",
"cnncsldkisdncc",
"撒上看的哪款",
"不错看看",
"十二月吧哈哈神经病三"
];
var oDiv=document.getElementById("tab");
var aLi=oDiv.getElementsByTagName("li");
var oTxt=oDiv.getElementsByTagName("div")[1];
for (var i=0;i<aLi.length;i++) {
aLi[i].index=i;
aLi[i].onmouseover=function(){
for (var i=0;i<aLi.length;i++) {
aLi[i].className="";
}
this.className="active";
oTxt.innerHTML="<h1>"+(this.index+1)+"月活动</h1><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>Feb</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>Oca</p></li>
<li><h2>11</h2><p>Nov</p></li>
<li><h2>12</h2><p>Dec</p></li>
</ul>
<div class="clear"></div>
<div id="content">
<h1>1月活动</h1><p>一月活动快过年啦</p>
</div>
</div>
</body>
</html>