代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style></style>
<link rel="stylesheet" href="css/laohuangli.css" />
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script>
$(function() {
//涉及到请求链接,动态显示数据
var url = "http://127.0.0.1:8848/bootStrap/data.json";
//ajax 最简单异步请求网络
$.get(url, function(jsonArr) {
// console.log(jsonArr);
// var obj = jsonArr[4]; //JSONObject
var goodCount = Math.floor(Math.random() * 3 + 3) //
while (goodCount > 0) { //取几条数据
//随机去取一条数据
var index = Math.floor(Math.random() * jsonArr.length)
var obj = jsonArr[index];
//向合适干啥
$(".good ul").append("<li><div class='name'>" + obj.name + "</div><div class='description'>" + obj.good +
"</div></li>");
goodCount--;
}
var badCount = Math.floor(Math.random() * 3 + 2) //
while (badCount > 0) {
var index = Math.floor(Math.random() * jsonArr.length)
var obj = jsonArr[index];
//不合适干啥
$(".bad ul").append("<li><div class='name'>" + obj.name + "</div><div class='description'>" + obj.bad +
"</div></li>");
badCount--;
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="title">
程序员老黄历
</div>
<div class="good">
<div class="title">
<table>
<tr>
<td>宜</td>
</tr>
</table>
</div>
<div class="content">
<ul>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="split"></div>
<div class="bad">
<div class="title">
<table>
<tr>
<td>不宜</td>
</tr>
</table>
</div>
<div class="content">
<ul>
</ul>
</div>
<div class="clear"></div>
</div>
</body>
</html>
运行效果如图：
当刷新时，会出现新的老黄历。
609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
