效果图

json文件

https://raw.githubusercontent.com/sherryloslrs/timetable/master/timetable.json

  1.  {
  2.    "TimeTable " : "Time Table",
  3.    "formed" : 2018,
  4.    "active" : true,
  5.    "members" : [
  6.      {
  7.        "week" : "Monday",
  8.        "shows" : [
  9.          "《行尸走肉》",
  10.          "《神秘博士》",
  11.          "《国务卿女士》",
  12.            "《末日孤舰》",
  13.                "《辛普森一家》",
  14.              "《名利场》",
  15.          "《堕落街传奇》"
  16.        ]
  17.      },
  18.  
  19.      {
  20.        "week" : "Tuesday",
  21.        "shows" : [
  22.            "《绝命律师》",
  23.                  "《49号旅舍》",
  24.                  "《与星共舞》",
  25.                  "《驻院医生》",
  26.                  "《紧急呼救》",
  27.                  "《庭审专家》",
  28.                  "《东邻西舍》"
  29.        ]
  30.      },
  31.  
  32.      {
  33.        "week" : "Wedesday",
  34.        "shows" : [
  35.          "《闪电侠》",
  36.          "《黑霹雳》",
  37.          "《我们这一天》",
  38.          "《人类清除计划》",
  39.          "《天赋异禀》",
  40.          "《联邦调查局》",
  41.          "《医院革命》"
  42.        ]
  43.      },
  44.  
  45.      {
  46.        "week" : "Thursday",
  47.        "shows" : [
  48.          "《海豹突击队》",
  49.          "《幸存者》",
  50.          "《海豹突击队》",
  51.          "《芝加哥烈焰》",
  52.          "《嘻哈帝国》",
  53.          "《南方公园》",
  54.          "《美恐8：启示录》"
  55.        ]
  56.      },
  57.  
  58.      {
  59.        "week" : "Friday",
  60.        "shows" : [
  61.          "《邪恶力量》",
  62.          "《生活大爆炸》",
  63.          "《小谢尔顿》",
  64.          "《反恐特警组》",
  65.          "《实习医生格蕾》",
  66.          "《法律与秩序》",
  67.          "《一元背后》"
  68.        ]
  69.      },
  70.  
  71.      {
  72.        "week" : "Saturday",
  73.        "shows" : [
  74.          "《高堡奇人》",
  75.          "《初来乍到》",
  76.          "《天堂执法者》",
  77.          "《纽约屁民》",
  78.          "《无言有爱》",
  79.          "《地狱厨房》",
  80.          "《凡妮莎海辛》"
  81.        ]
  82.      }
  83.    ]
  84.  }

js文件

  1.  var header = document.querySelector('header');
  2.      var section = document.querySelector('section');
  3.      var requestURL = 'https://raw.githubusercontent.com/sherryloslrs/timetable/master/timetable.json';
  4.      var request = new XMLHttpRequest();
  5.      request.open('GET', requestURL);
  6.      request.responseType = 'json';
  7.      request.send();
  8.      request.onload = function() {
  9.        var timetable = request.response;
  10.        populateHeader(timetable);
  11.        showTable(timetable);
  12.      }
  13.      function populateHeader(jsonObj) {
  14.        var myH1 = document.createElement('h1');
  15.        myH1.textContent = "Time  Table";
  16.        header.appendChild(myH1);
  17.        var myPara = document.createElement('p');
  18.        myPara.textContent =  ' // Year: ' + jsonObj['formed'];
  19.        header.appendChild(myPara);
  20.      }
  21.      function showTable(jsonObj) {
  22.        var dramas = jsonObj['members'];
  23.        for(var i = 0; i < dramas.length; i++) {
  24.          var myArticle = document.createElement('article');
  25.          var myH2 = document.createElement('h2');
  26.          var myList = document.createElement('ul');
  27.          myH2.textContent = dramas[i].week;
  28.          var theShows = dramas[i].shows;
  29.          for(var j = 0; j < theShows.length; j++) {
  30.            var listItem = document.createElement('li');
  31.            listItem.textContent = theShows[j];
  32.            myList.appendChild(listItem);
  33.          }
  34.          myArticle.appendChild(myH2);
  35.          myArticle.appendChild(myList);
  36.          section.appendChild(myArticle);
  37.        }
  38.      }

html文件

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <title>播放时间表</title>
  5.      <meta charset="utf-8">
  6.      <link rel="stylesheet" type="text/css" href="1.css">
  7.      <link rel="stylesheet" type="text/css" href="w3.css">
  8.      <link rel="stylesheet" type="text/css" href="style.css">
  9.  </head>
  10.  <style>
  11.  body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
  12.  body, html {
  13.      height: 100%;
  14.      line-height: 1.8;
  15.  }
  16.  /* Full height image header */
  17.  .bgimg-1 {
  18.      background-position: center;
  19.      background-size: cover;
  20.      background-image: url("images/main1.png");
  21.      min-height: 100%;
  22.  }
  23.  .w3-bar .w3-button {
  24.      padding: 16px;
  25.  }
  26.  </style>
  27.  <body>
  28.  
  29.  <div class="w3-top">
  30.    <div class="w3-bar w3-white w3-card" id="myNavbar">
  31.      <a href="index.html" class="w3-bar-item w3-button w3-wide">HOME</a>
  32.      <!-- Right-sided navbar links -->
  33.      <div class="w3-right w3-hide-small">
  34.        <a href="crime.html" class="w3-bar-item w3-button">CRIME</a>
  35.        <a href="fiction.html" class="w3-bar-item w3-button"> FICTION</a>
  36.        <a href="melodrama.html" class="w3-bar-item w3-button"> MELODRAMA</a>
  37.        <a href="emotional.html" class="w3-bar-item w3-button">EMOTIONAL</a>
  38.        <a href="timetable.html" class="w3-bar-item w3-button">TIMETABLE</a>
  39.      </div>
  40.      <!-- Hide right-floated links on small screens and replace them with a menu icon -->
  41.  
  42.      <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">
  43.        <i class="fa fa-bars"></i>
  44.      </a>
  45.    </div>
  46.  </div>
  47.  
  48.  <!-- Sidebar on small screens when clicking the menu icon -->
  49.  <nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
  50.    <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">Close ×</a>
  51.    <a href="crime.html" onclick="w3_close()" class="w3-bar-item w3-button">CRIME</a>
  52.    <a href="fiction.html" onclick="w3_close()" class="w3-bar-item w3-button">FICTION</a>
  53.    <a href="melodrama.html" onclick="w3_close()" class="w3-bar-item w3-button">MELODRAMA</a>
  54.    <a href="emotional.html" onclick="w3_close()" class="w3-bar-item w3-button">EMOTIONAL</a>
  55.    <a href="timetable.html" onclick="w3_close()" class="w3-bar-item w3-button">TIMETABLE</a>
  56.  </nav>
  57.  
  58.  <header>
  59.  
  60.  </header>
  61.  
  62.  <section>
  63.  
  64.  </section>
  65.  
  66.  <script src="timetable.js">
  67.  
  68.  </script>
  69.  
  70.  </body>
  71.  </html>

使用json改写网站的更多相关文章

  1. 推荐一款在线编辑JSON的网站

    推荐一款在线编辑JSON的网站 https://github.com/DavidDurman/FlexiJsonEditor 开源地址:https://github.com/DavidDurman/F ...

  2. moco搭建json api网站用于接口测试

    java -jar moco-runner-1.0.0-standalone.jar http -p 12306 -c config/conf.json 配置文件 [ { "request& ...

  3. json 使用 （下）

    使用JSON JSON也就是JavaScript Object Notation,是一个描述数据的轻量级语法.JSON的优雅是因为它是JavaScript语言的一个子集.接下来你将看到它为什么如此重要 ...

  4. JSON入门学习

    JSON是一种与开发语言无关的轻量级的数据格式(JavaScript Object Notation) 优点:易于阅读和编写,易于程序解析和生产 JSON数据格式中没有日期及时间的数据格式的.一般直接 ...

  5. 我的第一个 JSP (SSH) 个人网站【开源】

    唠叨两句背景 相当长时间没上来发帖了,最近几个月除了完成产品经理一个又一个重复又重复的app开发任务之外,最大的工作莫过于充分利用上笔主的业余时间,系统性地跟李刚同志学习JavaEE的SSH框架开发技 ...

  6. Android开源库--Gson谷歌官方json解析库

    官方文档地址:http://google-gson.googlecode.com/svn/trunk/gson/docs/javadocs/index.html 官方网站:http://code.go ...

  7. xml 和 json 的区别

    JSON(Javascript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于Javascript Programming Langu ...

  8. ASP.NET Web Api返回对象类型为JSON还是XML

    在Umbraco平台上开发过程中,我用WebApi返回JSON result给前端 前端使用React调用这个web api来获取JSON result 我写的web api方法是返回JSON 类型的 ...

  9. 获取json格式字符串的简单方法

    有的时候需要找一些Json格式的字符串,可以打开任意一个网页进入到调试模式,然后看network相关的访问信息,就可以获取到. 比如: 在记笔记的时候,点击保存后,会发出一些请求,然后有相应的相应,任 ...

随机推荐

  1. ECMAScript6 入门教程 初学记录let命令 块级作用域

    一.基本语法-let命令 (1)ES6新增了let命令,用来声明变量.所声明的变量,只在let命令所在的代码块内有效. 循环的计数器,就很合适使用let命令.计数器i只在for循环体内有效,在循环体外 ...

  2. MySQL中SQL语句2

    上一片介绍了一些基本的SQL的增删改查,这一片会介绍一些进阶的SQL语句使用. MySQL中的视图 视图是什么?当我们总是查询几张表的某个字段时,可以创建一张虚拟表,把这几个字段写入这个虚拟的表,这样 ...

  3. Python Mysql 交互

    Mysql 安装Python模块   Linux: yum install MySQL-python Windos: http://files.cnblogs.com/files/wupeiqi/py ...

  4. JNI与底层调用

    交叉编译 在一个平台下,编译出另一个平台能够执行的二进制的代码 平台:windows,mac os,linux 处理器:x86,arm,mips 交叉编译的原理 源代码->编译->链接-& ...

  5. 剑指offer（60）把二叉树打印成多行

    题目描述 从上到下按层打印二叉树,同一层结点从左至右输出.每一层输出一行. 题目分析 从上到下打印二叉树我们知道用队列可以实现,但是如果多行打印怎么做呢? 我们需要分割,在行与行之间进行分割.如何分割 ...

  6. 【Python游戏编程03--pygame事件与设备轮询】

    一.pygame事件 1.pygame事件可以处理游戏中的各种事情,完整的事件列表如下: QUIT,ACTIVEEVENT,KEYDOWN,KEYDOWN,MOUSEMOTION,MOUSEBUTTO ...

  7. [LspTrace]ReadAccConfig returns false! QT

    当qt运行出现以下信息时 [LspTrace]ReadAccConfig returns false! [LspTrace]FindMatchingProvider: inInfo is one of ...

  8. linux下如何源码编译安装vim

    1. 获取源码 git clone https://github.com/vim/vim.git ~/vim cd ~/vim 2. 配置 ./configure --prefix=/home/jel ...

  9. 分布式系列 - dubbo服务telnet命令

    dubbo服务发布之后,我们可以利用telnet命令进行调试.管理.Dubbo2.0.5以上版本服务提供端口支持telnet命令,下面我以通过实例抛砖引玉一下: 1.连接服务 测试对应IP和端口下的d ...

  10. Windows7下安装redmine-3.4.6

    Redmine 是一个开源的.基于Web的项目管理和缺陷跟踪工具.Redmine建立在Ruby on Rails(一个用于开发数据库驱动的网络应用程序的完整框架,基于计算机软件语言Ruby,给程序开发 ...