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