人生-900个格子

最新推荐文章于 2022-06-02 13:33:54 发布

置顶程序小白-M

最新推荐文章于 2022-06-02 13:33:54 发布

阅读量1.6k

点赞数 1

分类专栏：人生文章标签：人生

本文链接：https://blog.csdn.net/zym_1321/article/details/106919279

版权

人生专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

程序小白-M

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
人生-900个格子

一个月前听了一本书，书中有一段很是触动，关于A4纸看人生，人生的900个格子，是这样说的假如我们每个人的生命按75岁来算，人的一辈子，是900个月，在一张A4之上画方格，每一个方格代表一个月，那么我们的一辈子，其实不过是一张A4纸上的900个格子，度过一个格子，就少一个格子。听到这个的时候内心被深深震撼，特意去搜索一些新闻，发现早在十年前就有900个格子的概念，也或许更早就有。生命之短暂，是一件细思极恐的事情，我们都很清楚，却很少有能看得如此直观且触目惊心的，因为时间看不见摸不着，很多时候我们以为它不
复制链接

扫一扫