您芳龄几何

马黑黑

请选择您的出生日期……

马黑黑

html5的 input 标签的 type（类型）中，基于日期的有 type="date"、type="month"  等少数几个，本例使用 date 类型作为选择出生日期的选取器。

选取器选择方式，可以输入，年月日可各自输入，也可以鼠标操作。

然后利用 JS 内置对象 date() 处理用户的输出，给出一些信息。

已经出生的人不可能出生与未来，故此，需要处理一下日期的期限，input type="date" 有 min、max、value 属性，利用它们，结合JS，可以设定我们希望的范围。

马黑黑

代码是十分简单的，旨在解决核心问题（获取用户输入的生日、报一下芳龄等信息），可以根据需要进一步完善：

1. <div id="mydiv" style="padding: 10px;margin: 20px;">
   
2.         <input id="birthday" type="date" min="1900-01-01" max="2023-12-31" value="2023-12-31" />
   
3.         <input id="btnOk" type="button" value="确定" />
   
4.         <p><br></p>
   
5.         <p id="output">请选择您的出生日期……</p>
   
6. </div>
   
7. 
   
8. <script>
   
9. 
   
10. let now = new Date();
    
11. birthday.defaultValue = birthday.max = `${now.getFullYear()}-${now.getMonth()}-${now.getDate()}`;
    
12. 
    
13. btnOk.onclick = () => {
    
14.         let ar = birthday.value.split('-');
    
15.         let age = new Date().getFullYear() - new Date(birthday.value).getFullYear();
    
16.         output.innerHTML = `您的生日是 ${ar[1]}月${ar[2]}日，芳龄${age}岁`;
    
17. };
    
18. 
    
19. birthday.onfocus = () => output.innerHTML = '选择或输入完毕请点击确定按钮';
    
20. 
    
21. </script>

复制代码

红影

最高年龄1900年的，到现在123岁

红影

这个代码并不简单呢，需要对input 标签的关于日期的类型熟悉才行呢

起个网名好难

有意思的猜年龄程序片段。

getMonth 的取值范围是 0-11

所以getMonth 要加一

马黑黑

起个网名好难 发表于 2023-12-29 11:54
有意思的猜年龄程序片段。

getMonth 的取值范围是 0-11

嗯，这个我知道，可是设定限制日期的那句JS没加上。我练手做的日历是处理了这个问题。一楼已修改，谢谢。

马黑黑

红影 发表于 2023-12-29 09:56
最高年龄1900年的，到现在123岁

还算年轻

马黑黑

红影 发表于 2023-12-29 09:58
这个代码并不简单呢，需要对input 标签的关于日期的类型熟悉才行呢

这是H5新加的东东

红影

马黑黑 发表于 2023-12-29 12:09
还算年轻

你应该把1700和1600的加进去才对，否则三四百岁的人怎么算啊

红影

马黑黑 发表于 2023-12-29 12:09
这是H5新加的东东

哦哦，这个东西挺好的

马黑黑

红影 发表于 2023-12-29 12:37
你应该把1700和1600的加进去才对，否则三四百岁的人怎么算啊

1970年1月1日是回退极限了，计算机系统时间以这个为起点，当然不影响计算出更老的年龄

马黑黑

红影 发表于 2023-12-29 12:37
哦哦，这个东西挺好的

H5有不少东东的，就是粗糙一点

亦是金

我算了算，芳龄18，我年轻我骄傲！

红影

马黑黑 发表于 2023-12-29 12:39
1970年1月1日是回退极限了，计算机系统时间以这个为起点，当然不影响计算出更老的年龄

哦哦，这个还是有极限的啊。

红影

马黑黑 发表于 2023-12-29 12:41
H5有不少东东的，就是粗糙一点

新增的东西一般这样，会越来越完善的

马黑黑

红影 发表于 2023-12-29 13:09
新增的东西一般这样，会越来越完善的

H5出来很久了

马黑黑

红影 发表于 2023-12-29 13:09
哦哦，这个还是有极限的啊。

只是预设一个时间节点，就像公元一样，他是针对计算机的，是计算机的公元元年

马黑黑

亦是金 发表于 2023-12-29 13:06
我算了算，芳龄18，我年轻我骄傲！

祝你永远青春靓丽

侃大山

随便选了个日子，就得出岁数了。