亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何讓這個“轉換”按鈕將文本從輸入轉換為二進制？

如何讓這個“轉換”按鈕將文本從輸入轉換為二進制？

波斯汪 2023-06-29 15:46:05
我正在嘗試創建一個可以使用 JavaScript 將文本轉換為二進制的基本網站，但我真的不知道如何使按鈕Convert!工作。有人有我可以使用的簡單修復方法嗎？（別介意 CSS 缺少一些代碼，我還沒說完。）function convert() {  const input_el = document.querySelector(".input-text");  const output_el = document.querySelector(".output-binary");  input_el.addEventListener("input", (event) => {    let input_text = event.target.value;    let output_arr = [];        for (var i = 0; i < input_text.length; i++) {      output_arr.push(input_text.charCodeAt(i).toString(2));    }        output_el.innerHTML = output_arr.join(" ");  });}body {  margin: 0;  padding: 0;}header {  padding: 30px;  background: #09A954;  color: white;  text-align: center;  font-family: arial;  font-size: 30px;}.navbar {  padding: 12px;  background: #363636;  color: white;  font-size: 15px;}.container {  display: flex;  flex-direction: column;  padding: 80px;  background: #B3B3B3;}.input_box {  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  padding: 40px;  background: #D35400;  border-radius: 10px;  text-align: center;  box-shadow: 0px 3px 5px #000000;  height: 100px;  width: ;}input {  background: #D35400;  border: none;  border-bottom: 2px solid #000000;  font-size: 15px;}button {  width: 100px;}.output_box {  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  padding: 40px;  background: #2980B9;  border-radius: 10px;  text-align: center;  box-shadow: 0px 3px 5px #000000;  height: 100px;  width: ;}p2 {  font-size: 30px;  font-family: calibri;}p4 {  font-size: 15px;  font-family: arial;}鏈接到 JSFiddle：https://jsfiddle.net/SaltySandwich/65te8omy/
查看完整描述

2 回答

?
飲歌長嘯

TA貢獻1951條經驗 獲得超3個贊

我修復了您現有的項目。

我對 JavaScript 采取了一種更簡單的方法。您可以在 JavaScript 代碼上用 6 行編寫您需要的所有內容:)

對于您的輸出，您應該使用<output>代替<input>.

看看這個：


function convert() {

  var output = document.getElementById("output_text");

  var input = document.getElementById("input_text").value;

  output.value = "";

  for (i = 0; i < input.length; i++) {

    output.value += input[i].charCodeAt(0).toString(2) + " ";

  }

}

body {

  margin: 0;

  padding: 0;

}


header {

  padding: 30px;

  background: #09A954;

  color: white;

  text-align: center;

  font-family: arial;

  font-size: 30px;

}


.navbar {

  padding: 12px;

  background: #363636;

  color: white;

  font-size: 15px;

}


.container {

  display: flex;

  flex-direction: column;

  padding: 80px;

  background: #B3B3B3;

}


.input_box {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding: 40px;

  background: #D35400;

  border-radius: 10px;

  text-align: center;

  box-shadow: 0px 3px 5px #000000;

  height: 100px;

  width: ;

}


input {

  background: #D35400;

  border: none;

  border-bottom: 2px solid #000000;

  font-size: 15px;

}


input:focus {

  border: none;

  border-bottom: 2px solid #000000;

  font-size: 15px;

  outline: none;

}


button {

  width: 100px;

}


.output_box {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding: 40px;

  background: #2980B9;

  border-radius: 10px;

  text-align: center;

  box-shadow: 0px 3px 5px #000000;

  height: 100px;

  width: ;

}


p2 {

  font-size: 30px;

  font-family: calibri;

}


p4 {

  font-size: 15px;

  font-family: arial;

}

<!DOCTYPE html>

<html>


<head>

  <title>Text to binary converter</title>

  <meta charset="utf-8">

  <link rel="stylesheet" href="style.css">

</head>


<body>

  <header>

    <h1>Text to binary converter</h1>

  </header>


  <div class="navbar">

    <p1>link</p1>

  </div>


  <div class="container">

    <div class="input_box">

      <p2>This is what a human sees:</p2><br>

      <p3>Please enter text below</p3><br>

      <!--INPUT FIELD-->

      <input id="input_text" value="Human sees this" />

    </div><br><br>


    <button onclick="convert()">Convert!</button><br><br>


    <div class="output_box">

      <p2>This is what a machine sees:</p2><br>

      <!--INPUT FIELD-->

      <output id="output_text">

        </div>

    </div>


    <script src="main.js"></script>


</body>


</html>


哦..我還稍微編輯了你的CSS，這樣輸入周圍就沒有煩人的邊框了...你可以通過刪除以下內容來刪除我的更改：


  input:focus {

    border: none;

    border-bottom: 2px solid #000000;

    font-size: 15px;

    outline: none;

  }


如果您需要清除任何內容，請務必在這篇文章下發表評論:)


查看完整回答
反對 回復 2023-06-29
?
慕沐林林

TA貢獻2016條經驗 獲得超9個贊

看看這個：


function convert() {

    var  output=document.getElementById("ti2");  

    var input=document.getElementById("ti1").value;

      output.value = "";

      for (i=0; i < input.length; i++) {

           output.value +=input[i].charCodeAt(0).toString(2) + " ";

      }

  }

input {font-size:12px; width:200px;}

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title></title>

        <meta name="description" content="">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="">

    </head>

    <body>

        <input id="ti1" value ="Human sees this"/>

        <input id="ti2" value ="Machine sees this"/>

        <button onclick="convert();">Convert!</button>

        <script src="main.js"></script>

    </body>

</html>

它應該給你基本的想法......



查看完整回答
反對 回復 2023-06-29
  • 2 回答
  • 0 關注
  • 145 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號