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

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

2024-02-04 11:02:52 前端知识 前端哥 904 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
标签
评论
还可以输入200
共0条数据,当前/页
会员中心 联系我 留言建议 回顶部
复制成功!