zoukankan      html  css  js  c++  java
  • 華氏溫度轉化為攝氏溫度的簡單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;應該也是可以的,但事實證明,反過來就跑不通了,這裏有些懵逼。如果有哪位大佬明白的,請不吝賜教一下。

  • 相关阅读:
    盒子的display属性
    html标签默认属性值之margin;padding值
    JS事件
    表单序列化
    2016年最后一天——前端心语
    原生JS--COOKIE
    原生JS--Ajax
    DOM,BOM
    JS面向对象
    RegExp类型,单体内置对象
  • 原文地址:https://www.cnblogs.com/zzzzzpaul/p/11189588.html
Copyright © 2011-2022 走看看