華氏溫度轉化為攝氏溫度的簡單JavaScript代碼

  今天,跟著W3School學到了"JavaScript函數",代碼都挺簡單的,在運算符調用函數的地方寫了一個小程序。原碼程序是這樣的:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 函数</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"温度是:" + toCelsius(86) + " 摄氏度。";

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
} 
</script>

</body>
</html>

   這個代碼沒什麽毛病,確實也能將設置的86華氏度換算成攝氏度。但是,這是寫死的代碼好不好。我要算100度呢,200度呢,是不是每次都要在代碼裏改?這算什麽?我決定重新寫這個代碼,讓用戶輸入一個華氏溫度,設置一個轉換按鈕,一點擊按鈕,就可以把溫度轉換成攝氏溫度。這裏上代碼偷個懶,上原碼也看不到樣式,樣式就不寫了。我寫的代碼如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JSNote1</title>
<head>
<body>
<!--	改進代碼,讓用戶自己輸入華氏溫度,點擊按鈕,由電腦計算出攝氏溫度並返回-->
<!--
	步驟:1,定義兩個input標簽,一個用來讓用戶輸入溫度,一個用來顯示結果.
		2,定義一個提交標簽,點擊按鈕,就顯示計算結果.
		3,寫方法,套用計算公式
-->
	<input type="text" id="putFah" placeholder="請輸入一個華氏溫度">
	<input type="submit" value="轉換" onClick="toCet()">
	<input type="text" id="getResult">
	<script>
		function toCet(){
			//a的值從id=putFah的代碼傳遞過來
			a = Number(document.getElementById("putFah").value);
			//用id=getResult的代碼接收經公式計算后的結果
			document.getElementById("getResult").value = (5/9)*(a-32);
		}
	</script>
</body>
</html>

   感覺好多了,再加上自己的樣式就美滋滋了。這裏順便說一下,這裏有個小地方還不太明白,按我的理解document.getElementById("getResult").value = (5/9)*(a-32);這句話反過來寫,寫成(5/9)*(a-32) = document.getElementById("getResult").value;應該也是可以的,但事實證明,反過來就跑不通了,這裏有些懵逼。如果有哪位大佬明白的,請不吝賜教一下。

posted @ 2019-07-15 16:39  芻狗工作室  阅读(803)  评论(0编辑  收藏  举报