<source id="wfbuo"><optgroup id="wfbuo"></optgroup></source>
<rt id="wfbuo"></rt><strong id="wfbuo"></strong>
<rt id="wfbuo"><optgroup id="wfbuo"></optgroup></rt>
<rt id="wfbuo"></rt>

  • <strong id="wfbuo"></strong>

    <menuitem id="wfbuo"></menuitem>
  • <strong id="wfbuo"></strong>
  • 當前位置 主頁 > 關于我們 > 站長日志 >

      html,html中如何美化展示json格式數據

      欄目:站長日志 時間:2021-03-25 10:22

           直接上代碼:
           html中主要加一個pre 的標簽
      <h2>GeoJsonTxt示例如下:</h2>
      <div>
          <h4>注意:示例中<span style="color:red">features,geometry,coordinates,properties,name,description</span>字段是必須有的,
              字段名稱不能改變,需要擴展的字段可以在<span style="color:red">properties</span>里面自行添加</h4>
      </div>
      <pre id="geoJsonTxt">
      </pre>
           js代碼:
      function showGeoJsonTxt(){
      $('#geoJsonTxt').html(JsonFormat());
      }
       
      function JsonFormat() {
      var json={
        "type": "FeatureCollection",
        "features": [
          {
            "type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": [
                123,
                22,
                0
              ]
            },
            "properties": {
              "name": "必須有的字段",
              "description": "必須有的字段",
      "age":"擴展字段,可以自行添加,擴展",
      "type":"擴展字段,可以自行添加,擴展"
            }
          },
      {
            "type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": [
                123,
                32,
                0
              ]
            },
            "properties": {
              "name": "必須有的字段",
              "description": "必須有的字段",
            }
          }
        ]
      };
      if (typeof json != 'string') {
      json = JSON.stringify(json, undefined, 2);
      }
      json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
      return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
      var cls = 'number';
      if (/^"/.test(match)) {
      if (/:$/.test(match)) {
      cls = 'key';
      } else {
      cls = 'string';
      }
      } else if (/true|false/.test(match)) {
      cls = 'boolean';
      } else if (/null/.test(match)) {
      cls = 'null';
      }
      return '<span class="' + cls + '">' + match + '</span>';
      });
      }
           CSS代碼,顯示的時候可以更加美化
      <style>
       pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
       .string { color: green; }
       .number { color: darkorange; }
       .boolean { color: blue; }
       .null { color: magenta; }
       .key { color: red; }
      </style>
           效果如下:
           原文鏈接:https://blog.csdn.net/qq_18298439/article/details/80627302
    推土機2019:ImageCombiner - Java服務端圖片合成工具,好用! 萊布尼茨:【從零開始擼一個App】Fragment和導航中的使用 等不到的口琴:億級流量架構之資源隔離思路與方法 TOP生物信息:一文學會常規轉錄組分析 Twittytop:我的2020之路 我愛睡蓮:keepalived-1.3.5+MHA部署mysql集群 程序員養成日記:mysql一張表到底能存多少數據? 等你歸去來:java線程池趣味事:這不是線程池 Linyiwei:C++算法代碼――Tuna Linux中執行shell腳本的4種方法總結 關于ios配置微信config出現驗簽失敗的問題解決 ASP.NET Core擴展庫之Http通用擴展庫的使用詳解 Java在Excel中添加水印的實現(單一水印、平鋪水印) 基于UDP協議實現聊天系統 R語言中ifelse、which、%in%的用法詳解 constant,Java中定義常量(Constant)的幾種方法 float,CSS Float(浮動),CSS Float(浮動)用法 fixed,JavaScript fixed() 方法,JavaScript fixed() 實例 sprintf,sprintf 函數用法詳細注解 html代碼 php網站,php網站搭建步驟,PHP環境搭建教程 調試js,JS調試,js調試工具 xml是什么.xml格式文件,xml怎么用 jsswitch語句,JavaScript Switch 語句,JavaScript Switch用法 html5 教程,什么是 HTML5,HTML5都有什么功能 css,通過JS修改CSS樣式 網站建設哪,什么是網站建設?網站建設的常見要素有哪些? html網站,前端html網站的發布過程 document.cookie,使用document對象操作cookie javascript 數組,JavaScript數組去掉重復數據總結
    欧美日韩免费无码