JS简易日历

最新推荐文章于 2022-11-22 03:43:31 发布

Cc_JoJo

最新推荐文章于 2022-11-22 03:43:31 发布

阅读量479

点赞数

分类专栏： web前端文章标签： html 日历 class javascript

本文链接：https://blog.csdn.net/caohoucheng/article/details/72716851

版权

web前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

JS简易日历

实现思路：

——类似选项卡，只是只有一个div负责显示内容
——使用到innerHTML

数组的使用

——定义：arr=【1,2,3】
——使用：arr【0】

效果预览

这里写图片描述

html页面布局

<body>
<div id="main" class="calender">
  <ul>
    <li class="active"><h2>1</h2> <p>Jan</p></li>
    <li><h2>2</h2><p>Feb</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="content"> </div>
</div>
</body>

CSS样式

* {
    margin: 0;
    padding: 0;
    list-style: none;
}
.calender {
    background:#ccc;
    margin: auto;
    width: 240px;
    height:auto;
}
li {
    float: left;
    border: solid 5px;
    width: 50px;
    height: 50px;
    background:#666;
    text-align: center;
    float: left;
    color:white;
}
.calender div {
    float: left;
    background:#666;
    height: 270px;
    width: 240px;
    text-align:center;
}
.active {
    background:white;
    color:pink;
}

js实现

<script>
window.onload=function(){
    var oDiv=document.getElementById('main');
    //获取一组元素
    var oLi=oDiv.getElementsByTagName('li');
    var oTxt=oDiv.getElementsByTagName('div')[0];
    var arr=[
    '这是1月',
    '这是2月',
    '这是3月',
    '这是4月',
    '这是5月',
    '这是6月',
    '这是7月',
    '这是8月',
    '这是9月',
    '这是10月',
    '这是11月',
    '这是12月'
    ];
    //获得每一个li
    for(var i=0;i<oLi.length;i++){

        oLi[i].index=i;
        oLi[i].onmouseover=function(){
            //给每一个li设置样式为空
            for(var i=0;i<oLi.length;i++)
            {
               oLi[i].className=''; 
            }
            //当前li样式为.active
            this.className='active';
            //给div添加Html
            oTxt.innerHTML='<h2>'+(this.index+1)+'月</h2><p>'+arr[this.index]+'</p>';
        };
    }
    };
</script>