html页面展示json数据并格式化

A七秒的记忆

于 2018-11-01 10:14:31 发布

阅读量1.2w

点赞数 6

分类专栏： JAVA相关文章标签： javascript jquery html

本文链接：https://blog.youkuaiyun.com/qq_37663692/article/details/83615886

版权

该博客介绍如何在HTML页面中展示JSON数据并进行格式化，包括使用JavaScript和jQuery。文章展示了效果图，详细说明了关键参数用红色高亮，不同数据类型使用不同颜色区分，如数值为橘黄色，字符串为绿色，布尔值为蓝色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

json数据在html页面展示并格式化

一、展现效果图

在这里插入图片描述描述信息：

key值全部采用红色标出，表示重要参数；
value值采用不同颜色标出，数值类型的采用橘黄色，字符串采用绿色，布尔采用蓝色。。。

二、源代码展示

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <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; }

    .showinfo{
        position: absolute;
        background-color: #eef1f8;
        width: 200px;
        padding: 5px;
        border-radius: 4px;
        border: 1px solid #ccc;
        display: none;
    }
    .showinfo pre{