二进制转换工具 - Welcome to

废话不多说直接上代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二进制互转工具</title>
    <!-- 引入 layui.css -->
    <link href="https://unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet"></link>
    <!-- 引入 layui.js -->
    <script src="https://unpkg.com/layui@2.8.0/dist/layui.js"></script>
    <!--引入jquery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style type="text/css">
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: cornsilk;
        }

        .container {
            display: flex;
            flex-direction: row;
        }

        .column {
            flex-basis: 50%;
            padding: 20px;
        }

        textarea {
            width: 100%;
            height: 200px;
            resize: none;
            border: 1px solid #ccc;
            padding: 10px;
            font-size: 16px;
        }

        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

        .title {
            text-align: center;
        }

        .copy {
            background-color: #008CBA;
        }

        .clear {
            background-color: #f44336;
        }
    </style>

<script>
function convertToBinary() {
    let input = document.getElementById("input").value.trim();

    if(input) {
        // 将文本转换为二进制
        let binary = "";

        for(let i = 0; i < input.length; i++) {
            let charCode = input.charCodeAt(i).toString(2);

            while(charCode.length < 8) {
                charCode = "0" + charCode;
            }

            binary += charCode + " ";
        }

        // 显示二进制
        document.getElementById("output").value = binary.trim();
    } else {
        alert("请输入文本或二进制");
    }
}


function convertToText() {
    let input = document.getElementById("input").value.trim();

    if(input) {
        // 将二进制转换为文本
        let text = "";

        input.split(" ").forEach(function(binary) {
            let charCode = parseInt(binary, 2);

            text += String.fromCharCode(charCode);
        });

        // 显示文本
        document.getElementById("output").value = text;
    } else {
        alert("请输入文本或二进制");
    }
}

//一键复制
function copyOutput() {
    let output = document.getElementById("output");
    output.select();
    document.execCommand("copy");
    alert("已复制到剪贴板");
}

//一键清除
function clearInput() {
    document.getElementById("input").value = "";
}

//一键粘贴
function pasteFromClipboard() {
    navigator.clipboard.readText()
        .then(text => {
            $("#input").val(text.trim());
        })
        .catch(err => {
            console.error('Failed to read clipboard contents: ', err);
        });
    }
</script>

</head>
<body>
    <h1 class="title">在线二进制转文本文本转二进制转换器</h1>

    <div class="container">
        <div class="column">
            <h2 style="text-align: center;" >输入</h2>
            <textarea id="input" placeholder="在此处输入文本或二进制,每隔8位空一格,CTRL+Z撤销~"></textarea>
            <div class="layui-btn-container">
                <button class="layui-btn" onclick="convertToBinary()">转换为二进制</button>
                <button class="layui-btn" onclick="convertToText()">转换为文本</button>
                <button class="layui-btn layui-btn-danger" onclick="clearInput()">清除</button>
                <button class="layui-btn" onclick="pasteFromClipboard()">粘贴</button>
            </div>
        </div>

        <div class="column">
            <h2 style="text-align: center;" >输出</h2>
            <textarea id="output" placeholder="此处是输出框哦！可以自由复制或点击下面的一键复制~" ></textarea>
            <button class="layui-btn layui-btn-normal" onclick="copyOutput()">复制</button>
        </div>
    </div>
</body>
</html>
预览:

也可以点击此链接