纯HTML调用restfull api工具

墨雨森林
于 2023-10-19 16:50:56 发布
阅读量160
点赞数
文章标签： css css3 javascript
本文链接：https://blog.csdn.net/SUPERLEIJIAWEI/article/details/133930200
版权
<!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>