html下拉选之年份选择

最新推荐文章于 2024-05-20 19:30:34 发布
最新推荐文章于 2024-05-20 19:30:34 发布
阅读量1.4w 收藏 12
点赞数 5
文章标签： html 年份选择
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31798731/article/details/65448326
版权

这是之前的一个选择日期的需求，挺少做这些的，存个底，方便到时候拿出来用用生气

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>

</head>
<body>
<select id="year" οnchange="load_day()">
<option>请选择</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
</select>
<select id="month" οnchange="load_day()">
<option>请选择</option>

<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select id="day">
<option>请选择</option>

</select>
</body>
<script type="text/javascript">
function day31(){
return[1,2,3,4,5,6,7,8,9,10,11,
12,13,14,15,16,17,18,19,20,21,
22,23,24,25,26,27,28,29,30,31]
}
function day30(){
return[1,2,3,4,5,6,7,8,9,10,11,
12,13,14,15,16,17,18,19,20,21,
22,23,24,25,26,27,28,29,30]
}
function day29(){
return[1,2,3,4,5,6,7,8,9,10,11,
12,13,14,15,16,17,18,19,20,21,
22,23,24,25,26,27,28,29]
}
function day28(){
return[1,2,3,4,5,6,7,8,9,10,11,
12,13,14,15,16,17,18,19,20,21,
22,23,24,25,26,27,28]
}
var days31=day31();
var days30=day30();
var days29=day29();
var days28=day28();
//加载每个月的天数
function load_day(){
//1.获取年
var y=document.getElementById("year");
var m=document.getElementById("month");
var d=document.getElementById("day");
//刷新每月的天数
d.innerHTML = "<option>请选择</option>";

var y1=parseInt(y.value) ;
var m1=parseInt(m.value) ;
if (m1<8&&m1%2==1||m1>=8&&m1%2==0) {

for(var i =0;i<days31.length;i++){
var opt = document.createElement("option");
opt.innerHTML = days31[i];
d.appendChild(opt);
}
} else if((y1%400==0||y1%100!=0&&y1%4==0)&&m1==2){
for(var i =0;i<days29.length;i++){
var opt = document.createElement("option");
opt.innerHTML = days29[i];
d.appendChild(opt);
}
}else if(m1==2){
for(var i =0;i<days28.length;i++){
var opt = document.createElement("option");
opt.innerHTML = days28[i];
d.appendChild(opt);
}
}else {
for(var i =0;i<days30.length;i++){
var opt = document.createElement("option");
opt.innerHTML = days30[i];
d.appendChild(opt);
}
}
}
</script>
</html>
qq_31798731
关注
  • 5
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html怎么实现年月日的选择,利用select实现年月日三级联动的日期选择效果【推荐】...
weixin_39875028的博客
06-10 6081
前面的话关于select控件，可能年月日三级联动的日期选择效果是最常见的应用了。本文是选择框脚本的实践，下面将对日期选择效果进行详细介绍规划默认情况下，年、月、日分别由3个select控件组成，id分别为sel1，sel2，sel3。它们且所包含的option[0]的值，分别为'年'、'月'、'日'年份范围为1900-2100，月份范围为1-12，天的范围为1-31年份范围、月份范围是不变的。而天...
自动更新页脚版权时间
weixin_51508523的博客
05-06 517
公司官网页脚版权信息，时间自动更新，针对 php，html，vue 给出了3种方案；也可为 php，html，vue 替换静态时间，实现时间信息自动更新提供实现思路
html只选择年份,ant design vue 日期选择器只选择年份
weixin_34169503的博客
06-03 1327
mode="year"placeholder="请选择年份"format=‘YYYY‘v-model="form.yearQuarter"style="width:100%":open=‘yearShowOne‘@openChange="openChangeOne"@panelChange="panelChangeOne"/>年度打开关闭状态，true为打开，false为关闭yearShow...
html5 input date
Zoe_Wang_ing的专栏
01-29 2427
HTML5 拥有多个可供选取日期和时间的新输入类型： date - 选取日、月、年 month - 选取月、年 week - 选取周和年 time - 选取时间（小时和分钟） datetime - 选取时间、日、月、年（UTC 时间） datetime-local - 选取时间、日、月、年（本地时间） 下面的例子允许您从日历中选取一个日期： 实例Date:
HTML5表单控件：新时代的交互魔法手册
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-20 1081
虽然HTML5表单控件提供了很多便利，但原生样式可能不符合你的设计需求。这时候，CSS和JavaScript来帮忙。/* 移除默认样式 *//* 自定义样式 */HTML5表单控件的加入，无疑为前端开发者提供了更强大的工具箱，使得表单设计更加丰富和高效。掌握这些新特性，不仅可以提升用户体验，还能有效提升开发效率和安全性。但请记住，技术是不断进步的，保持好奇心，持续探索，才是成为前端高手的秘诀所在。互动话题：在你的项目中，有没有遇到过HTML5表单控件的特别应用场景或难题？你是如何解决的？
html年月日下拉联动菜单 年月日三下拉框联动
旋转的紫色星系
08-11 5965
年月日三下拉框联动 请选择 年 选择 月 选择 日 <!-- function YYYYMMDDstart() { MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; /
日期下拉列表，年月日分开的！！
01-04
日期下拉列表，年月日分开的！！简单来说就是两个数字之间的下拉列表
html自动年份版权,网页复制内容时自动添加版权链接信息
weixin_30062561的博客
05-31 371
JS 仿知乎复制文章末尾自动添加字符串当别人复制你的文章内容时，会在文章末尾自动添加一串字符。将此代码放置在body之前即可$("body").bind('copy', function (e) {if (typeof window.getSelection == "undefined") return; //IE8 及更老的版本不兼容var body_element = document.get...
如何在页面完美显示版权符号（转）
weixin_30603633的博客
04-15 1439
在页面里加上版权符号，HTML代码里对应输入&copy; &copy;就是版权符号在HTML里的代码，但是很多页面在设计的时候，用的字体是宋体，就算没有设置字体，中文系统下默认用的还是宋体，那么就导致的显示出来的版权符号变形。让我们来看看用宋体显示出来的是什么样子，代码和效果： <span style="font-family:宋体;">Copyright &c...
JavaScript 日期下拉选择器
11-14
这个组件通常由三部分组成：年份、月份和日期的下拉菜单，这三个部分会联动显示，即用户在选择年份时，月份和日期的选择会自动更新，确保所选日期的有效性。同时，它能够正确处理闰年的情况，如2月会有29天的选项，...
js实现起始年份下拉列表
08-08
一旦选择了开始年份，结束年份的选项将动态生成并显示，且所有的结束年份都大于等于所选的开始年份。这个功能可以很好地应用于日期选择组件，提高用户体验。 此外，这个实例也涉及到了JavaScript的基础知识，如DOM...
Select下拉式日期选择菜单.rar
07-10
年、月、日联动显示意味着当用户在一个下拉框中选择一个值（如年份）时，其他两个下拉框（月份和日期）会自动更新其可选范围。例如，如果用户选择了2023年，那么月份下拉框只会显示1至12，日期下拉框则会根据2023年...
jQuery实现动态生成年月日级联下拉列表示例
11-29
总结起来，通过使用jQuery，我们可以轻松地创建一个动态的年月日级联下拉列表，它能够根据用户的年份和月份选择自动更新日期的选项。这种方法使得用户在填写日期时更加便捷，同时也提高了表单数据的准确性。此外，这...
日期下拉菜单select
01-31
`<select>`是HTML中定义下拉菜单的元素，它允许用户从一组预定义的选项中进行选择。在创建日期下拉菜单时，每个`<select>`将分别对应年、月和日。例如： ```html <select id="year"></select> <select id="month">...
html选择出生年月插件,JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】...
weixin_33274728的博客
06-03 467
本文实例讲述了JavaScript实现的自动生成 年月范围 选择功能。分享给大家供大家参考，具体如下：近日做项目涉及到日期选择，为了用户界面友好，于是加入了一年内的年月段的查询功能，先看效果会自动判断当前年份以下为html代码 其中用到了 Jquery 和 struts 标签 但是这两个都不是重要的 主要书 用于赋值 和 取值方便还用到了 WdatePicker 插件进行具体日期选择$(funct...
Html 选择时间框
qq_40685414的博客
05-26 2977
这里的type实际上是可以为“date”、“week”、“month”、“time”、“datetime”和“datetime-local”My97DatePicker（WdatePicker）日期控件用法。
HTML时间日期选择器
热门推荐
zhu1243961271的博客
10-22 1万+
时间日期选择器
html做一个年份月份天数选择器,怎样实现一个datePicker（日期选择）组件
weixin_39637919的博客
06-04 1369
百度前端技术学院上有一个任务，要实现一个日期选择组件，本文由此而来~看看需求组件默认一直呈显示状比抖朋要插支一圈不者地态通插新，都次过是宗现制的前搭待个断前能绿和过某种方式选择年、月，选择了年月后，日期列表做直分调浏器代，刚求的一学础过功互有解小久宗点差维含数如数相应切换通用能境战求道，重件开又是正易里是了些之框过单击某个具体的日期进行日期选求圈分件圈浏第用代是水刚道。的它还择组第干种用大是使处来...
年月日三联动下拉框(无刷新)
luyesql的专栏
10-10 1784
WebForm2 function YYYYMMDDstart() { MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //先给年下拉框赋内容 var y = new Date().getFullYear(); for (var i = (y-30); i document.form1.YYYY.options.add(
监听下拉菜单中所选择的年份和月份，发送 AJAX 请求获取数据库中所选年份中该月份的数据并输出到php页面，请生成完整代码
05-26
下面是一个简单的例子，实现了监听下拉菜单选择年份和月份，并通过 AJAX 请求获取数据库中所选年份中该月份的数据并输出到 PHP 页面。 HTML 代码： ```html <!DOCTYPE html> <html> <head> <title>监听下拉菜单选择年份和月份</title> <meta charset="utf-8"> </head> <body> <label for="year">年份：</label> <select id="year" name="year"> <?php // 生成年份选项 for($i = 2021; $i >= 2000; $i--) { echo '<option value="' . $i . '">' . $i . '</option>'; } ?> </select> <label for="month">月份：</label> <select id="month" name="month"> <?php // 生成月份选项 for($i = 1; $i <= 12; $i++) { echo '<option value="' . $i . '">' . $i . '</option>'; } ?> </select> <button id="submit">查询</button> <div id="result"></div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function() { // 监听查询按钮点击事件 $('#submit').click(function() { var year = $('#year').val(); var month = $('#month').val(); // 发送 AJAX 请求获取数据 $.ajax({ type: 'POST', url: 'get_data.php', data: { year: year, month: month }, success: function(data) { // 显示获取的数据 $('#result').html(data); } }); }); }); </script> </body> </html> ``` PHP 代码（get_data.php）： ```php <?php // 获取提交的年份和月份 $year = $_POST['year']; $month = $_POST['month']; // 连接数据库 $conn = mysqli_connect('localhost', 'username', 'password', 'database'); if(!$conn) { die('连接数据库失败：' . mysqli_connect_error()); } // 查询指定年份和月份的数据 $sql = "SELECT * FROM table WHERE YEAR(date) = $year AND MONTH(date) = $month"; $result = mysqli_query($conn, $sql); if(mysqli_num_rows($result) > 0) { // 输出数据 while($row = mysqli_fetch_assoc($result)) { echo $row['field1'] . ' ' . $row['field2'] . '<br>'; } } else { echo '没有数据'; } // 断开数据库连接 mysqli_close($conn); ?> ``` 注意事项： - 在实际使用中，需要根据自己的数据库表和字段进行修改。 - 为了简化示例，这里使用了 jQuery 库，如果项目中没有使用 jQuery 可以使用原生 JavaScript 实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值