<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0 } .cont { width: 600px; margin: 3% auto; } .cont .item { border-bottom: 1px #eee solid; padding: 15px 10px; } .cont .title { border-left: 5px #f00 solid; padding-left: 5px; font-size: 18px; font-weight: bold; } .cont .source { font-size: 14px; color: #666; overflow: hidden; } .cont .source .tag { float: right; } </style> <script src="data.js"></script> </head> <body> <div class="cont" id="cont"> <!-- <div class="item"> <div class="title"> 教你仅用四个元件做一个升压电路，电压轻松提升两倍多 </div> <div class="cont"> 今天教大家一个关于电源类的升压电路，关于电源我想我们大家并不陌生，我们每天在用的220V交流电就是一种电源，今天这个电源源头能源也是来自于220V交流电。", </div> <div class="source">来源：电子科技大亨<span class="tag">科技</span></div> </div>--> </div> <script src="data.js"></script> <!-- 准备模板, 采用占位方式 --> <script type="text/template" id="tpl"> <div class="item"> <div class="title">@title</div> <div class="cont">@abstract</div> <div class="source">来源：@source<span class="tag">@chinese_tag</span></div> </div> </script> <script> /*** * 使用JS模板引擎渲染页面!! * * */ //TODO step1: 获取模板 var tpl = document.getElementById('tpl').innerHTML; console.log(tpl); console.log(data) //TODO step2: 解析数据 var temp = '';//缓存字符串 for (var i = 0; i < data.data.length; i++) { var obj = data.data[i]; //console.log(obj); temp += tpl.replace('@title',obj.title) .replace('@abstract',obj.abstract) .replace('@source',obj.source) .replace('@chinese_tag',obj.chinese_tag); } document.getElementById('cont').innerHTML = temp; </script> </body>
</html>
json数据：
/** * Created by WTG on 2017/7/4. */ var data = { "has_more": false, "message": "success", "data": [{ "chinese_tag": "教学", "media_avatar_url": "http://p5a.pstatp.com/large/2bd80016a8d917574d93", "is_feed_ad": false, "tag_url": "news_tech", "title": "教你仅用四个元件做一个升压电路，电压轻松提升两倍多", "single_mode": true, "middle_mode": false, "abstract": "今天教大家一个关于电源类的升压电路，关于电源我想我们大家并不陌生，我们每天在用的220V交流电就是一种电源，今天这个电源源头能源也是来自于220V交流电。", "group_source": 2, "image_list": [{"url": "http://p1.pstatp.com/list/2c2d00039bb0ca6110f4"}, {"url": "http://p1.pstatp.com/list/2c3100034207157cf7b3"}, {"url": "http://p3.pstatp.com/list/2c2d00039bae247b6513"}], "behot_time": 1499123532, "source_url": "/group/6438464026837385473/", "source": "电子科技大亨", "more_mode": true, "article_genre": "article", "comments_count": 48, "has_gallery": false, "tag": "news_tech", "image_url": "http://p1.pstatp.com/list/190x124/2c2d00039bb0ca6110f4", "group_id": "6438464026837385473", "media_url": "/c/user/3485243246/" }, { "chinese_tag": "科技", "media_avatar_url": "http://p3.pstatp.com/large/178000004a99e93b8bc2", "is_feed_ad": false, "tag_url": "news_tech", "title": "17岁天才少年成为全球第一青少年开发公司CEO，因与Sunshine女团合作意外走红", "single_mode": true, "middle_mode": false, "abstract": "他的名片上写着“崇才科技CEO 李昕泽”，公司全名是“洛阳崇才网络科技有限公司”。李昕泽，年仅十七岁就有了自己的公司。成员都是“00后”。除了CEO，公司还设有创始人、联合创始人、总裁、副总裁、常务副总裁等职位。", "group_source": 2, "image_list": [{"url": "http://p3.pstatp.com/list/28970001c39d152b2e69"}, {"url": "http://p3.pstatp.com/list/28970001c3ec905603c0"}, {"url": "http://p1.pstatp.com/list/289500023558ce5a3e2e"}], "behot_time": 1499123524, "source_url": "/group/6433522551104438529/", "source": "一点利", "more_mode": true, "article_genre": "article", "comments_count": 27, "has_gallery": false, "tag": "news_tech", "image_url": "http://p3.pstatp.com/list/190x124/28970001c39d152b2e69", "group_id": "6433522551104438529", "media_url": "/c/user/55875502835/" }, { "chinese_tag": "财经", "media_avatar_url": "http://p3.pstatp.com/large/1a6e0001373e1ad372b5", "is_feed_ad": false, "tag_url": "news_tech", "title": "从估值200亿到欠债20亿，从风云人物沦落到被人忘记，雷军的哥们却还不认输！", "single_mode": true, "middle_mode": false, "abstract": "不知道你是否还记得，在多年前的互联网行业中有一个响亮的互联网品牌叫“凡客”。这家互联网垂直电商平台在当时可以说是火遍了大半个中国，而它背后的男人就是雷军最好要的哥们之一的陈年！", "group_source": 2, "image_list": [{"url": "http://p3.pstatp.com/list/2c65000c3ee27f2df76f"}, {"url": "http://p9.pstatp.com/list/2c5e000c380c2a3399a0"}, {"url": "http://p3.pstatp.com/list/2c6a00027c34147ea6cb"}], "behot_time": 1499123517, "source_url": "/group/6438438593451409666/", "source": "是栋不是洞", "more_mode": true, "article_genre": "article", "comments_count": 1, "has_gallery": false, "tag": "news_tech", "image_url": "http://p3.pstatp.com/list/190x124/2c65000c3ee27f2df76f", "group_id": "6438438593451409666", "media_url": "/c/user/50863335678/" }, { "chinese_tag": "职场", "media_avatar_url": "http://p1.pstatp.com/large/17820010e526b489dd91", "is_feed_ad": false, "tag_url": "search/?keyword=%E8%81%8C%E5%9C%BA", "title": "领导居然这么对待为部门做过杰出贡献的老员工，真让人寒心啊！", "single_mode": true, "middle_mode": true, "abstract": "前段时间，我们部门一位资深的老员工提出离职了。这位员工，在一定程度上可以说是我们部门的元老级员工了，可没想到，在他刚提出离职后，就遭到了领导的隔离。我们部门每周都有周会，方便大家相互间了解彼此工作内容，理论上是要求全部门的员工都要参加。", "tag": "news_career", "behot_time": 1499123503, "source_url": "/group/6437086901689123330/", "source": "职场趣谈", "more_mode": false, "article_genre": "article", "image_url": "http://p1.pstatp.com/list/190x124/2c2f0003a319c67940a4", "has_gallery": false, "group_source": 2, "comments_count": 22, "group_id": "6437086901689123330", "media_url": "/c/user/57500463892/" }, { "chinese_tag": "互联网", "media_avatar_url": "http://p1.pstatp.com/large/ef7001760f9e76a36da", "is_feed_ad": false, "tag_url": "news_tech", "title": "脸书如果来了，你会抛弃微信吗？网友：我爱中国造！", "single_mode": true, "middle_mode": false, "abstract": "作为社交软件中的大佬，但是大家并没有听到过脸书和微信的战争，最主要的原因就是微信是我们的，而脸书则代表着外国。不过脸书如果来了，你会抛弃微信吗？", "group_source": 2, "image_list": [{"url": "http://p1.pstatp.com/list/2c2d0003fce850237e29"}, {"url": "http://p9.pstatp.com/list/2c280003c01626d88e15"}, {"url": "http://p9.pstatp.com/list/2c340000ed4d70aae935"}], "behot_time": 1499123496, "source_url": "/group/6438371057648877825/", "source": "科技面对面", "more_mode": true, "article_genre": "article", "comments_count": 323, "has_gallery": false, "tag": "news_tech", "image_url": "http://p1.pstatp.com/list/190x124/2c2d0003fce850237e29", "group_id": "6438371057648877825", "media_url": "/c/user/51671771280/" }, { "chinese_tag": "生活", "media_avatar_url": "http://p3.pstatp.com/large/bc20016a693254ed5ed", "is_feed_ad": false, "tag_url": "news_tech", "title": "为什么夫妻间老是想要定位对方的手机？", "single_mode": true, "middle_mode": false, "abstract": "在各种影视作品中，手机定位 作为一种增加剧情紧张感的手段，已经被各种滥用了。美剧、外国电影自然不用说了，就连早前国产大热的《人民的名义》的剧情，最初也是围绕着如何追踪定位一个告密电话展开的。随着这部反腐爆剧的大热， 这个专业名词似乎突然又活跃于人们面前。", "group_source": 2, "image_list": [{"url": "http://p3.pstatp.com/list/1dce0019ce67b12534e3"}, {"url": "http://p3.pstatp.com/list/1dcc00204dbf9fe4b14f"}, {"url": "http://p1.pstatp.com/list/1dcc00204dd373af8432"}], "behot_time": 1499123489, "source_url": "/group/6418151074419556609/", "source": "SherpaMan", "more_mode": true, "article_genre": "article", "comments_count": 4, "has_gallery": false, "tag": "news_tech", "image_url": "http://p3.pstatp.com/list/190x124/1dce0019ce67b12534e3", "group_id": "6418151074419556609", "media_url": "/c/user/50026575981/" }], "next": {"max_behot_time": 1499123489} };