日历

最新推荐文章于 2021-05-21 15:53:01 发布

「已注销」

最新推荐文章于 2021-05-21 15:53:01 发布

阅读量413

点赞数

分类专栏： html+css+js 文章标签： js

本文链接：https://blog.csdn.net/RanAzhe/article/details/67692212

版权

html+css+js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>日历</title>
<style>
body{ background:blue;}
.main{ margin:50px auto 0; width:400px; height: 600px; background:#999;}
ul{ width:300px; height: 400px; margin:0 auto; padding: 10px;}
li{ display:inline-block; width:80px; height:80px; background:#333; margin:10px; float:left; color: #fff; text-align: center;}
h2{ margin:0;}
.active{ background: #aaa;}
.text{ width:300px; height: 100px; background: #ccc; margin:0 auto; border:1px solid #fff;}
</style>
<script>
window.οnlοad=function()
{
  var arr=[//为了减少麻烦
    '春节快到了，好开心啊……',
    '二月份走亲访友好热闹',
    '三月份春天就要到啦',//","一定要注意啦必须用英文下面的
    '四月清明节',
    '五月五一劳动节',
    '六一儿童节',
    '七月份有个情人节',
    '八一建军节',
    '九月份是开学的季节',
    '十月份国庆节',
    '十一月底是我的生日',
    '十二月是一年最后的一个月'
  ];
  var oDiv=document.getElementById('tab');//先获取tab元素
  var oLi=oDiv.getElementsByTagName('li');//里面的元素再从tab里面找
  var atxt=oDiv.getElementsByTagName('div')[0];//用的是它的第一个
  for( var i=0;i<oLi.length;i++)//做一下循环给所有的li都加上事件
  {
    oLi[i].index=i;//给所有li加一个index（也就是li的编号）
    oLi[i].οnmοuseοver=function ()
    {
      for(var i=0;i<oLi.length;i++)//当鼠标移入的时候给它做一个循环把所有的li的className都去掉
      {
        oLi[i].className='';
      }
        this.className='active';//去掉后给当前事件的元素加一个className
        atxt.innerHTML='<h2>'+(this.index+1)+'月份</h2><p>'+arr[this.index]+'</p>'
    };//'++'字符串拼接；'+arr[this.index]+'：如果是第0个li我就取数组的底0个元素
  }
};
</script>
</head>
<body>
<div id="tab" class="main">
  <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="text">
    <h2>1月份</h2>
    <p>春节快到了，好开心啊……</p>
  </div>
</div>
</body>
</html>