dom日历
Posted wjr2018
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了dom日历相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#all{width: 400px;
height: 500px;
background: #ccc;
margin: auto;
}
#foot{
width: 90%;
height: 100px;
margin-top: 20px;
background: #F1F1F1;
margin: auto;
}
td{
text-align: center;
background: #424242;
color: #fff;
font-weight: bold;
}
</style>
<script>
var tds = null; //定义单元格为空的全局对象，用来取值
var divDom =null;//定义来显示文字信息的div为空的全局变量，用来取值
window.onload = function(){//文旦加载完成后来执行这个函数
tds = document.getElementsByTagName("td");//给单元格赋值，找到他
divDom = document.getElementById("foot");//给div对象赋值，找到他
addEvent();//调取这个事件函数
}
//添加事件
function addEvent(){
for(var i =0;i<tds.length;i++){
tds[i].onmouseover = function(){
for(var j =0;j<tds.length;j++){
tds[j].style.background = "#424242";
tds[j].style.color = "#fff";
}
this.style.background = "#fff";
this.style.color = "#f00";
divDom.innerHTML= this.getAttribute("data");
}
}
}
</script>
</head>
<body>
<div id="all">
<table width="90%" height="380" align="center" cellpadding="20">
<tr>
<td data="这是1月">1 <br>JAN</td>
<td data="这是2月">2 <br>FER</td>
<td data="这是3月">3 <br>MAR</td>
</tr>
<tr>
<td data="这是4月">4 <br>APR</td>
<td data="这是5月">5 <br>MAY</td>
<td data="这是6月">6 <br>JUN</td>
</tr>
<tr>
<td data="这是7月">7 <br>JUL</td>
<td data="这是8月">8 <br>AUG</td>
<td data="这是9月">9 <br>SEP</td>
</tr>
<tr>
<td data="这是10月">10<br>OCT</td>
<td data="这是11月">11<br>NOV</td>
<td data="这是12月">12<br>DEC</td>
</tr>
</table>
<div id="foot">
</div>
</div>
</body>
</html>
以上是关于dom日历的主要内容，如果未能解决你的问题，请参考以下文章