纯HTML调用restfull api工具

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>API调用工具</title><style>@keyframes marquee {0% {transform: translateX(0%);}80% {transform: translateX(70%);}}.marquee {animation: marquee 2s linear infinite;flex: 1;color: #004d8c;font-size: 20px;}@keyframes marquee2 {0% {transform: translateX(-20%);}50% {transform: translateX(90%);}}.marquee2 {animation: marquee 3s linear infinite;flex: 1;color: rebeccapurple;font-size: 12px;}body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f2f2f2;}.container {display: flex;height: 100vh;}.left-column {flex-grow: 1;flex-basis: 50%;overflow: auto;background-color: #fff;border-right: 1px solid #ccc;padding: 20px;}.right-column {flex-grow: 1;flex-basis: 50%;background-color: #fff;padding: 20px;overflow: auto;margin: 5px;}h1 {margin-bottom: 20px;color: #555;}label {display: block;margin-bottom: 5px;font-weight: bold;color: #555;}input[type="text"], select, textarea {width: 100%;padding: 8px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;color: #555;}button {display: inline-block;padding: 10px 20px;background-color: #4caf50;color: #fff;border: none;border-radius: 4px;cursor: pointer;}button:hover {background-color: #45a049;}#response {white-space: pre;color: #333;}</style>
</head>
<body>
<div class="container"><div class="left-column"><div style="height: 60px;width: auto;border-bottom: 1px solid #7171C6"><div style="display: flex;" id="pmd1"><div class="marquee">*</div><div class="marquee2">*</div><div class="marquee">*</div><div class="marquee">z</div><div class="marquee2">*</div><div class="marquee2">*</div><div class="marquee2">*</div><div class="marquee">*</div><div class="marquee2">*</div></div><div style="display: flex;" id="pmd2"><div class="marquee2">*</div><div class="marquee2">*</div><div class="marquee">*</div><div class="marquee2">*</div><div class="marquee2">*</div><div class="marquee">*</div><div class="marquee">*</div><div class="marquee">*</div><div class="marquee2">*</div><div class="marquee2">*</div><div class="marquee2">*</div><div class="marquee">*</div></div></div><label for="url">接口地址:</label><input type="text" id="url" placeholder="请输入接口地址" required><label for="method">请求方法:</label><select id="method"><option value="GET">GET</option><option value="POST">POST</option><option value="PUT">PUT</option><option value="DELETE">DELETE</option></select><label for="params">请求参数:</label><input type="text" id="params" placeholder="请输入请求参数"><label for="body">请求体内容(JSON格式):</label><textarea id="body" placeholder="请输入请求体内容" rows="6"></textarea><label for="token">请求头Token:</label><input type="text" id="token" placeholder="请输入请求头Token"><label for="account">请求头Account:</label><input type="text" id="account" placeholder="请输入请求头Account"><label for="password">请求头Password:</label><input type="text" id="password" placeholder="请输入请求头Password"><button onclick="sendRequest()">发送请求</button></div><div class="right-column"><div id="response"></div></div>
</div><script>function setFontSize(id) {const div = document.getElementById(id);// 获取所有子元素const children = div.children;for (let i = 0; i < children.length; i++) {// 设置子元素的样式属性const child = children[i];child.style.fontSize = Math.floor(Math.random() * 8 + 10) + 'px'; // 设置字体大小为10~30px之间的随机值}}function replaceWithRandomLetters(id) {const myDiv = document.getElementById(id);const letters = "abcdefghijklmnopqrstuvwxyz"; // 可以自己定义字符列表for (let i = 0; i < myDiv.children.length; i++) {const child = myDiv.children[i];let newContent = "";for (let j = 0; j < child.textContent.length; j++) {const index = Math.floor(Math.random() * letters.length);newContent += letters[index];}child.textContent = newContent;}}replaceWithRandomLetters("pmd1");replaceWithRandomLetters("pmd2");function changeMarqueeDuration() {const marqueeItems = document.querySelector("#marqueeItems");const interval = Math.floor(Math.random() * 10 + 15) * 1000;marqueeItems.style.animationDuration = `${interval}ms`;}// 每隔一段时间调用一次changeMarqueeDuration函数setInterval(changeMarqueeDuration, 1000); // 这里设置为每1秒修改一次滚动时间function changeMarqueeDuration2() {const marqueeItems2 = document.querySelector("#marquee2");const interval2 = Math.floor(Math.random() * 20 + 10) * 1000; // 生成一个10到20秒之间的随机整数，乘1000转换为毫秒marqueeItems2.style.animationDuration = `${interval2}ms`; // 将animationDuration属性设置为随机生成的时间间隔}// 每隔一段时间调用一次changeMarqueeDuration函数setInterval(changeMarqueeDuration2, 2000); // 这里设置为每1秒修改一次滚动时间setInterval(function () {replaceWithRandomLetters("pmd1");setFontSize("pmd1");}, 2000);setInterval(function () {replaceWithRandomLetters("pmd2");setFontSize("pmd2");}, 1000);function sendRequest() {var url = document.getElementById("url").value;var method = document.getElementById("method").value;var params = document.getElementById("params").value;var body = document.getElementById("body").value;var token = document.getElementById("token").value;var account = document.getElementById("account").value;var password = document.getElementById("password").value;// 拼接URL和参数if (params) {url += "?" + params;}var xhr = new XMLHttpRequest();xhr.open(method, url, true);xhr.setRequestHeader("Content-Type", "application/json");xhr.setRequestHeader("Authorization", token);xhr.setRequestHeader("account", account);xhr.setRequestHeader("password", password);xhr.onreadystatechange = function () {if (xhr.status === 200 || xhr.status === 201) {var response = JSON.parse(xhr.responseText);document.getElementById("response").innerHTML = JSON.stringify(response, null, 2);} else {document.getElementById("response").innerHTML = "状态码【"+xhr.status+"】，接口请求失败，请重试。";}};if (method === "GET") {xhr.send();} else {xhr.send(body);}}
</script>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！