摄氏和华氏转换器 - JavaScript

我想制作一个网页，有两个文本框，一个摄氏和华氏盒子。在它们之间，有一个转换按钮，可将摄氏温度转换成华氏温度，将华氏温度转换为摄氏温度。如果在任何一个框中都有字母，我想取消转换，并弹出一个提示，提示“只有数字好用！”到目前为止，我还没有想出如何获得警报，并且当我在摄氏度框中键入数字时，它总是在同一个框中表示数字-18。华氏很好。摄氏和华氏转换器 - JavaScript

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。

来源

2014-09-25 yolotheone

从HTML输入中获得的值是'string'类型，所以你正在用字符串进行数学计算，只是抬起头来。另外，您应该查看如何从HTML抽象事件处理。这是一个不好的做法。 – 2014-09-25 19:25:17

@SterlingArcher - 由于JavaScript是弱类型语言，因此使用字符串（除了'+'）进行数学计算没有任何问题。 – 2014-09-25 19:26:04

@Derek朕会功夫不挑剔，但将+看作是一个非常标准的数学运算符，数学和字符串确实可能存在问题？我觉得这对于类型转换更安全，这样你就不会冒连接数字或'NaN'结果的风险 – 2014-09-25 19:31:24

我个人讨厌做它按钮，这样我会用更动态的解决方案去：

// 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">

来源

2014-09-25 19:34:32

从OP问的问题，我们可以清楚地看到他正处于学习阶段。解释这段代码是一个好主意......只是说！ – 2014-09-25 19:35:52

@ Karl-AndréGagnon我同意......我只需要更多的时间来写所有的...耐心等待;） – 2014-09-25 19:36:31

通常情况下，坚持使用OP的lib（或缺乏lib）可能会更好。原生JS会比这里的jQuery答案更好（数学方式的开销） – 2014-09-25 19:36:51

没有必要为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/

东西要记住简单的代码，像这样，没有什么可以验证提供的值是可以接受的。一个小正则表达式可以作为验证，但是它将如何实现取决于你想如何标记问题。

来源

2014-09-25 19:39:03

摄氏和华氏转换器 - JavaScript

回答

相关问题