首页 > 代码库 > Day3-----easyCalendar
Day3-----easyCalendar
//----------------使用了innerHTML标签完成了对属性内容的引用和更改
<html>
<head><title>easyCalendar</title></head>
<style type="text/css">
.month{width: 70px;height: 70px;background: gray;float: left;margin: 5px;}
#year{width: 240px;height:450px;background: pink;text-align: center;margin: 10px auto;}
#text{width: 220px;height: 50px;background: white;float: left;margin: 10px;}
</style>
<script type="text/javascript">
window.onload=function(){
oMon=document.getElementsByClassName(‘month‘);
oTxt=document.getElementById(‘text‘);
for(var i=0;i<oMon.length;i++){
oMon[i].onmouseover=function(){
for(i=0;i<oMon.length;i++){oMon[i].style.background=‘gray‘}
this.style.background=‘white‘;
oTxt.innerHTML=(this.innerHTML)+‘ is coming.what do you want to to.‘;
}
}
}
</script>
<body>
<div id="year">
<h3>Calendar</h1>
<div class="month">January</div>
<div class="month">February</div>
<div class="month">March</div>
<div class="month">April</div>
<div class="month">May</div>
<div class="month">June</div>
<div class="month">July</div>
<div class="month">August</div>
<div class="month">September</div>
<div class="month">October</div>
<div class="month">November</div>
<div class="month">December</div>
<div id="text"></div>
</div>
</body>
</html>
Day3-----easyCalendar