javascript
//HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery/jquery-3.2.1.min.js"></script><!--jquery-->
<title></title>
</head>
<body>
<div id="show">推薦</div>
<br />
<a href="javascript:void(0);" onclick = "fAgain();">不滿意再給我一個</a>
<br />
<br />
<div id="showAll">顯示全部</div>
</body>
</html>
//JavaScript
<script language="JavaScript">
var obj;
$(function(){
//讀取資料:方法一寫死--開始--
obj = [
{
'name':'飯食',
'data':
[
{'Id':'01','name':'飯食A店','price':'100'},
{'Id':'02','name':'飯食B店','price':'100'},
{'Id':'03','name':'飯食C店','price':'100'}
]
}
,{
'name':'麵食',
'data':
[
{'Id':'01','name':'麵食A店','price':'100'},
{'Id':'02','name':'麵食B店','price':'100'},
{'Id':'03','name':'麵食C店','price':'100'}
]
}
,{
'name':'神秘',
'data':
[
{'Id':'01','name':'神秘A','price':'100'},
{'Id':'02','name':'神秘B','price':'100'}
]
}
];
//讀取資料:方法一寫死--結束--
//讀取資料:方法二讀取網路json檔案--開始--(建議使用，但資料必須是開放可讀取的)
/*
//假設 檔案位置在 : https://aaa.bbb.cc/xxx.json
//假設 呼叫網址是 : https://aaa.bbb.cc/xxx.html?data=xxx.json
var strData = getParameterName('data'); //取得json檔案名 : xxx.json
var strUrl = "https://aaa.bbb.cc/" + strData; //取得完整檔案路徑
var jsonData = $.ajax({
type: "GET",
cache: false,
url: strUrl,
dataType: "json",
data: "",
async: false
}).responseText;
//轉物件格式
obj = jQuery.parseJSON( jsonData );
*/
//讀取資料:方法二讀取網路json檔案--結束--
//顯示推薦
fShow();
//顯示全部
fShowAll();
});
//亂數
function fRandom(intInLength) {
var maxNum = intInLength;
var minNum = 1;
return Math.floor(Math.random() * (maxNum - minNum + 1)) ;
}
//顯示推薦
function fShow() {
//顯示推薦亂數
var strShowData = " 電腦推薦如下:<H1> ";
var intObjLength = obj.length * 1;
var intLength = 0;
for (var i = 0; i < intObjLength; i++) {
intRan = fRandom(obj[i]["data"].length) * 1 ;
strShowData = strShowData + " <br /> " + obj[i]["name"] + "：" + "" + obj[i]["data"][intRan]["name"] + " " ;
}
strShowData = strShowData + " </H1> " ;
$('#show').html(strShowData);
}
//顯示全部
function fShowAll() {
var strShowAll = "";
var intObjLength = obj.length * 1;
strShowAll = "";
strShowAll = strShowAll + " <table border='1'>";
strShowAll = strShowAll + " <tr>";
for (var j = 0; j < intObjLength; j++) {
strShowAll = strShowAll + " <th>" + obj[j]["name"] + "：</th>";
}
strShowAll = strShowAll + " </tr>";
strShowAll = strShowAll + " <tr valign='top'>";
for (var j = 0; j < intObjLength; j++) {
strShowAll = strShowAll + " <td>";
for (var i = 0; i < ( obj[j]["data"].length ); i++) {
strShowAll = strShowAll + " 餐廳:" + obj[j]["data"][i]["name"] + "<br />";
}
strShowAll = strShowAll + " </td>";
}
strShowAll = strShowAll + " </tr>";
strShowAll = strShowAll + " </table>";
$('#showAll').html("目前餐廳列表:<br />" + strShowAll);
}
//在隨機一次
function fAgain() {
fShow();
}
//讀網址參數
function getParameterName(skey) {
var s = location.search.replace(/^\?/, '');
if (s == '' || skey == null || skey == '') {return unescape(s)};
var re = new RegExp('(&|^)' + skey + '=([^&]*)(&|$)');
var a = re.exec(s);
return unescape(a ? a[2] : '');
}
//alert(returnData);
</script>
我只是一棵樹