首页 > 程序开发 > web前端 > JavaScript > 正文
js万年历
2017-03-21 09:29:00       个评论    来源:gengyunzhao的博客  
收藏    我要投稿

js万年历

<!DOCTYPE <strong>html</strong>>
<<strong>html </strong><strong>lang=</strong><strong>"en"</strong>>
<<strong>head</strong>>
    <<strong>meta </strong><strong>charset=</strong><strong>"UTF-8"</strong>>
    <<strong>title</strong>><strong>万年历</strong></<strong>title</strong>>
    <<strong>style</strong>>
        <strong>* </strong>{
            list-style: none;
            margin: 0;
            padding: 0;
        }
 
 
        <strong>#box </strong>{
            margin: 50px auto;
            width: 500px;
            height: 300px;
            border: 1px solid deepskyblue;
            border-radius: 4px;
        }
 
        <strong>#top </strong>{
            padding: 20px;
            border-bottom: 2px solid dodgerblue;
        }
 
        <strong>#top </strong><strong>select </strong>{
            margin-right: 10px;
        }
 
        <strong>#top #query </strong>{
            width: 60px;
            margin-left: 20px;
        }
 
        <strong>#con </strong>{
            width: 100%;
        }
 
        <strong>#con #week </strong>{
            width: 100%;
        }
 
        <strong>#week </strong><strong>li </strong>{
            display: inline-block;
            width: 13%;
            font-size: 14px;
            font-family: "<strong>微软雅黑</strong>";
            text-align: center;
        }
        <strong>#con #day</strong>{
            width: 100%;
        }
        <strong>#day </strong><strong>li</strong>{
            display: inline-block;
            width: 13%;
            text-align: center;
        }
 
    </<strong>style</strong>>
</<strong>head</strong>>
<<strong>body</strong>>
<<strong>div </strong><strong>id=</strong><strong>"box"</strong>>
    <<strong>div </strong><strong>id=</strong><strong>"top"</strong>>
        <<strong>select </strong><strong>name=</strong><strong>"year" </strong><strong>id=</strong><strong>"year"</strong>>
            <<strong>option </strong><strong>value=</strong><strong>""</strong>><strong>请选择年份</strong></<strong>option</strong>>
        </<strong>select</strong>>
        <<strong>label </strong><strong>for=</strong><strong>"year"</strong>><strong>年</strong></<strong>label</strong>>
 
        <<strong>select </strong><strong>name=</strong><strong>"month" </strong><strong>id=</strong><strong>"month" </strong><strong>title=</strong><strong>"</strong><strong>月</strong><strong>"</strong>>
            <<strong>option </strong><strong>value=</strong><strong>""</strong>><strong>请选择月份</strong></<strong>option</strong>>
        </<strong>select</strong>>
        <<strong>label </strong><strong>for=</strong><strong>"month"</strong>><strong>月</strong></<strong>label</strong>>
        <<strong>button </strong><strong>id=</strong><strong>"query"</strong>><strong>查询</strong></<strong>button</strong>>
    </<strong>div</strong>>
    <<strong>div </strong><strong>id=</strong><strong>"con"</strong>>
        <<strong>ul </strong><strong>id=</strong><strong>"week"</strong>>
            <<strong>li</strong>><strong>一</strong></<strong>li</strong>>
            <<strong>li</strong>><strong>二</strong></<strong>li</strong>>
            <<strong>li</strong>><strong>三</strong></<strong>li</strong>>
            <<strong>li</strong>><strong>四</strong></<strong>li</strong>>
            <<strong>li</strong>><strong>五</strong></<strong>li</strong>>
            <<strong>li</strong>><strong>六</strong></<strong>li</strong>>
            <<strong>li</strong>><strong>日</strong></<strong>li</strong>>
        </<strong>ul</strong>>
        <<strong>ul </strong><strong>id=</strong><strong>"day"</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
            <<strong>li</strong>></<strong>li</strong>>
        </<strong>ul</strong>>
    </<strong>div</strong>>
</<strong>div</strong>>
<<strong>script</strong>>
    <strong>window</strong>.<strong>onload </strong>= <strong>function </strong>() {
        <strong>var </strong><strong>listYear </strong>= <strong>document</strong>.<strong>getElementById</strong>(<strong>"year"</strong>);
        <strong>var </strong><strong>listMonth </strong>= <strong>document</strong>.<strong>getElementById</strong>(<strong>"month"</strong>);
        <strong>var </strong><strong>btn_query </strong>= <strong>document</strong>.<strong>getElementById</strong>(<strong>"query"</strong>);
        <strong>var </strong><strong>dayList </strong>= <strong>document</strong>.<strong>getElementById</strong>(<strong>"day"</strong>).<strong>getElementsByTagName</strong>(<strong>"li"</strong>);
 
        <strong>/*</strong><strong>添加年</strong><strong>*/
</strong><strong>        </strong><strong>for </strong>(<strong>var </strong><strong>i </strong>= 1995; <strong>i </strong>< 2018; <strong>i</strong>++) {
            <strong>var </strong><strong>option </strong>= <strong>document</strong>.<strong>createElement</strong>(<strong>"option"</strong>);
            <strong>option</strong>.<strong>value </strong>= <strong>i</strong>;
            <strong>option</strong>.<strong>innerHTML </strong>= <strong>i</strong>;
            <strong>listYear</strong>.<strong>appendChild</strong>(<strong>option</strong>);
        }
 
        <strong>/*</strong><strong>添加月</strong><strong>*/
</strong><strong>        </strong><strong>for </strong>(<strong>var </strong><strong>j </strong>= 1; <strong>j </strong>< 13; <strong>j</strong>++) {
            <strong>var </strong><strong>newOption </strong>= <strong>document</strong>.<strong>createElement</strong>(<strong>"option"</strong>);
            <strong>newOption</strong>.<strong>value </strong>= <strong>j</strong>;
            <strong>newOption</strong>.<strong>innerHTML </strong>= <strong>j</strong>;
            <strong>listMonth</strong>.<strong>appendChild</strong>(<strong>newOption</strong>);
        }
 
        <strong>/*</strong><strong>判断是否为闰年</strong><strong>*/
</strong><strong>        /*</strong><strong>公元年数能被</strong><strong>4</strong><strong>整除但不能被</strong><strong>100</strong><strong>整除或者能被</strong><strong>400</strong><strong>整除的为闰年其他为平年</strong><strong>*/
</strong><strong>        </strong><strong>function </strong><strong>isLeap</strong>(<strong>year</strong>) {
            <strong>/*</strong><strong>用</strong><strong>res</strong><strong>标记</strong><strong>0</strong><strong>为平年,</strong><strong>1</strong><strong>为闰年</strong><strong>*/
</strong><strong>            </strong><strong>var </strong><strong>res </strong>= 0;
            <strong>if </strong>(<strong>year </strong>% 100 == 0) {
                <strong>if </strong>(<strong>year </strong>% 400 == 0) {
                    <strong>res </strong>= 1;
                } <strong>else </strong>{
                    <strong>res </strong>= 0;
                }
            } <strong>else </strong>{
                <strong>if </strong>(<strong>year </strong>% 4 == 0) {
                    <strong>res </strong>= 1
                } <strong>else </strong>{
                    <strong>res </strong>= 0;
                }
            }
            <strong>return </strong><strong>res</strong>;
 
        }
 
        <strong>/*</strong><strong>存储一个月的天数数组</strong><strong>*/
</strong><strong>        </strong><strong>var </strong><strong>m_day </strong>= [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 
        <strong>btn_query</strong>.<strong>addEventListener</strong>(<strong>"click"</strong>, <strong>a</strong>);
        <strong>function </strong><strong>a</strong>() {
            <strong>/*</strong><strong>清空上一个月残留的数字</strong><strong>*/
</strong><strong>            </strong><strong>for</strong>(<strong>var </strong><strong>i </strong>=0;<strong>i</strong><<strong>dayList</strong>.<strong>length</strong>;<strong>i</strong>++){
                <strong>dayList</strong>[<strong>i</strong>].<strong>innerHTML</strong>=<strong>''</strong>;
            }
 
            <strong>if </strong>(<strong>listYear</strong>.<strong>value </strong>== <strong>'' </strong>|| <strong>listMonth</strong>.<strong>value </strong>== <strong>''</strong>) {
                <strong>alert</strong>(<strong>"</strong><strong>请选择年份或月份</strong><strong>"</strong>)
            } <strong>else </strong>{
                <strong>var </strong><strong>year </strong>= <strong>parseInt</strong>(<strong>listYear</strong>.<strong>value</strong>);
                <strong>/*</strong><strong>默认日期的月份是从</strong><strong>0</strong><strong>月开始的,而获取的月份的值是从</strong><strong>1</strong><strong>开始的,因此要减一</strong><strong>*/
</strong><strong>                </strong><strong>var </strong><strong>month </strong>= <strong>parseInt</strong>(<strong>listMonth</strong>.<strong>value</strong>)-1;
                <strong>if </strong>(<strong>isLeap</strong>(<strong>year</strong>) == 1) {
                    <strong>m_day</strong>[1] = 29;
                } <strong>else if </strong>(<strong>isLeap</strong>(<strong>year</strong>) == 0) {
                    <strong>m_day</strong>[1] = 28;
                }
                <strong>/*</strong><strong>获取某年某月的第一天,直接使用初始化日期的方法初始化这一天</strong><strong>*/
</strong><strong>                </strong><strong>var </strong><strong>someDay </strong>=<strong>new </strong><strong>Date</strong>(<strong>year</strong>,<strong>month</strong>,1);
 
                <strong>/*</strong><strong>获取每个月的第一天是星期几</strong><strong>*/
</strong><strong>                </strong><strong>var </strong><strong>firtDay </strong>= <strong>someDay</strong>.<strong>getDay</strong>();
 
                <strong>/*</strong><strong>这里的</strong><strong>month</strong><strong>已经减</strong><strong>1</strong><strong>了</strong><strong>*/
</strong><strong>                </strong><strong>for</strong>(<strong>var </strong><strong>i </strong>=0;<strong>i</strong><<strong>m_day</strong>[<strong>month</strong>];<strong>i</strong>++){
                    <strong>/*</strong><strong>判断每个月的第一天是不是星期天,如果是从第二行显示</strong><strong>*/
</strong><strong>                    </strong><strong>if </strong>(<strong>firtDay</strong>==1){
                        <strong>dayList</strong>[<strong>i</strong>+<strong>firtDay</strong>+6].<strong>innerHTML</strong>=<strong>i</strong>+1;
                    }<strong>else if </strong>(<strong>firtDay</strong>==0){
                        <strong>dayList</strong>[<strong>i</strong>+<strong>firtDay</strong>+6].<strong>innerHTML</strong>=<strong>i</strong>+1;
                    }<strong>else</strong>{
                        <strong>dayList</strong>[<strong>i</strong>+<strong>firtDay</strong>-1].<strong>innerHTML</strong>=<strong>i</strong>+1;
                    }
                }
 
            }
        }
    }
</<strong>script</strong>>
</<strong>body</strong>>
</<strong>html</strong>>

 

点击复制链接 与好友分享!回本站首页
上一篇:Node.js安装及环境配置(Windows)
下一篇:vue.jswindows下开发环境搭建
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做实用的IT技术学习网站