json

• 什麼是JSON

  JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它基於ECMAScript的一個子集。 JSON採用完全獨立於語言的文本格式，但是也使用了類似於C語言家族的習慣（包括C、C++、C#、Java、JavaScript、Perl、Python等）。這些特性使JSON成為理想的數據交換語言。 易於人閱讀和編寫，同時也易於機器解析和生成(一般用於提升網路傳輸速率)。

• JSON格式

  ​ JSON對象

  { key1:value}   
  {"username":"zhangsan","password":"123"}
  

  ​ JSON數組

  [{ key1:value},{ key1:value},{ key1:value}]
  

程式員老黃曆案例

參考以下鏈接
http://www.liweicg.cn/

代碼實現

1.導入文件
css

body * {
	font-family:"Consolas","Microsoft Yahei", Arial, sans-serif;
}

body {
	background: white;
	margin: 0;
	padding: 0;
}

.container {
	width: 320px;
	margin: 0 auto 50px;
}

.container>.title {
	color: #bbb;
	font-weight: bold;
	margin-bottom: 10px;
	background: #555;
	padding: 5px 15px;
}

.split, .clear {
	clear: both;
	height: 1px;
	overflow-y: hidden;
}

.good, .bad {
	clear: both;
	position: relative;
}

.bad {
	/*top: -1px;*/
}

.good .title, .bad .title {
	float: left;
	width: 100px;
	font-weight: bold;
	text-align: center;
	font-size: 30pt;
	position:absolute;
	top:0;
	bottom:0;
}

.good .title>table, .bad .title>table {
	position:absolute;
	width:100%;
	height:100%;
	border:none;
}

.good .title {
	background: #ffee44;
}


.bad .title {
	background: #ff4444;
	color: #fff;
}

.good .content, .bad .content {
	margin-left: 115px;
	padding-right: 10px;
	padding-top: 1px;
	font-size:15pt;
}

.good {
	background: #ffffaa;
}

.bad {
	background: #ffddd3;
}

.content ul {
	list-style: none;
	margin:10px 0 0;
	padding:0;
}

.content ul li {
	line-height:150%;
	font-size: 15pt;
	font-weight: bold;
	color: #444;
}

.content ul li div.description {
	font-size: 11pt;
	font-weight: normal;
	color: #777;
	line-height: 110%;
	margin-bottom: 10px;
}

json.data

[
    {
        "name": "寫單元測試",
        "good": "寫單元測試將減少出錯",
        "bad": "寫單元測試會降低你的開發效率"
    },
    {
        "name": "洗澡",
        "good": "你幾天沒洗澡了？",
        "bad": "會把設計方面的靈感洗掉",
        "weekend": true
    },
    {
        "name": "鍛煉一下身體",
        "good": "",
        "bad": "能量沒消耗多少，吃得卻更多",
        "weekend": true
    },
    {
        "name": "抽煙",
        "good": "抽煙有利於提神，增加思維敏捷",
        "bad": "除非你活夠了，死得早點沒關係",
        "weekend": true
    },
    {
        "name": "白天上線",
        "good": "今天白天上線是安全的",
        "bad": "可能導致災難性後果"
    },
    {
        "name": "重構",
        "good": "代碼質量得到提高",
        "bad": "你很有可能會陷入泥潭"
    },
    {
        "name": "使用%t",
        "good": "你看起來更有品位",
        "bad": "別人會覺得你在裝逼"
    },
    {
        "name": "跳槽",
        "good": "該放手時就放手",
        "bad": "鑒於當前的經濟形勢，你的下一份工作未必比現在強"
    },
    {
        "name": "招人",
        "good": "你面前這位有成為牛人的潛質",
        "bad": "這人會寫程式嗎？"
    },
    {
        "name": "面試",
        "good": "面試官今天心情很好",
        "bad": "面試官不爽，會拿你出氣"
    },
    {
        "name": "提交辭職申請",
        "good": "公司找到了一個比你更能幹更便宜的家伙，巴不得你趕快滾蛋",
        "bad": "鑒於當前的經濟形勢，你的下一份工作未必比現在強"
    },
    {
        "name": "申請加薪",
        "good": "老闆今天心情很好",
        "bad": "公司正在考慮裁員"
    },
    {
        "name": "晚上加班",
        "good": "晚上是程式員精神最好的時候",
        "bad": "",
        "weekend": true
    },
    {
        "name": "在妹子面前吹牛",
        "good": "改善你矮窮挫的形象",
        "bad": "會被識破",
        "weekend": true
    },
    {
        "name": "擼管",
        "good": "避免緩衝區溢出",
        "bad": "強擼灰飛煙滅",
        "weekend": true
    },
    {
        "name": "瀏覽成人網站",
        "good": "重拾對生活的信心",
        "bad": "你會心神不寧",
        "weekend": true
    },
    {
        "name": "命名變數\"%v\"",
        "good": "",
        "bad": ""
    },
    {
        "name": "寫超過%l行的方法",
        "good": "你的代碼組織的很好，長一點沒關係",
        "bad": "你的代碼將混亂不堪，你自己都看不懂"
    },
    {
        "name": "提交代碼",
        "good": "遇到衝突的幾率是最低的",
        "bad": "你遇到的一大堆衝突會讓你覺得自己是不是時間穿越了"
    },
    {
        "name": "代碼覆審",
        "good": "發現重要問題的幾率大大增加",
        "bad": "你什麼問題都發現不了，白白浪費時間"
    },
    {
        "name": "開會",
        "good": "寫代碼之餘放鬆一下打個盹，有益健康",
        "bad": "小心被扣屎盆子背黑鍋"
    },
    {
        "name": "打DOTA",
        "good": "你將有如神助",
        "bad": "你會被虐的很慘",
        "weekend": true
    },
    {
        "name": "晚上上線",
        "good": "晚上是程式員精神最好的時候",
        "bad": "你白天已經筋疲力盡了"
    },
    {
        "name": "修複BUG",
        "good": "你今天對BUG的嗅覺大大提高",
        "bad": "新產生的BUG將比修複的更多"
    },
    {
        "name": "設計評審",
        "good": "設計評審會議將變成頭腦風暴",
        "bad": "人人筋疲力盡，評審就這麼過了"
    },
    {
        "name": "需求評審",
        "good": "",
        "bad": ""
    },
    {
        "name": "上微博",
        "good": "今天發生的事不能錯過",
        "bad": "今天的微博充滿負能量",
        "weekend": true
    },
    {
        "name": "上AB站",
        "good": "還需要理由嗎？",
        "bad": "滿屏兄貴亮瞎你的眼",
        "weekend": true
    },
    {
        "name": "玩FlappyBird",
        "good": "今天破紀錄的幾率很高",
        "bad": "除非你想玩到把手機砸了",
        "weekend": true
    }
]

js

2. html