月初听了一本书,书中有一段很是触动,关于A4纸看人生,人生的900个格子,是这样说的
假如我们每个人的生命按75岁来算,人的一辈子,是900个月,在一张A4之上画方格,每一个方格代表一个月,那么我们的一辈子,其实不过是一张A4纸上的900个格子,度过一个格子,就少一个格子。
听到这个的时候内心被深深震撼,特意去搜索一些新闻,发现早在十年前就有900个格子的概念,也或许更早就有。
生命之短暂,是一件细思极恐的事情,我们都很清楚,却很少有能看得如此直观且触目惊心的,因为时间看不见摸不着,很多时候我们以为它不存在,直到惊觉,已是百年身。
想到在外工作的这几年,一直没有决定好留在外面打拼还是回去安稳的生活,粗略计算了下
关于父母,如果父母今年55岁,我们不在父母身边,假如每年能回去陪他们一个月,我们能在一起的时间也就剩下20个格子了。假如每年回去一星期,就只剩下不到5个格子了!
关于梦想,一直以为自己在努力,可真正专注为实现梦想而花费的时间,合起来会有几个格子呢?
关于我们自认为重要的东西,真正占用的格子又会是几个呢?
于是,我花了点时间组织语言并画了900个格子,想看看自己已经用掉了多少,如何让未来的格子更精彩
只是用HTML写了一个简单的页面,感兴趣的可以试试,为了简单实现内容并未做代码方面的优化,欢迎指正
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>900个格子</title>
<style>
.square {
width: 30px;
height: 30px;
border: 1px solid #949494;
float: left;
text-align: center;
line-height: 30px;
}
.no-top {
border-top: 0px;
}
.no-right{
border-right: 0px;
}
.default-bg {
background-color: #C7EDCC;
}
.golden-bg {
background-color: #ffff77;
}
.green-bg {
background-color: #42ffa0;
}
.blue-bg {
background-color: #87CEEB;
}
.gray-bg {
background-color: #C0C0C0;
}
.purple-bg {
background-color: #d2bbff;
}
</style>
</head>
<body>
<div>
<div>假如生命按75岁来算,人的一辈子,是900个月,每一个方格代表一个月,已经填满颜色的方格代表逝去的岁月</div>
<div id="box" style="max-width: 931px"></div>
</div>
<script>
//例:一个已经26岁步入社会的成年人、童年、小学、初中、高中、大学、工作
var oBox = document.getElementById('box');
var totalSquare = 900;//总格子数900
var lineSquare = 30;//每行格子数30
var pastMonth = 26 * 12 + 6;//已经过去的格子数(年份*12+月份)
var childhood = 6 * 12;//童年
var primarySchool = 5 * 12;//小学
var middleSchool = 3 * 12;//初中
var highSchool = 3 * 12;//高中
var university = 4 * 12;//大学
var str = '';
for (var i = 1; i <= totalSquare; i++) {
//处理格子的样式
var cls = "square";
if(i < lineSquare){
cls = "square no-right";
}else if (i == lineSquare){
cls = "square";
}else{
if(i%lineSquare == 0){
cls = "square no-top";
}else{
cls = "square no-top no-right";
}
}
//处理格子的颜色
if(i <= pastMonth){
if(i <= childhood){
cls += " golden-bg";
}
if((childhood < i) && (i <= childhood + primarySchool)){
cls += " green-bg";
}
if((childhood + primarySchool < i) && (i <= childhood + primarySchool + middleSchool)){
cls += " blue-bg";
}
if((childhood + primarySchool + middleSchool < i) && (i <= childhood + primarySchool + middleSchool + highSchool)){
cls += " gray-bg";
}
if((childhood + primarySchool + middleSchool + highSchool < i) && (i <= childhood + primarySchool + middleSchool + highSchool + university)){
cls += " purple-bg";
}
if((childhood + primarySchool + middleSchool + highSchool + university < i)){
cls += " default-bg";
}
}
str += '<div class="' + cls + '" id = "square'+ i +'" title="' + i + '"></div>';
}
oBox.innerHTML = str;
</script>
</body>
</html>
希望每一个格子都能填上自己想要的内容,不负此生