看到碼雲中的顯示還不錯挺好看的，碼雲中的顯示如下：
我就大概寫一個以年爲單位的顯示（月份爲行，顏色表示數量），結果如下顯示。
其中：需要引入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>
所有代碼已貼出，代碼的詳細功能也都描述啦！