<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>万年历</title>
<style type="text/css">
*{margin:0;padding:0;}
.box{width:380px;height:600px;background:#ccc;margin:30px auto;padding:10px 0 0 20px }
.box ul{width:360px; height:480px; background:#f0f}
.box li{width:100px;height:100px;background:#222;color:#fff;list-style:none;line-height:100px;font-size:20px;text-align:center;float:left;margin:10px;cursor:pointer;}
#txt{width:355px;height:70px;border:2px solid red;margin-top:20px;font-size:18px;color:#00f}
.box .change{background:#fff;color:red;};
</style>
<script type="text/javascript">
window.onload = function(){
var aLi = document.getElementsByTagName("li");
var arr = ["新的一年，加油!","2月龙抬头！","3月放风筝","4月，滚去学习",
"5月，玩命心跳","6月，我用双手成就你的梦想","7月，生日快乐！","尼玛，热成狗。",
"千峰学习ing","好像有7天长假^_^","光棍节快乐，禁止淘宝","happy new year！"];
var oTxt = document.getElementById("txt");
for(var i = 0;i < aLi.length;i++){
aLi[i].index = i; //index：英文名为索引。给每个li添加一个索引，并将i（0-11）赋值给这个索引。
aLi[i].onclick = function(){
for(var j = 0;j < aLi.length;j++){
aLi[j].className = ""; //当点击li（a）后再点击li（b），则会发现li（a）的样式并没有返回初始样式，使他的className为空就好。
}
aLi[this.index].className = "change"; // 这里的this指的是当前被点击的某个li，点击之后给他添加一个className，以此修改该li的样式。
oTxt.innerHTML = arr[this.index]; //同样的，改变下面div里面的内容，已达到备忘录的效果。
}
}
}
</script>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
<div id="txt">
<p>我于杀戮之中绽放，亦如黎明前的花朵。</p>
</div>
</div>
</body>
</html>
这是效果图，大家感兴趣的可以自己修改一下css样式外观
时间： 2024-10-11 13:21:27