Question

我想制作一个有两个文本框的网页，一个Celsius和Fahrenheit框。在他们之间，有一个转换按钮，将摄氏温度转换为华氏温度，华氏温度转换为摄氏温度。如果任何一个框中都有字母，我想取消转换，然后弹出一个警告说＆＃34;只有数字！＆＃34;到目前为止，我还没有弄清楚如何获取警报，当我在摄氏度框中键入数字时，它总是在同一个框中显示数字-18。华氏度很好。

HTML：

<html>
<head>
  <title>Temparature Converter</title>
  <script type="text/javascript" src="tempconversion.js"></script>
</head>
<body>
  Celsius: <input id="c" onkeyup="convert('C')">
  <button type="button" id="convert" onclick="convertTemp()">Convert</button>
  Fahrenheit: <input id="f" onkeyup="convert('F')">
</body>
</html>

JavaScript的：

function convertTemp(degree) {
  if (degree == "C") {
    F = document.getElementById("c").value * 9 / 5 + 32;
    document.getElementById("f").value = Math.round(F);
  } else {
    C = (document.getElementById("f").value -32) * 5 / 9;
    document.getElementById("c").value = Math.round(C);
  }
}

注意：我从W3Schools获得了一些代码，所以我认为onkeyup转换有点好笑。如果可能，请通知我如何更改以及JavaScript。

Answer 1

不需要onkeyup属性，因为来自W3Schools的原始代码旨在在输入时立即更新值。

我确实修改了功能以清除原始值，这样转换按钮可以通过简单的代码双向工作。

这是一个快速的JavaScript来完成这项工作：

function convertTemp() {
 // Set the initial variables for c (Celsius) and f (Fahrenheit)
 var c = document.getElementById('c'), f = document.getElementById('f');
 // Test if there is a value for Celsius
 if(c.value != '') {
  // Set the value for Fahrenheit
  f.value = Math.round(c.value * 9 / 5 + 32);
  // Clear the value for Celsius
  c.value = '';
 // If there isn't a value for Celsius
 } else  {
  // Set the value for Celsius
  c.value = Math.round((f.value - 32) * 5 / 9);
  // Clear the value for Fahrenheit
  f.value = '';
 }
}

及其附带的HTML：

Celcius:<input id="c">&nbsp;&nbsp;&nbsp;
Fahrenheit:<input id="f">&nbsp;&nbsp;&nbsp;
<button type="button" id="convert" onclick="convertTemp()">Convert</button>

可以在http://jsfiddle.net/bhz6uz54/

进行测试

要记住简单代码的事情，像这样，没有什么可以验证提供的值是可以接受的。一点regex可以作为验证，但它如何实现取决于你想如何标记问题。

Answer 2

我个人讨厌 Do-it 按钮，所以我会选择一个更动态的解决方案：

// Get the Input elements:
var $f = document.getElementById("f");
var $c = document.getElementById("c");

function FC_CF() {

  var temp;  // Will hold the temperature value
  var $targ; // Used to target the element we're not typing into:

  if (this.id === "c") { // If we're typing into #c...
    $targ = $f;          // use #f as target element
    temp = (this.value * 9 / 5) + 32;  // C2F
  } else {
    $targ = $c;
    temp = (this.value - 32) * 5 / 9;  // F2C
  }

  // Write the result "as we type" in the other ($targ) field:
  $targ.value = !isNaN(temp) ? parseFloat(temp.toFixed(1))  : "Err";
  // (Above:) temp is a num  ? return floated number,   else: "Show some error"

}

// Assign input listeners to trigger the above function:
$f.oninput = FC_CF; 
$c.oninput = FC_CF;

Celcius:    <input id="c">
Fahrenheit: <input id="f">

Answer 3

您可以按以下步骤分离进行温度转换的功能，因为我对代码进行了更改。

       <p>
    <label>Fahrenheit</label>
  <input id="outputFahrenheit" type="number" placeholder="Fahrenheit"
  oninput="temperatureConverterCelsius(this.value)"
  onchange="temperatureConverterCelsius(this.value)" value="">
</p>
<p>Celsius: </p>

<input id="outputCelsius" type="number" placeholder="Celsius" 
   oninput="temperatureConverterFahrenheit(this.value)" 
    onchange="temperatureConverterFahrenheit(this.value)" value="">
    </p>


    <script type=""text/javascript>
    function temperatureConverterCelsius(valNum) {
    valNum = parseFloat(valNum);
    document.getElementById("outputCelsius").value = (valNum-32) / 1.8;
    //document.getElementById("outputFahrenheit").value = (valNum*1.8)+32;

}
    </script>


  </body>
</html>

Answer 4

class Temperature_conversation {

    constructor(celsius) {

        this.celsius= celsius;
        this.fahrenheit= 0;
        this.table_begin= -50.0;
        this.table_end= 50.0;
        this.table_step= 10.0;
        console.log('---------------------Conversion--------------------------');
        console.log('Celsius fahrenheit');
        for(this.celsius = this.table_begin; this.celsius <= this.table_end; this.celsius += this.table_step){
            this.fahrenheit = this.celsiusToFahrenhit(celsius);
        }


    }
    celsiusToFahrenhit(c){
        const minimun_celsius = -273.15;
        if (c < minimun_celsius) {
            throw 'O argumento es pequeno';

        }
         this.celsius = (9.0 / 5.0) * c+ 32;

        var res = [this.celsius, this.fahrenheit]
        console.table(res);
    }
}

Celsius和Fahrenheit转换器 - JavaScript

4 个答案: