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