---

效果图

---

html

<div class="w_680 p_t_20 p_b_20 p_l_6 p_r_6">
    <div class="w_100_ d_f jc_c">
        <textarea class="w_97_ h_86 fs_16 resize_none outline_none" oninput="oninputF(event)"></textarea>
        <script src="./index.js"></script>
    </div>

    <div class="w_90_ h_50 lh_50 m_t_10 m_l_a m_r_a bc_1296db color_fff fs_18 fw_700 ta_c radius_6 cursor_pointer"
        onclick="handle()">转换</div>

    <div class="p_10">
        <div>
            <div class="fs_18 fw_800">Ascii码</div>
            <div class="w_100_ ww_bw" id="idAscii"></div>
        </div>

        <hr>

        <div class="m_t_18">
            <div class="fs_18 fw_800">UniCode码(十六进制)</div>
            <div class="w_100_ ww_bw" id="idUniCode"></div>
        </div>

        <hr>

        <div class="m_t_18">
            <div class="fs_18 fw_800">二进制</div>
            <div class="w_100_ ww_bw" id="idBinarySystem"></div>
        </div>
    </div>
</div>

---

JavaScript

let obj = {
    originArr: [],
    ASCII_TEXT: [],
    UNI_CODE_TEXT: [],
    BINARY_SYSTEM_TEXT: [],
    ASCII_STRING: '',
    UNI_CODE_STRING: '',
    BINARY_SYSTEM_STRING: ''
};

// 键盘录入
function oninputF({ target: { value } }) {
    obj.originArr = [];

    for (let i = 0; i < value.length; i++) {
        let str = value.charAt(i),
            ASCII = String(str.charCodeAt(0)),
            BINARY_SYSTEM = parseInt(ASCII).toString(2),
            UNI_CODE = str.charCodeAt(0).toString(16);

        obj.originArr.push({
            id: `id${i + 1}_${ASCII}_${BINARY_SYSTEM}_${UNI_CODE}`,
            text: str,
            ASCII,
            BINARY_SYSTEM,
            UNI_CODE
        });
    }
}

// 转换
function handle() {
    obj.ASCII_TEXT = [];
    obj.UNI_CODE_TEXT = [];
    obj.BINARY_SYSTEM_TEXT = [];
    obj.ASCII_STRING = '';
    obj.UNI_CODE_STRING = '';
    obj.BINARY_SYSTEM_STRING = '';

    let idAscii = document.querySelector('#idAscii'),
        idUniCode = document.querySelector('#idUniCode'),
        idBinarySystem = document.querySelector('#idBinarySystem');

    idAscii.innerHTML = '';
    idUniCode.innerHTML = '';
    idBinarySystem.innerHTML = '';

    if (!obj.originArr.length) alert('请输入值');

    obj.originArr.forEach(item => {
        obj.ASCII_TEXT.push(item.ASCII);
        obj.UNI_CODE_TEXT.push(item.UNI_CODE);
        obj.BINARY_SYSTEM_TEXT.push(item.BINARY_SYSTEM);
    });

    obj.ASCII_STRING = concatenatingStrings(obj.ASCII_TEXT, ',10,');
    obj.UNI_CODE_STRING = concatenatingStrings(obj.UNI_CODE_TEXT, ',a,');
    obj.BINARY_SYSTEM_STRING = concatenatingStrings(obj.BINARY_SYSTEM_TEXT, ',1010,');

    idAscii.innerHTML = obj.ASCII_STRING;
    idUniCode.innerHTML = obj.UNI_CODE_STRING;
    idBinarySystem.innerHTML = obj.BINARY_SYSTEM_STRING;
}

function concatenatingStrings(arr, type = ',') {
    arr = arr.toString();
    arr = arr.split(type);

    let len = arr.length,
        str = '';

    if (len > 1) {
        for (let i = 0; i < len - 1; i++) str += arr[i] + '<br>';

        str += arr[len - 1];
    } else {
        str = arr[0];
    }

    return str;
}