引流HTML单页面,选择出生年月日,然后计算出自己从出生至今活了多天。
直接复制代码保存为html即可/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算天数</title>
<style>
body {
background-image: linear-gradient(90deg, rgba(60, 10, 30, .04) 3%, transparent 0), linear-gradient(1turn, rgba(60, 10, 30, .04) 3%, transparent 0);
background-size: 20px 20px;
background-position: 50%;
background-repeat: repeat;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.title {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
label {
display: block;
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
select {
display: block;
font-size: 16px;
padding: 5px;
margin-bottom: 20px;
}
button {
background-color: #4CAF50;
color: white;
font-size: 16px;
border: none;
padding: 10px;
cursor: pointer;
}
.result {
font-size: 20px;
font-weight: bold;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="title">计算天数</div>
<div>
<label>出生年份:</label>
<select id="year">
<option value=""></option>
<script>
for (var i = new Date().getFullYear(); i >= 1900; i--) {
document.write("<option value='" + i + "'>" + i + "</option>");
}
</script>
</select>
</div>
<div>
<label>出生月份:</label>
<select id="month">
<option value=""></option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div>
<label>出生日期:</label>
<select id="day">
<option value=""></option>
</select>
</div>
<button onclick="calculate()">计算</button>
<div class="result" id="result"></div>
<div style="width: 100%;">
<a href="https://y.goolibao.com/"><img style="display: block;max-width: 50%;margin: 0 auto;" src="https://y.goolibao.com/content/uploadfile/tpl_options//logoimg.png"></a>
</div>
</div>
<script>
function calculate() {
var year = document.getElementById("year").value;
var month = document.getElementById("month").value;
var day = document.getElementById("day").value;
if (!year || !month || !day) {
alert("请选择出生年月日!");
return;
}
var birth = new Date(year, parseInt(month) - 1, day);
var today = new Date();
var days = Math.floor((today - birth) / (1000 * 60 * 60 * 24));
document.getElementById("result").textContent = "您从出生至今已经活了" + days + "天!";
}
function updateDays() {
var year = document.getElementById("year").value;
var month = document.getElementById("month").value;
var day = document.getElementById("day");
// 根据年份和月份计算日期数
if (year && month) {
var daysInMonth = new Date(year, parseInt(month), 0).getDate();
day.innerHTML = "";
for (var i = 1; i <= daysInMonth; i++) {
var option = document.createElement("option");
option.value = i < 10 ? "0" + i : i;
option.text = i;
day.add(option);
}
} else {
day.innerHTML = "<option value=''></option>";
}
}
// 监听年份和月份的变化
document.getElementById("year").addEventListener("change", updateDays);
document.getElementById("month").addEventListener("change", updateDays);
</script>
</body>
</html>
版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!