就是这个样的粗爆,手搓一个计算器:JSON格式化计算器

       作为程序员,没有合适的工具,就得手搓一个,PC端,移动端均可适用。废话不多说,直接上代码。

HTML:

<div class="calculator"><label for="jsonInput">输入 JSON 字符串:</label> <textarea id="jsonInput" rows="10" placeholder="请输入 JSON 字符串"></textarea><button onclick="formatJSON()">格式化</button><div class="result"><div>格式化结果:</div><pre id="jsonOutput" style="color: black; text-align: left;">结果将显示在此处</pre></div></div>

JS:

function formatJSON() {const jsonInput = document.getElementById('jsonInput').value.trim();if (jsonInput === '') {alert('请输入 JSON 字符串');return;}try {const jsonObject = JSON.parse(jsonInput);const formattedJSON = JSON.stringify(jsonObject, null, 4);document.getElementById('jsonOutput').textContent = formattedJSON;} catch (e) {alert('无效的 JSON 字符串,请检查输入内容');document.getElementById('jsonOutput').textContent = '无效的 JSON 字符串';}
}

CSS:

.calculator {width: 100%;background-color: #333;color: white;padding: 20px;border-radius: 10px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}textarea {width: 100%;margin-bottom: 10px;}label {display: block;margin-bottom: 10px;font-size: 16px;
}input, select {width: 100%!important;padding: 10px!important;margin-bottom: 20px;color: #000000; border-radius: 5px;border: 1px solid #555;font-size: 16px!important;background-color: #ffffff!important;
}button {width: 100%;padding: 10px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;font-size: 16px;
}button:hover {background-color: orange;
}.result {margin-top: 20px;text-align: center;
}option {background-color: #ffffff;
}p {font-size: 18px;margin-top: 5px!important;
}

线上运行,可以直接打开:JSON格式化计算器

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/6008.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

PaddleNLP的FAQ问答机器人

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【DDRNet模型创新实现人像分割】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模型实…

MySQL——索引

目录 一、磁盘 1.1 在系统软件上&#xff0c;并不直接按照扇区进行IO交互&#xff1a; 1.2 磁盘随机访问与连续访问 1.3 建立共识 二、Page 三、InnoDB 四、MyISAM 五、普通索引 一、磁盘 我们在使用Linux&#xff0c;所看到的大部分目录或者文件&#xff0c;其实就是保…

逆向CTF入门(如何找main)

Hello, world of reverse! start函数它在执行一些初始化操作,如获取命令行参数、获取环境变量值、初始化全局变量等&#xff0c;一切准备工作完成之后&#xff0c;再调用main函数 快速定位关键函数&#xff1a; 长驱直入法&#xff1a;当程序功能非常明确时&#xff0c;从程序…

【react框架之dvajs】官网不维护了,还有旧项目在用需要文档的看过来

文档链接: http://gaofeng222.host3v.club/dva-doc/ github:https://gaofeng222.github.io/dva-doc/ 应该是团队没精力搞了&#xff0c;放弃了这块&#xff01;https://github.com/umijs/umi/discussions/12387

探索魁北克:IT精英的理想移民地

在当今这个数字化时代&#xff0c;IT行业无疑是全球最具活力和发展潜力的领域之一。加拿大&#xff0c;尤其是魁北克省&#xff0c;以其开放的移民政策、优越的工作环境和高质量的生活&#xff0c;成为IT专业人士的理想移民目的地。 一、加拿大IT行业的吸引力 职业发展与稳定性…

Linux(CentOS)安装 Nginx

CentOS版本&#xff1a;CentOS 7 Nginx版本&#xff1a;1.24.0 1、下载 Nginx 打开Nginx官网&#xff1a;https://nginx.org/ 2、上传 Nginx 文件到 CentOS 使用FinalShell远程登录工具&#xff0c;并且使用 root 用户连接登录&#xff08;注意这里说的root用户连接登录是指…

Django安装

在终端创建django项目 1.查看自己的python版本 输入对应自己本机python的版本&#xff0c;列如我的是3.11.8 先再全局安装django依赖包 2.在控制窗口输入安装命令&#xff1a; pip3.11 install django 看到Successflully 说明我们就安装成功了 python的Scripts文件用于存…

Qt字符编码

目前字符编码有以下几种&#xff1a; 1、UTF-8 UTF-8编码是Unicode字符集的一种编码方式(CEF)&#xff0c;其特点是使用变长字节数(即变长码元序列、变宽码元序列)来编码。一般是1到4个字节&#xff0c;当然&#xff0c;也可以更长。 2、UTF-16 UTF-16是Unicode字符编码五层次…

微服务设计模式 - 网关路由模式(Gateway Routing Pattern)

微服务设计模式 - 网关路由模式&#xff08;Gateway Routing Pattern&#xff09; 定义 网关路由模式&#xff08;Gateway Routing Pattern&#xff09;是微服务架构中一种非常重要的设计模式&#xff0c;主要用于在客户端和微服务之间提供一个中间层。这一模式通过中央网关路…

【Axure高保真原型】PDF阅读器

今天和大家分享PDF阅读器的原型模板&#xff0c;我们点击左侧的PDF&#xff0c;点击后右侧能看到这个PDF的内容&#xff0c;每个PDF都可以点击查看&#xff0c;如果PDF内容太多&#xff0c;我们也可以通过鼠标滚动来查看。这个模板是用中继器制作的&#xff0c;所以使用也很方便…

uniapp学习(010-2 实现抖音小程序上线)

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战&#xff0c;开发打包微信小程序、抖音小程序、H5、安卓APP客户端等 总时长 23:40:00 共116P 此文章包含第113p的内容 文章目录 抖音小程序下载抖音开发者工具先去开发者工具里进行测试 抖音开放平台配置开始打包上传…

漏洞挖掘某电子商城类漏洞挖掘案例教程,手把手教你复现一个完整的漏洞挖掘全流程

前言 电子商城购物系统我们每天都能接触到&#xff0c;现在的商城系统&#xff0c;大多数已经在小程序、APP方向去开发了&#xff0c;因为灵活&#xff0c;方便管理且开发难度不高&#xff0c;当然&#xff0c;现在WEB系统还很多&#xff0c;我们本次会选几个SRC去浅挖一下那些…

C#入门013 表达式,语句详解 2

语句的定义 在计算机编程中&#xff0c;一条语句&#xff08;statement&#xff09;是命令式编程语言中表达某个要执行的动作的最小独立组成部分。用这种语言编写的程序是由一个或多个语句组成的序列构成的。语句可以包含内部组件&#xff0c;比如表达式&#xff08;expressio…

【运动的&足球】足球场景目标检测系统源码&数据集全套:改进yolo11-ASF-P2

改进yolo11-RetBlock等200全套创新点大全&#xff1a;足球场景目标检测系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.11.03 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示”展示的系统图片或…

数据结构之复杂度

hello everybody&#xff0c;好久不见&#xff0c;由于前些日子在学习文件操作&#xff0c;预处理相关知识&#xff0c;导致我好些天没写博客了&#xff0c;所以我先从数据结构开始写吧&#xff0c;等后面熟练些了再补回来&#xff0c;欧克&#xff0c;话不多说&#xff0c;进入…

使用Jest进行JavaScript单元测试

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用Jest进行JavaScript单元测试 引言 Jest 简介 安装 Jest 创建基本配置 编写测试用例 运行测试 快照测试 模拟函数 代码覆盖率…

Node.js 应用程序中的文件写入提升为 RCE

在这篇博文中,我们将强调代码安全基础的重要性。我们会展示一个技术案例:攻击者如何能够把 Node.js 应用中的文件写入漏洞转化为远程代码执行,即便目标系统的文件系统是以只读方式挂载的。这个技术通过利用暴露的管道文件描述符来获得代码执行能力,从而绕过了这类加固环境中的限…

Oracle视频基础1.4.5练习

1.4.5 看bbk的框架 ls env | grep ORA cd /u01/oradata ls ll cd bbk ll cd /u01/admin/ ll ll bbk cd cd db cd dbs ls vi initbbk.ora clear ls ll env | grep ORA执行创建数据库语句。 sqlplus /nolog conn /as sysdba create spfile from pfile ! ls ll exit startup nom…

Echats柱状图的横坐标用图片显示

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>图片作为横坐标示例 - ECharts</title><!-…

vscode php Launch built-in server and debug, PHP内置服务xdebug调试,自定义启动参数配置使用示例

在vscode中&#xff0c;当我们安装了插件 PHP Debug&#xff08;xdebug.php-debug&#xff09;或者 xdebug.php-pack 后 我们通过内置默认的 php xdebug配置启动php项目后&#xff0c;默认情况下我们在vscode中设置断点是不会生效的&#xff0c;因为我们的内置php服务默认启动时…