首页 前端知识 使用HTML5和JS实现日期下拉框功能

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:52 前端知识 前端哥 879 1000 我要收藏

使用HTML5和JS实现日期下拉框功能
如图所示:
在这里插入图片描述
代码如下:

            <center>
                <span style="font-size:26pt;color:red;">部门年度考核表(</span>
                <span style="font-size:26pt;color:red;">
                    <select id="yearDegree" name="yearDegree" style="font-size:26pt;color:red;appearance: none;" class="year" value=""></select>
                </span>
                <span style="font-size:26pt;color:red;">年度)</span>
            </center>

JS代码:


```html

```javascript
<script language="javascript" type="text/javascript" >
    $(function(){
        year();
    });
    function year(){
        var sele = document.getElementsByTagName("select");
        var year;
        var option;
        var value;
        for (var i=0; i<sele.length; i++) {
            if (sele[i].getAttribute("class") == "year") {//对于固有属性,也可以.属性名,由于class属性同时是关键字,需要.className 方式使用
                //此处需getAttribute(属性名)方法,不能用.属性名的方式,firefox和chrome不兼容.value方式,IE可以
                value=sele[i].getAttribute("value");
                if(value && /^\d+$/.test(value)){
                    year=parseInt(value);
                }else{
                    year=new Date().getFullYear();
                }
                for(var j=year-10;j<year+20;j++){
                    //option创建方式还有var option=new Option('text','value');但IE不支持,firefox和chrome均可
                    option=document.createElement("option");
                    option.value=j;
                    option.innerHTML=j;
                    if(j==year){
                        option.selected="selected";
                    }
                    sele[i].appendChild(option);
                }
            }
        }
    }
</script>

记住,还需要一个jquery工具包
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1267.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!