不败君
使用HTML和JS开发生命计算器
2020-03-15 11:56:23
围观(3474)
上周在某个群里看到有人分享了一个“生命计算器”，今天周末无聊，就想着“造个轮子”实现一次这个计算器。
效果图：
DEMO：生命计算
和群里的那个效果差不多，其实实现这个计算器挺简单的，下面就直接上代码
<!DOCTYPE html>
<html>
<head>
<title>生命计算 - www.bubaijun.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
<style type="text/css">
body{
background: #eee;
}
.box{
max-width: 500px;
width: 80%;
margin: 0 auto;
text-align: center;
margin-top: 15%;
background: #fff;
padding: 30px;
border-radius: 3px;
line-height: 50px;
}
.lab{
max-width: 130px;
width: 20%;
display: inline-block;
}
.content{
max-width: 360px;
width: 70%;
display: inline-block;
text-align: left;
}
.input{
padding: 5px;
border-radius: 3px;
border: 1px solid #ddd;
max-width: 250px;
width: 100%;
}
.start{
width: 130px;
height: 30px;
border-radius: 3px;
border: none;
background: #0ae;
color: #fff;
}
.info{
line-height: 20px;
display: none;
}
.copyright{
margin-top: 20px;
text-align: center;
font-size: 12px;
}
.copyright a{
color: #000;
}
</style>
</head>
<body>
<div class="box">
<div class="lab">生日:</div>
<div class="content">
<input type="date" id="birthday" class="input" value="2020-03-15">
</div>
<div class="lab">寿命:</div>
<div class="content">
<input type="number" id="lifetime" placeholder="请输入期望活到多少岁" class="input">
</div>
<button class="start" id="start">计 算</button>
<div class="info" id="info">
<p>到目前，您已经生活了 <b id="lifetime_start"></b> 天</p>
<p>假如您的寿命是到 <b id="lifetime_end"></b> 结束,还能生活 <b id="lifetime_days"></b> 天</p>
</div>
</div>
<div class="copyright">
<p>cherish life</p>
<p>www.bubaijun.com</p>
<p>Copyright © <a href="https://www.bubaijun.com">不败君</a> 粤ICP备18102917号-1</p>
</div>
<script type="text/javascript">
document.getElementById("start").onclick = function(e)
{
var birthday = document.getElementById("birthday");
var lifetime = document.getElementById("lifetime");
var lifetime_start = document.getElementById("lifetime_start");
var lifetime_end = document.getElementById("lifetime_end");
var lifetime_days = document.getElementById("lifetime_days");
var info = document.getElementById("info");
birthday = birthday.value;
if (!birthday) {
alert('请选择出生日期');
return;
}
lifetime = lifetime.value;
if (!lifetime) {
alert('请输入寿命');
return;
}
var date = new Date();
date.setTime(date.getTime());
var today = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
var start_days = compute(birthday, today);
if (start_days < 0) {
alert('请选择正确的出生日期');
return;
}
lifetime_start.innerHTML = start_days;
lifetime_end_date = add_year_nums_date(birthday, lifetime);
lifetime_end.innerHTML = lifetime_end_date['date_string'];
lifetime_days.innerHTML = compute(today, lifetime_end_date['date']);
info.style.display = 'block';
}
function compute(date_start, date_end)
{
var start_date = Date.parse(date_start);
var end_date = Date.parse(date_end);
return Math.ceil((end_date - start_date) / (1 * 24 * 60 * 60 * 1000));
}
function add_year_nums_date(date_start, year_nums) {
year_nums = parseInt(year_nums);
var month_nums = year_nums * 12;
var year = parseInt(date_start.substr(0, 4));
var month_day = date_start.substr(4);
return {
date: new Date((year + year_nums) + month_day),
date_string: (year + year_nums) + month_day
};
};
</script>
</body>
</html>有兴趣还可以再加一些计算结果，比如将计算结果精细到分钟或者小时之类的。