时间戳

首页 > 解决方案 > 如何在更改屏幕尺寸等时让我的 Web 应用程序响应更快？

javascript - 如何在更改屏幕尺寸等时让我的 Web 应用程序响应更快？

问题描述

我正在使用网络语音 API 开发 SpeechRecognition 应用程序。我已经完成了大部分工作，但想让我的页面更具响应性，并且页面上的项目在网页改变大小时不会移动。

这就是它现在的样子。

每当我更改屏幕大小时，文本框中的麦克风都会移动并且不再位于正确的位置。我真的无法理解如何解决这个问题，因为我还不是最精通造型。如果有人可以帮助我附上我的 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>

标签： javascripthtmlcss

解决方案

您还可以使用 flex-box 创建搜索文本框，该文本框本质上是响应式的，并且在 -2 分辨率不同的情况下会偏离其位置。请参阅以下示例以获得更多说明。

html,body{
  width: 100%;
  height: 100%;
}

.search-form{
   display: flex;
   justify-content: center;
   align-content: center;
   height:100%;
   width:100%;
 }
    
.search-div{ 
    display: inline-flex;
    border: 1px solid black;
    padding: 10px;
}    

.search-input{
   width: 100%;
   border: 0px;
 }
 
 input:focus, textarea:focus, select:focus{
   outline: none;
 }
 form{
  height: fit-content;
  width: 60%
 }
 
 
<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="search-form">
<form>
<div class="search-div">
<input class="search-input" type = "text" name = "q" placeholder= "Search Google ...." autocomplete="off" autofocus>
      <i class = "fa fa-microphone" style = "color:black"></i>
    </input>
</div>
</form>
</div>
</body>
</html>

希望它会有所帮助。

推荐阅读