模仿码云中的年份贡献显示！

最新推荐文章于 2024-08-18 10:59:48 发布

荣轩浩

最新推荐文章于 2024-08-18 10:59:48 发布

阅读量655

点赞数 2

分类专栏： H5 HTML CSS3 JS 码云文章标签： H5 HTML CSS3 JS 码云

本文链接：https://blog.csdn.net/a1_a1_a/article/details/81452367

版权

H5 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

CSS3

1 篇文章 0 订阅

订阅专栏

看到码云中的显示还不错挺好看的，码云中的显示如下：

我就大概写一个以年为单位的显示（月份为行，颜色表示数量），结果如下显示。

其中：需要引入jquery.js文件

具体代码如下显示！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>

    <style>
        .main{
            min-width: 530px;
        }
        .vertical{
            overflow: hidden;
            margin-bottom: 1px;
        }
        .box{
            width: 16px;
            height: 16px;
            margin-right: 1px;
            float: left;
            font-size: 8px;
            text-align: center;
            line-height: 16px;
        }
        .contribution_list{
            margin-top: 20px;
            overflow: hidden;
            width: 50%;
        }
        .item{
            width: 16px;
            height: 16px;
            float: left;
        }
        #Layer1{
            text-align: center;
            height: 40px;
            line-height: 40px;
            width: 150px;
            background-color: #ffffff;
            font-size: 8px;
        }

        /*如下五个表示数量多少*/
        .much {
            background-color: #1e6823;
        }
        .many {
            background-color: #44a340;
        }
        .some {
            background-color: #8cc665;
        }
        .little {
            background-color: #d6e685;
        }
        .less{
            background-color: #eee;
        }
    </style>
</head>
<body>

<div class="main">

</div>

<div class="contribution_list">
    <div class="item" style="background-color: #eee"></div>
    <div class="item" style="background-color: #d6e685"></div>
    <div class="item" style="background-color: #8cc665"></div>
    <div class="item" style="background-color: #44a340"></div>
    <div class="item" style="background-color: #1e6823"></div>
</div>

<div id="Layer1" style="display:none;position:absolute;z-index:1;"></div>


</body>
<script type="text/javascript">
    $(function () {

        var nowDate = new Date();
        var nowYear = nowDate.getFullYear();
        showData(nowYear);

    });

    function showData(nowYear) {
        var monthDays = isLeapYear(nowYear);
        for(var i = 1; i <= 12; i ++){
            $(".main").append("<div id='"+i+"' class='vertical'></div>");
            for(var j = 0; j < 31; j ++){
                var showDate = getShowDate(nowYear, i, j);
                if(j == 0){//第一列的月份数字显示1-12
                    $("#"+i+"").append("<div id='"+showDate+"' class='box'>" + i + "</div>");
                }else if(j >= monthDays[i-1]){//根据月份的天数进行部分空白显示。
                    $("#"+i+"").append("<div id='"+showDate+"' class='box'></div>");
                }else {
                    var num=Math.floor(Math.random()*100);//产生0-100之间的随机数
                    $("#"+i+"").append("<div id='"+showDate+"' class='box' date='"+showDate+"' data-content= '"+num+"个荣轩浩: "+showDate+"' onmouseout='hiddenPic()' onmousemove='showPic(this,event)'></div>");
                    if(num>80){
                        $("#"+showDate+"").addClass("much");
                    }else if(num> 60){
                        $("#"+showDate+"").addClass("many");
                    }else if(num>40){
                        $("#"+showDate+"").addClass("some");
                    }else if(num>20){
                        $("#"+showDate+"").addClass("little");
                    }else {
                        $("#"+showDate+"").addClass("less");
                    }
                }
            }

        }
    }


    /**
     * 显示弹出框
     * @param obj
     * @param e
     */
    function showPic(obj,e){
        var x = e.clientX+2;
        var y = e.clientY-10;
        $("#Layer1").css('left',x+'px');
        $("#Layer1").css('top',y+'px');
        $("#Layer1").text(obj.getAttribute("data-content"));
        $("#Layer1").css('display',"");
    }

    /**
     * 隐藏弹出框
     */
    function hiddenPic(){
        $("#Layer1").text("");
        $("#Layer1").css('display',"none");
    }


    //判断是否是闰年，并返回一年的天数
    function isLeapYear (Year) {
        var leapYear = [31,29,31,30,31,30,31,31,30,31,30,31];
        var notLeapYear = [31,28,31,30,31,30,31,31,30,31,30,31];

        if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) {
            return leapYear;
        } else {
            return notLeapYear;
        }
    }

    /**
     * 当月为1-9时，在数字前加0，
     * 当日为1-9时，在数字前加0.
     * 并且返回要显示的日期格式，例子:2018-01-02
     * @param year
     * @param i
     * @param j
     * @returns {string}
     */
    function getShowDate(year, i, j) {
        i = i<10 ? '0'+i : i;
        j = j<10 ? '0'+j : j;
        return year + "-" + i + "-" + j;
    }

</script>
</html>

所有代码已贴出，代码的详细功能也都描述啦！