Web响应于窗口的大小调整。定位问题

提问者：小点点

Web响应于窗口的大小调整。定位问题

我正在使用web speech API开发一个用于speech Recognition的应用程序。我对“history:”下面的列的格式有问题。我想创建一个如图所示的列表。但是，当我调整浏览器窗口的大小时，列表并不停留在一个地方。我想把它放在历史下面:。

我不是真的能够理解如何解决这个问题，因为我不是最精通的造型。如果有人能帮忙，我将附加HTML，CSS和JS文件的代码。

const searchBar = document.querySelector('#searchBar');
const mic = document.querySelector('i.fa.fa-microphone');
const micIcon = document.querySelector('i');
const textBox = document.getElementsByTagName('input')[0];
const para = document.getElementsByTagName('p')[0];
const info = document.querySelector('.info');

window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
window.SpeechRecognitionEvent = window.SpeechRecognitionEvent || window.webkitSpeechRecognitionEvent;

const recognition = new SpeechRecognition();

// results are continuous
recognition.continuous = true;

const msg = () => {
  mic.addEventListener('click', () => {
    // the classList will output fa at position 0 and fa-microphone at position 1.
      if(micIcon.classList.contains("fa-microphone")){
      recognition.start();
      console.log("Started recognition");
    }
    else{
      recognition.stop();
      console.log("Stopped recognition");
  }
  });
}

const list = (event) => {
  const resultIndex = event.resultIndex;

  // const p = document.createElement('p');
  const li = document.createElement('li');
  const list = document.querySelector('#demo');
  const text = document.createTextNode(event.results[resultIndex][0].transcript);


  li.appendChild(text);
  list.appendChild(li);
  info.appendChild(list);


  // 
  // p.appendChild(text);
  // info.appendChild(p);
}

if(recognition){
  console.log("Your Browser supports speech Recognition");

  msg();

  recognition.onstart = function() {
    micIcon.classList.remove("fa-microphone");
    micIcon.classList.add("fa-microphone-slash");
    console.log("Rec Active");
  }

  recognition.onend = function(){
    micIcon.classList.remove("fa-microphone-slash");
    micIcon.classList.add("fa-microphone");
    console.log("Rec not active");
    textBox.focus();
  }

  recognition.onresult = function(event){
    const resultIndex = event.resultIndex;
    const transcript = event.results[resultIndex][0].transcript;

    if(transcript.toLowerCase().trim() === "stop recording"){
      recognition.stop();
    }
    else if(!textBox.value){
      textBox.value = transcript;
    }
    else{
      if(transcript.toLowerCase().trim() === "go"){
        searchBar.submit();
      }
      else if(transcript.toLowerCase().trim() === "reset"){
        searchBar.reset();
      }
      else{
        textBox.value = transcript;
      }
    }

    list(event);
  }
}

body {
  margin: 0 !important;
  padding: 0 !important;
  /* height: 100%; */
  overflow: hidden;
}

.form {
  /* The image used */
  background-image: url("unsplash.jpg");
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  /* background-repeat: no-repeat; */
  background-size: cover;
  text-align: center;
  padding-top: 10%;
}

.para{
  color: white;
  padding: 15px;
  font-size: 30px;
  font-family: 'Lexend Zetta', sans-serif;
}

.info{
  color: white;
  font-family: 'Lexend Zetta', sans-serif;

}

input{
  width: 50%;
  height: 8%;
  border-radius: 5px;
  background-color: black;
  text-align: center;
}

i{
  top: 23%;
  right: 27%;
  position: absolute;
  position: fixed;
}

/* Changes the textcolor when searching to white */
input, select, option {
  color: white;
  font-size: 15px;
}

<html>
<head>
  <title>Search with Speech</title>
  <link href="https://fonts.googleapis.com/css2?family=Lexend+Zetta&family=Mukta&display=swap" rel="stylesheet">
  <link rel = "stylesheet" href = "styles.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
</head>
<body>
  <div class = "form">
    <form action = "https://www.google.com/search" target = "_blank" id = "searchBar">
    <!-- autofocus automatically focuses on the search bar when the user first lands on the webpage,
    autocomplete is off so it does not make suggestions -->
    <input type = "text" name = "q" placeholder= "Search Google ...." autocomplete="off" autofocus>
      <i class = "fa fa-microphone" style = "color: white"></i>
    </input>
    </form>


    <p class = "para">
      <strong><em>History:</em></strong>
    </p>

    <p class="info">
      <ul id = "demo">

      </ul>
    </p>


  </div>
  <script src = "index.js"></script>
</body>
</html>

共1个答案

匿名用户

尝试将i标记css更改为:

i{
  width: 50px;
  top: 23%;
  right: calc(50% - 25px);
  position: absolute;
  position: fixed;
}

Web响应于窗口的大小调整。定位问题

共1个答案

相关问题

热门标签

Web响应于窗口的大小调整。 定位问题

共1个答案

相关问题

热门标签

微信关注

Web响应于窗口的大小调整。定位问题