Question

我正在使用html，css和javascript创建货币转换器应用程序，当在左侧的<input>中输入文本时，转换后的值将出现在右侧的输入元素中：{{1 }}。

我想使<p id = "converted">上的下划线（边框底部）的长度相同。当前，当您在左侧的输入元素中输入文本时，右侧的文本会增大大小并增加下划线。我希望下划线保持与元素中没有文本时的下划线相同。

我目前正在像这样设计<p id = "converted">元素的样式：

<p id = "converted">

我认为我使用的API不能与堆栈溢出代码段一起正常工作，但我将包括指向代码笔的链接：https://codepen.io/oliknight/pen/XLvQow

padding-right: 40%; 
border-bottom: 0.5vh solid white;

let currlet currencyArr = [];
let ratesArr = [];
window.addEventListener("load", () => {
  const api = "https://api.exchangeratesapi.io/latest?base=GBP";
  fetch(api)
    .then(response => {
      return response.json();
    })
    .then(data => {
      for (currency in data.rates) {
        currencyArr.push(currency);
        ratesArr.push(data.rates[currency]);

        // create 'option' element here
        var optionLeft = document.createElement("option");
        var optionRight = document.createElement("option");
        optionLeft.textContent = currency;
        optionRight.textContent = currency;
        document.querySelector("#left-select").appendChild(optionLeft);
        document.querySelector("#right-select").appendChild(optionRight);
      }

      document.querySelector("#input").addEventListener("keyup", convert);

      function convert() {
        const input = document.querySelector("#input");
        let leftSelectValue = document.querySelector("#left-select").value;
        let convertedNumber = document.querySelector("#converted");

        for (let i = 0; i < currencyArr.length; i++) {
          if (leftSelectValue === currencyArr[i]) {
            convertedNumber.textContent = ratesArr[i].toFixed(4) * input.value;
          }
        }
      }
    });
});
encyArr = [];
let ratesArr = [];
window.addEventListener("load", () => {
  const api = "https://api.exchangeratesapi.io/latest?base=GBP";
  fetch(api)
    .then(response => {
      return response.json();
    })
    .then(data => {
      for (currency in data.rates) {
        currencyArr.push(currency);
        ratesArr.push(data.rates[currency]);

        // create 'option' element here
        var optionLeft = document.createElement("option");
        var optionRight = document.createElement("option");
        optionLeft.textContent = currency;
        optionRight.textContent = currency;
        document.querySelector("#left-select").appendChild(optionLeft);
        document.querySelector("#right-select").appendChild(optionRight);
      }

      document.querySelector("#input").addEventListener("keyup", convert);

      function convert() {
        const input = document.querySelector("#input");
        let leftSelectValue = document.querySelector("#left-select").value;
        let convertedNumber = document.querySelector("#converted");

        for (let i = 0; i < currencyArr.length; i++) {
          if (leftSelectValue === currencyArr[i]) {
            convertedNumber.textContent = ratesArr[i].toFixed(4) * input.value;
          }
        }
      }
    });
});

html {
  font-family: "Lato", sans-serif;
  font-weight: thin;
  background-image: linear-gradient(to right top, #90d0ff, #008ef7);
  color: white;
  height: 100vh;
  overflow: hidden;
}

h1 {
  text-align: center;
  font-size: 5em;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

.container {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container p {
  font-size: 8em;
  display: inline-block;
  padding-right: 40%;
  border-bottom: 0.5vh solid white;
  max-width: 50%;
}

.parent {
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

.container select {
  background: transparent;
  color: white;
  padding: 20px;
  width: 80px;
  height: 60px;
  border: none;
  font-size: 20px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
  -webkit-appearance: button;
  outline: none;
  margin-left: 10%;
}

.original {
  background: transparent;
  border: none;
  border-bottom: 0.5vh solid white;
  font-size: 8em;
  max-width: 50%;
  outline: none;
  font-family: "Lato", sans-serif;
  font-weight: thin;
  color: white;
}

谢谢！

Answer 1

如果在CSS中将max-width替换为width，则无论转换后的数字有多长，百分比（例如50％）width都将保持不变。但是，这给您的溢出带来了问题。

您可以删除填充，但是仍然会遇到问题，根据设备的大小，最后仅显示半个数字

因此，您可能希望减小字体大小或尝试使用宽度百分比（可能是49或51 ..），或同时使用这两个百分比。.

如果您确切知道返回的转换后的数字中将包含多少个十进制数字，这将有助于确定适当大小的字体。

祝你好运，希望对你有帮助

不再强调下划线

1 个答案: