您的位置：首页 > Web前端

Ferris教程学习笔记:js示例2.13 简易JS年历

2013-12-12 14:04 791 查看

//解题思路:
将每一个月的节日保存在一个数组中，下标0开始--11
在程序中为每一个li添加一个点击事件
1:修改css属性
2:依据元素下标赋值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>简易JS年历</title>
<style type="text/css">
body,ul,li,h2,p{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
#calendar{width:248px;overflow:hidden;zoom:1;background:#eaeaea;margin:10px auto;padding:0 0 10px 10px;}
#calendar ul{overflow:hidden;zoom:1;}
#calendar li{color:#fff;float:left;width:40px;height:40px;cursor:pointer;font-size:14px;
text-align:center;background:#424242;line-height:1.3;list-style-type:none;border:1px solid #424242;
margin:10px 10px 0 0;padding:5px;}
#calendar li.current{color:#f69;background:#fff;}
#calendar li strong{display:block;font-size:18px;}

#msg{color:#666;background:#f1f1f1;border:1px solid #fff;margin:10px 10px 0 0;padding:5px;}
#msg h2{font-size:14px;}
</style>
</head>
<body>
<div id="calendar">
<ul>
<li class=""><strong>1</strong>JAN</li>
<li class=""><strong>2</strong>FER</li>
<li class=""><strong>3</strong>MAR</li>
<li class=""><strong>4</strong>APR</li>
<li class=""><strong>5</strong>MAY</li>
<li class=""><strong>6</strong>JUN</li>
<li class=""><strong>7</strong>JUL</li>
<li class=""><strong>8</strong>AUG</li>
<li class="current"><strong>9</strong>SEP</li>
<li class=""><strong>10</strong>OCT</li>
<li class=""><strong>11</strong>NOV</li>
<li class=""><strong>12</strong>DEC</li>
</ul>
<div id="msg">
<h2>
<strong>9</strong>月节日
<p>中秋节：9月10日至12日放假3天。</p>
</h2>
</div>
</div>
<script type="text/javascript">

window.onload = function(){
var oArray = [
"元旦：1月1日至3日放假三天。",
"春节：2月2日至8日放假7天。",
"妇女节：3月8日妇女节，与我无关。",
"清明节：4月3日至5日放假3天",
"劳动节：4月30日至5月2日放假3天。",
"端午节：6月4日至6日放假3天。",
"小暑：7月7日小暑。不放假。",
"七夕节：8月6日七夕节。不放假。",
"中秋节：9月10日至12日放假3天。",
"国庆节：10月1日至7日放假7天。",
"立冬：11月8日立冬。不放假。",
"艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。"
];

//解题思路:
//将每一个月的节日保存在一个数组中，下标0开始--11
//在程序中为每一个li添加一个点击事件
//1:修改css属性
//2:依据元素下标赋值
var lis = document.getElementById("calendar").getElementsByTagName("li");
var p1  = document.getElementById("msg").getElementsByTagName("p")[0];
var strong = document.getElementById("msg").getElementsByTagName("strong")[0];
var size = lis.length;
for(var i=0;i<size;i++){
lis[i].index = i;
lis[i].onclick = function(){

//清除样式
for(p in lis)lis[p].className = "";
this.className = "current";
//赋值,节日
p1.innerHTML = oArray[this.index];
//赋值,月份
strong.innerHTML = this.index+1;
}
}
};
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航