攝氏和華氏轉換器 - 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

回答

相關問題