js简易日历（html+css+javascript）

<!DOCTYPE html><html><head><title></title></head><script type="text/javascript">window.onload=function(){var od = document.getElementById('dvi');...

唐昊

324人浏览 · 2020-03-06 18:52:43

唐昊 · 2020-03-06 18:52:43 发布

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script type="text/javascript">
	window.onload=function(){
    var od = document.getElementById('dvi');
    var od1 = od.getElementsByTagName('li');
    var px  = document.getElementById('te');
    for(var i=0;i<od1.length;i++){
    	od1[i].index=i;
    	od1[i].onmouseover=function(){
    		for (var i =0; i < od1.length;  i++) {
    			
    		   od1[i].className='';   
    		   		}
    		   		 px.innerHTML='<li style="clear: both;">\
			<h2>'+(this.index+1)+'月份</h2>\
                <p>study English</p>\
                       \</li>';
    		   this.className='avc';
    	};
    	od1[i].onmouseout=function(){
        for(var i=0;i<od1.length;i++){
        	od1[i].className='';
        }
    	};
    }

  
	};
</script>
<body>
<style type="text/css">
	 .active{

	 	width: 100px;
	 	height: 100px;
	 }
	  .active ul{
	
	  	width: 306px;
	  	height: 440px;
	  	/*padding:0;*/
           padding: 0;
	  	/*text-align: center;*/
	     		float: left;
    text-align: center;
	  	border: 1px  solid grey;
	  	margin-left: 450px;
	  }
	.active ul li{
		width: 100px;
		height: 100px;
		float: left;
		border: 1px solid grey;
		list-style: none;
        text-align: center;

       
        
	}
	.avc{
		background-color: red;
	}
	.test li{
          	float: left;
		width: 300px;
		height: 100px;
		text-align: center;
	    list-style: none;
	    margin-left: 450px;
	   border: 1px  solid black;
	
		
	
		
	    
	}
</style>

 
<div class="active" id="dvi">
	<ul>  
<li><h2>1</h2><p>月份</p></li>
<li><h2>2</h2><p>月份</p></li>
<li><h2>3</h2><p>月份</p></li>
<li><h2>4</h2><p>月份</p></li>
<li><h2>5</h2><p>月份</p></li>
<li><h2>6</h2><p>月份</p></li>
<li><h2>7</h2><p>月份</p></li>
<li><h2>8</h2><p>月份</p></li>
<li><h2>9</h2><p>月份</p></li>
<li><h2>10</h2><p>月份</p></li>
<li><h2>11</h2><p>月份</p></li>
<li><h2>12</h2><p>月份</p></li>

</ul>


</div>
<div class="test" id="te">
	<li style="clear: both;">
			<h2>1月份</h2>
<p>study English</p>

	</li>

</div>
<div class="test">

</div>
</body>
</html>