今天,跟著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;應該也是可以的,但事實證明,反過來就跑不通了,這裏有些懵逼。如果有哪位大佬明白的,請不吝賜教一下。