js简易日历

来源:互联网 发布:淘宝助理查询快递单号 编辑:程序博客网 时间:2024/05/18 02:06

该功能最终实现的结果如下图所示:


程序实现思路:

1、使用for,实现鼠标悬浮中英文切换

2、底部文字切换,使用tab选项卡思路,动态数组获取文字

3、底部文字的切换使用innerHTML


注意以下几点:

1、页面布局,注意active状态是在li上添加,

            <li class="active">                <h2>1</h2>                <p>JAN</p>            </li>            <li>                <h2>2</h2>                <p>FER</p>            </li>

2、字符串的拼接

例如:

"abg"+12+5+"dec"
此实例结果是abg125dec,若果想实现中间为17,则需要使用小括号,优先运算,

3、使用数组存储json数据,简化页面结构,将数组中内容取出放入需要的地方,如下:

var arry = [            '快过年了,大家可以商量着去哪里玩吧~',            'wewewqfeeeryue二月',            '三月份的时候了',            '四月份的时候了,马上五月',            'wuyuefen l ',            '六月份了',            'qiyuefenle',            'bayuefen l ',            'jiuyuefen',            'shiyuefen',            'shiyiyuefen',            'shieryuefen'        ]

取出来拼接如下:

text.innerHTML = "<h2>"+(this.index+1)+"月活动</h2> <p> "+arry[this.index]+"</p>"
该处需注意的是,若果是单引号,则拼接也全部使用单引号,若双引号,则相同。



原创粉丝点击