该网站模仿了黑马视频的一个课程案例,json也是引用该项目的json文件
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="修饰.css" /><!--导入css-->
<script src="../js库/jquery-2.1.0.js"></script><!--导入jQuery-->
<script>
$(function(){
var url = "http://127.0.0.1:8848/Json/JSON%E6%96%87%E4%BB%B6/data.json";//json文件地址
$.get(url,function(data){//这里的data是一个参数,与json文件无关
//console.log(data);//会获取到一堆数据,也就是ajax最简单的异步请求网络
//good
var goodcount = Math.floor(Math.random()*3+3);//floor取整
while(goodcount>0){
var i = Math.floor(Math.random()*data.length);
var obj = data[i];
$(".td2 ul").append("<li><div class='name'>"+obj.name+"</div><div class='describe'>"+obj.good+"</div></li>");
goodcount--;
}
//bad
var badcount = Math.floor(Math.random()*3+1);//floor取整
while(badcount>0){
var i = Math.floor(Math.random()*data.length);
var obj = data[i];
$(".td4 ul").append("<li><div class='name'>"+obj.name+"</div><div class='describe'>"+obj.bad+"</div></li>");
badcount--;
}
});
})
</script>
</head>
<body>
<div class="div1">
<div>占卜</div>
<!--空白--> <div class="div2"></div>
<!--宜-->
<div>
<!--开始-->
<div>
<table cellspacing="0">
<tr>
<td class="td1">宜</td>
<td class="td2">
<ul>
</ul>
</td>
</tr>
</table>
</div>
<!--结束-->
<!--空白--> <div class="div2"></div>
<!--不宜-->
<div>
<table cellspacing="0">
<tr>
<td class="td3">不宜</td>
<td class="td4">
<ul>
</ul>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
css文件
*{
margin: 0;
padding: 0;
}
table{
width: 600px;
}
td{
width: 200px;
}
li{
list-style: none;//去掉小黑点
}
.td1{
background-color: #ffee44;
}
.td2{
background-color: #ffffaa;
}
.td3{
background-color: #ff4444;
}
.td4{
background-color: #ffddd3;
}
/* 居中 */ .td1,.td3{
text-align: center;
font-size: 30px;
}
/* 位置 */ .div1{
margin: 20%;
}
/* 空白 */ .div2{
height: 10px;
background: white;
}
.name{
padding-left: 10px;
font-size: 30px;
}
.describe{
font-size: 15px;
padding-left: 10px;
font-color: #;
}
json文件
[
{
"name": "写单元测试",
"good": "写单元测试将减少出错",
"bad": "写单元测试会降低你的开发效率"
},
{
"name": "洗澡",
"good": "你几天没洗澡了?",
"bad": "会把设计方面的灵感洗掉"
},
{
"name": "锻炼一下身体",
"good": "",
"bad": "能量没消耗多少,吃得却更多"
},
{
"name": "抽烟",
"good": "抽烟有利于提神,增加思维敏捷",
"bad": "除非你活够了,死得早点没关系"
},
{
"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": ""
},
{
"name": "在妹子面前吹牛",
"good": "改善你矮穷挫的形象",
"bad": "会被识破"
},
{
"name": "命名变量\"%v\"",
"good": "",
"bad": ""
},
{
"name": "写超过%l行的方法",
"good": "你的代码组织的很好,长一点没关系",
"bad": "你的代码将混乱不堪,你自己都看不懂"
},
{
"name": "提交代码",
"good": "遇到冲突的几率是最低的",
"bad": "你遇到的一大堆冲突会让你觉得自己是不是时间穿越了"
},
{
"name": "代码复审",
"good": "发现重要问题的几率大大增加",
"bad": "你什么问题都发现不了,白白浪费时间"
},
{
"name": "开会",
"good": "写代码之余放松一下打个盹,有益健康",
"bad": "小心被扣屎盆子背黑锅"
},
{
"name": "打lol",
"good": "你将有如神助",
"bad": "你会被虐的很惨"
},
{
"name": "晚上上线",
"good": "晚上是程序员精神最好的时候",
"bad": "你白天已经筋疲力尽了"
},
{
"name": "修复BUG",
"good": "你今天对BUG的嗅觉大大提高",
"bad": "新产生的BUG将比修复的更多"
},
{
"name": "设计评审",
"good": "设计评审会议将变成头脑风暴",
"bad": "人人筋疲力尽,评审就这么过了"
},
{
"name": "需求评审",
"good": "",
"bad": ""
},
{
"name": "上微博",
"good": "今天发生的事不能错过",
"bad": "今天的微博充满负能量"
},
{
"name": "上B站",
"good": "还需要理由吗?",
"bad": "满屏兄贵亮瞎你的眼"
},
{
"name": "玩跳一跳",
"good": "今天破纪录的几率很高",
"bad": "除非你想玩到把手机砸了"
}
]