iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

溫故知新 JavaScript系列 第 11

Day11- 來做一個簡易計算機吧 -下集

  • 分享至 

  • xImage
  •  

哈囉,在上集我們初步的把計算機的加總功能做出來了,但是不對啊~
我們不單單是要計算客人點幾個漢堡、幾杯可樂,我們是要幫助店員知道這樣總共要多少錢才對呀!

此時撰寫程式一個重要的邏輯就產生了,既然想知道漢堡2個是多少錢,前提是得先定義漢堡一個到底是多少錢,這個階段是我當初在學 JavaScript 時開始感受到原來我們要實作一個功能,我們可以先把一個功能拆分成一個個小單位這樣會比較容易開始,比方說如果光是這樣想要 把幾個漢堡幾杯可能相加得知總價是多少? 這樣感覺好像挺困難又抽象,但是我如果先得知每個產品的單價不就容易多了嗎?

於是我們可以先在函式內建立兩個變數,分別是漢堡的價格與可樂的價格
像是下面這樣:


document.getElementById('count').onclick = function(){
  var hamprice = 60; //漢堡的價格
  var cokeprice = 30; //可樂的價格
}

這邊價格就自己隨便設定拉!
接下來我們在上一篇不是已經寫好取得 input 內數值的方法了嗎,這樣我們只需要再把取出來的數值,再乘上每一個產品的單價~

像下方範例一樣

document.getElementById('count').onclick = function(){
  var hamprice = 30;
  var cokeprice = 20;
  var hamNum = parseInt(document.getElementById('ham').value)*hamprice;
  var cokeNum = parseInt(document.getElementById('coke').value)*cokeprice;
  document.getElementById('total').textContent = hamNum+cokeNum;
}

有木有~是不是已經可以成功地計算出客人買的產品總共要多少錢了呢!
是否開始感覺到程式的運作邏輯,也算是完成自己的一個小小應用程式了呢,如果想要把此計算機功能變得更加完善,當然你也可以自行增加更多功能讓自己的成就感更大!
例如可以增加以下功能:

  • 客人給多少錢購買,你需要找他多少錢?
  • 客人持有會員卡,所有商品可以再打 8折 這樣總共多少錢?

接下來就讓大家自行去練習與發揮囉,下一篇我們繼續來介紹關於 JS 你要知道更多的知識點。


上一篇
Day10- 來做一個簡易計算機吧 -上集
下一篇
Day12- 關於陣列
系列文
溫故知新 JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言