javascript - 选择标签下拉列表中的年龄？
问题描述
我正在做一个小项目，我创建了一个小的 HTML 文本文件。希望将下拉菜单中的给定出生日期解析为我可以通过控制流运行的年龄。
我创建了下拉列表以使用<select>标签选择出生日期，然后是选项值。然后使用<input type="submit">
我试图在不使用任何外部库或框架的情况下做到这一点。
我怎样才能得到这个人的年龄？
解决方案
这不完全是，我建议你使用一个库，但这是一个近似值：
function calcAge() {
let day = document.getElementById('day').value;
let month = document.getElementById('month').value;
let year = document.getElementById('year').value;
let birthday = new Date(year, month, day);
document.getElementById('result').innerHTML = ~~(((Date.now() - birthday) / (31557600000)));
}<label id="date_of_birth">Date of Birth:<br />
<select class="first" name="date_of_birth:day" tabindex="7" id="day">
<option value="">
<!-- -->
</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="date_of_birth:mon" tabindex="8" id="month">
<option value="">
<!-- -->
</option>
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="date_of_birth:year" tabindex="9" id="year">
<option value="">
<!-- -->
</option>
<option value="1920">1920</option>
<option value="1921">1921</option>
<option value="1922">1922</option>
<option value="1923">1923</option>
<option value="1924">1924</option>
<option value="1925">1925</option>
<option value="1926">1926</option>
<option value="1927">1927</option>
<option value="1928">1928</option>
<option value="1929">1929</option>
<option value="1930">1930</option>
<option value="1931">1931</option>
<option value="1932">1932</option>
<option value="1933">1933</option>
<option value="1934">1934</option>
<option value="1935">1935</option>
<option value="1936">1936</option>
<option value="1937">1937</option>
<option value="1938">1938</option>
<option value="1939">1939</option>
<option value="1940">1940</option>
<option value="1941">1941</option>
<option value="1942">1942</option>
<option value="1943">1943</option>
<option value="1944">1944</option>
<option value="1945">1945</option>
<option value="1946">1946</option>
<option value="1947">1947</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select>
</label>
<button onclick="calcAge()">
calculate
</button>
<br>
<div id="result" text="asdaaa">
</div>推荐阅读
- reactjs - 链接到具有正确 id 的页面，但 fetch 未找到具有此 id 的元素
- intellij-idea - 如何在 Ubuntu 的 IntelliJ 项目中修复这些警告“外部文件更改同步可能很慢”和“当前 inotify(7) 监视限制太低”
- c# - 使用代码更改 ASP Web 窗体按钮的 Enable 属性？
- java - 操作方法：在分布式（集群）Web 服务器中运行的 Web 应用程序中的 JPA 实体管理器
- jupyter-notebook - 每次在某处抛出错误时都需要重新启动 Jupyter/IPython 内核
- python - Python tkinter 图像不显示
- regex - 正则表达式匹配包含特定单词的行
- python - ValueError：执行 sum_product() 时出错：如果未指定“索引”选项，则最后一个参数值必须是变量或表达式对象
- python - DjangoRestFramework : 为 ModelViewSet 的单独功能创建单独的 URL
- javascript - Discord.js - AFK 在一个小时左右后消失