May 14, 2019

【JavaScript】JS地下城-3F-計算機

【JavaScript】JS地下城-3F-計算機

3F-計算機

wp-image-242

連結

Demo

Code

使用語言

HTML、CSS、JavaScript(ES6)

BOSS 弱點

  1. 【特定技術】數字位數過多時,不能因此而破版,計算機功能皆須齊全
  2. 【自我學習】請在此關卡中「自學一個你原本不太會的技巧」,投稿時分享你透過哪些資源學習,並寫範例程式碼講解該技巧,以及你如何應用在此關卡上。

技巧

使用 const 宣告函式

const function = () => { /*.......*/ };

三元運算子

使用三元運算子可以大大減少程式碼佔用的行數,也可以提高效能,寫得好可以讓程式碼更好閱讀,寫不好可能連自己都看不懂…

語法:

x ? i : a

範例:

//宣告
var x = true;
//true的話回傳i,false的話回傳a
x ? i : a;
//結果回傳i

eval() 函式

語法:

eval( 要執行的字串 )

範例:

var str = '10+4*5';
var B = eval(str);

console.log(B); // 輸出 30

依照文字寬度縮放文字

從 30 開始用 for 加大文字到 56,如果中間超過計算機寬度就設定當前文字大小,為了要符合美觀再 -4,才不會太靠近邊緣。

//在主函式最後一行執行resizeText()
const resizeText = () => {
  for (var i = 30; i < 56; i++) {
    display.style.fontSize = i + 'px';
    if (display.scrollWidth > calculator.clientWidth) {
        display.style.fontSize = (i-4) + 'px';
        break;
    }
  }
};

在小數點前每3格加一個逗號

參考資料:https://codepen.io/anon/pen/xBGOLy

//在主函式第一行執行addComma(false)消除逗號進入計算
//在主函式最後一行執行addComma(true)新增逗號到輸出結果
const addComma = (isAdd) => {
  if (isAdd) {
    let parts = display.textContent.split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    display.textContent = parts.join('.');
  }else {
    display.textContent = display.textContent.replace(/,/g, '');
  }
};

參考資料

How to build an HTML calculator app from scratch using JavaScript

JavaScript初級者のためのコーディングガイド

Tags: