人生-900个格子

月初听了一本书,书中有一段很是触动,关于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>

希望每一个格子都能填上自己想要的内容,不负此生

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值