使用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工具包