由於我本身有兼職做牆壁彩繪, 常常讓我最困擾的部分就是場地的大小

我該如何知道實際坪數 , 每次都是將幾*幾交給我老婆去計算,

所以我請我老婆乾脆將公式給我, 我來寫一個簡單的坪數計算表單

也跟來此的前端初學者做個分享交流:

公分換算坪數的公式如下:

  • 公分×公分=平方公分
  • 平方公分÷10000=平方公尺
  • 平方公尺×0.3025=坪

所以回歸到上一個主題javascript加減計算的延伸,

先寫好基本的html
<div class="box-1">
  <h2>公分換算坪數</h2>
    <input type="text" name="plus" class="plus" value="" placeholder="加法" onClick="placeholder=''">*
    <input type="text" name="less" class="less" value="" placeholder="加法" onClick="placeholder=''">
    <strong>計算的結果
    <!-- 換算的三種結果 -->
    <span id="span-1"></span>平方公分
    <span id="span-2"></span>平方公尺
    <span id="span-3"></span>坪數
  </strong>
</div>
 

接下來就是jquery代碼

 $('.submit').on('click',function(){
    var plus = $('input[name="plus"]').val();
    var less = $('input[name="less"]').val();  
    var square = 10000;
    var meter = 0.3025;
    //以上為換算基本的條件 將他們轉為自訂義的變數名稱
    
    var tt =  plus * less; //公分×公分=平方公分
    var dd = tt / square;  //平方公分÷10000=平方公尺
    var gg = dd * meter;   //平方公尺×0.3025=就等於最後結果

    var num = $('input[type="text"]').val(); 
    //將所有input[type="text"]轉為變數 檢查用戶是正確輸入

    if(isNaN((num)|| num =='' || num.substring(0,0)==0)){ //判斷是否為數字
      alert('請輸入正確數字'); //非數字跳訊息警示
      return //返回重新輸入

    } 
    if(num == ''''){
      alert('請勿放空 =.='); //放空也要提示一下
    }
    else {
      $('#span-1').text(tt); //正確數值即得結果
      $('#span-2').text(dd); //正確數值即得結果
      $('#span-3').text(Math.round(gg));
      //這邊我用Math.round將小數點四捨五入
    }

  });

以上是一個簡單的公分換算坪數計算方式, 當然只是很基礎的做法,若您有更專業的方式
歡迎不嗇指教! 感恩祝福!

查看範例
 

里莫彩繪事務所紛絲團

奈思創藝網頁設計

奈思創藝網頁設計紛絲團

arrow
arrow

    jk-mimo 發表在 痞客邦 留言(0) 人氣()