想做个项目, 一直纠结于用什么前端显示框架, 毕竟自己学的东西太有限了, 后来觉得都好麻烦, 没事的时候研究一下试试, 造出来这么个东西
<!doctype html> <html> <head> <!-- 声明当前页面的编码集, charset=gbk,gb2312(中文编码), utf-8(国际编码) --> <!-- http-equiv="content-type"指的是一个键值对, 与下面的meta标签是有联系的 --> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="Keywords" content="关键字, 页面搜索使用"> <meta name="Description" content="页面的简单描述, 小于等于76个字"> <title>Document</title> <!-- 以上四行代码是w3school的国际化标准, 一行也不能少 --> <style type="text/css"> /* 层叠样式表 */ *{margin:0px;padding:0px;} </style> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <script type="text/javascript"> //定义一个json字符串 var data = '{"status":"success","data":{"dataArr":[{"id":"1","question":"公主令牌在哪交？"},{"id":"2","question":"公主护使有什么用？"},{"id":"3","question":"角斗场在哪？"},{"id":"4","question":"北部断层在哪？"},{"id":"5","question":"欢乐令有什么用？"},{"id":"6","question":"令牌积分有什么用？"},{"id":"7","question":"南部断层在哪？"},{"id":"8","question":"大妖魔令牌交给谁？"},{"id":"9","question":"神工坊在哪？"},{"id":"10","question":"警戒妖珠有什么用？"}]}}'; function ShowData(){ //debugger; //解析json var obj = eval("("+data+")"); //获取一个长度, 这个一会要作为数据表格的行数 var row = obj.data.dataArr.length; //获取body中table标签的document对象 var domTab = document.getElementById("tab"); //遍历往表格中添加数据 for(var m=0;m<row;m++) { var rowTr = domTab.insertRow(); for(var propCol in obj.data.dataArr[m]) { var cell = rowTr.insertCell(); cell.innerHTML = obj.data.dataArr[m][propCol]; } } } </script> </head> <body> <table border="1" id="tab" cellspacing="0" cellpadding="0"></table> <br><br> <div id=d1 style="width:100px;height:100px;border:1px red solid;" onclick="ShowData()"></div> </body> </html>
这个还是挺好玩的, 继续研究, 后期完善一下, 整一个完整的前端框架出来!!
