马黑黑 发表于 2023-12-29 08:39

您芳龄几何

本帖最后由 马黑黑 于 2023-12-29 12:07 编辑 <br /><br /><div id="mydiv" style="padding: 10px;margin: 20px;">
        <input id="birthday" type="date" min="1900-01-01" max="2023-12-31" value="2023-12-31" />
        <input id="btnOk" type="button" value="确定" />
        <p><br></p>
        <p id="output">请选择您的出生日期……</p>
</div>

<script>

let now = new Date();
birthday.defaultValue = birthday.max = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;

btnOk.onclick = () => {
        let ar = birthday.value.split('-');
        let age = new Date().getFullYear() - new Date(birthday.value).getFullYear();
        output.innerHTML = `您的生日是 ${ar}月${ar}日，芳龄${age}岁`;
};

birthday.onfocus = () => output.innerHTML = '选择或输入完毕请点击确定按钮';

</script>

马黑黑 发表于 2023-12-29 08:46

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

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

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

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

马黑黑 发表于 2023-12-29 08:47

代码是十分简单的，旨在解决核心问题（获取用户输入的生日、报一下芳龄等信息），可以根据需要进一步完善：
<div id="mydiv" style="padding: 10px;margin: 20px;">
        <input id="birthday" type="date" min="1900-01-01" max="2023-12-31" value="2023-12-31" />
        <input id="btnOk" type="button" value="确定" />
        <p><br></p>
        <p id="output">请选择您的出生日期……</p>
</div>

<script>

let now = new Date();
birthday.defaultValue = birthday.max = `${now.getFullYear()}-${now.getMonth()}-${now.getDate()}`;

btnOk.onclick = () => {
        let ar = birthday.value.split('-');
        let age = new Date().getFullYear() - new Date(birthday.value).getFullYear();
        output.innerHTML = `您的生日是 ${ar}月${ar}日，芳龄${age}岁`;
};

birthday.onfocus = () => output.innerHTML = '选择或输入完毕请点击确定按钮';

</script>

红影 发表于 2023-12-29 09:56

最高年龄1900年的，到现在123岁{:4_173:}

红影 发表于 2023-12-29 09:58

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

起个网名好难 发表于 2023-12-29 11:54

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

getMonth 的取值范围是 0-11

所以getMonth 要加一

马黑黑 发表于 2023-12-29 12:08

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

getMonth 的取值范围是 0-11


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

马黑黑 发表于 2023-12-29 12:09

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

还算年轻

马黑黑 发表于 2023-12-29 12:09

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

这是H5新加的东东

红影 发表于 2023-12-29 12:37

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

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

红影 发表于 2023-12-29 12:37

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

哦哦，这个东西挺好的{:4_187:}

马黑黑 发表于 2023-12-29 12:39

红影 发表于 2023-12-29 12:37
你应该把1700和1600的加进去才对，否则三四百岁的人怎么算啊
1970年1月1日是回退极限了，计算机系统时间以这个为起点，当然不影响计算出更老的年龄

马黑黑 发表于 2023-12-29 12:41

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

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

亦是金 发表于 2023-12-29 13:06

我算了算，芳龄18{:4_205:}，我年轻我骄傲！

红影 发表于 2023-12-29 13:09

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

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

红影 发表于 2023-12-29 13:09

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

新增的东西一般这样，会越来越完善的{:4_187:}

马黑黑 发表于 2023-12-29 17:26

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

H5出来很久了

马黑黑 发表于 2023-12-29 17:27

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

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

马黑黑 发表于 2023-12-29 17:31

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

祝你永远青春靓丽{:4_170:}

侃大山 发表于 2023-12-29 18:30

随便选了个日子，就得出岁数了。{:5_106:}
页: [1] 2 3 4 5 6
查看完整版本: 您芳龄几何