不败君

前端萌新&初级后端攻城狮

使用HTML和JS开发生命计算器

使用HTML和JS开发生命计算器

2020-03-15 11:56:23

围观(539)

上周在某个群里看到有人分享了一个“生命计算器”,今天周末无聊,就想着“造个轮子”实现一次这个计算器。


效果图:

1.png


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>


有兴趣还可以再加一些计算结果,比如将计算结果精细到分钟或者小时之类的。


本文地址 : www.bubaijun.com/page.php?id=169

版权声明 : 未经允许禁止转载!

评论:我要评论
发布评论:
Copyright © 不败君 粤ICP备18102917号-1

不败君

首 页 作 品 微 语