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}] 

程序员老黄历案例

参考以下链接
https://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

—-想了解更多的jQuery特效教程关注<计算机技术网(www.ctvol.com)!!>