js中日历的代码

Html

<!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=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet"  href="日历样式.css"  type="text/css" />
<script  src="日历Js.js"  type="text/javascript"></script>
</head>

<body>
 <div id="table">
        <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="div1">
                   <h2>一月活动</h2>
                   <p>快过年了，大家商量着去哪玩啊</p>
                
             
             
             </div>
 </div>

</body>
</html>

css

@charset "utf-8";
/* CSS Document */

#table{
     300px;
     height:700px;
     background-color:#CCC;
     text-align:center;
     position:absolute;
     margin:0  600px 0 500px;
    }
#table ul{
       line-height:10px;
    
    }
#table ul li{
     float:left;
     padding:20px;
     list-style-type:none; 
    }
#table .div1{
     300px;
     height:200px;
     background:red;
      position:absolute;
     bottom:0px;
    }
#table ul h2 {
      color:#FFF;
    }
#table ul p {
      color:#FFF;
    }
.active{
      background-color:black;
    
    }

Js

// JavaScript Document
window.onload=function()
{    
     var arr=[
           ' 一月',
           '二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月',
     ]
     var  aTal=document.getElementById('table');
     var  aLi=aTal.getElementsByTagName('li');
     var  aDiv1=aTal.getElementsByTagName('div')[0];
     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";
                 
           aDiv1.innerHTML= '<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
            }
                
    }

相关阅读:
SimpleDateFormat
上传带进度条
cookie和session
poi导出数据
commons-fileupload上传文件
java异常处理
常用的数据库MySql数据库语句总结
流的文件操作
Java输入输出流总结（转载）
集合总结

原文地址：https://www.cnblogs.com/kangshuai/p/4741235.html