教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 js实例-数组实现简单日历的代码

js实例-数组实现简单日历的代码

发布时间:2014-10-02   编辑:jiaochengji.com
为大家介绍如何使用javascript中的数组来实现简单的日历效果,有需要的朋友,可以参考下。

代码如下:

<script type="text/javascript">
/**
 * 获取数组内容实现简单日历效果
 * by http://www.jbxue.com
*/
var myarr=[
        "第一个月比较寒冷",
        "第二月大年的日子",
        "第三月开春的日子降临了。",
        "第四个月是个准备迎接夏天到来的日子了。",
        "第五个月",
        "第六个月",
        "第七个月",
        "第八个月",
        "第九个月",
        "第十个月",
        "第十一个月",
        "第十二个月"
        ]    
window.onload=function()
{
    var ouli=document.getElementById('uli').getElementsByTagName('li');
    var otxt=document.getElementById('civ');
    var i=0;
    for(i=0;i<ouli.length;i++)
    {
        ouli[i].index=i;
        ouli[i].onclick=function()
        {
            for(i=0;i<ouli.length;i++)
            {
                ouli[i].className="";
            };
            this.className="active";
            otxt.innerHTML="<h2>"+(this.index+1)+"月活动</h2><p>"+myarr[this.index]+"</p>"
        };
    };
<script>
<ul id="uli">
   <li class="active">1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
   <li>11</li>
   <li>12</li>
</ul>

<div id="civ">
   <h2>1月活动</h2>
   <p>第一个月比较寒冷</p>
</div>

您可能感兴趣的文章:
js实例-数组实现简单日历的代码
php简单日历的实现代码(可绑定事件)
js数组声明与数组遍历的方法
php日历代码(附演示效果)
javascript日期对象格式化为字符串
为开发者准备的10款最好的jQuery日历插件
PHP汉字拼音转换、公历农历转换的实例详解
js split函数用法示例
php日历代码 php实现的高效日历代码
js数组赋值实例

[关闭]
~ ~