add js file

script.js

@@ -0,0 +1,150 @@
+// 獲取表單元素
+const before_summer_list = [];
+const after_summer_list = [];
+const before_winter_list = [];
+const after_winter_list = [];
+
+const ids = [
+    "before_summer_0_120",
+    "before_winter_0_120",
+    "after_summer_0_120",
+    "after_winter_0_120",
+    "summer_increase_0_120",
+    "winter_increase_0_120",
+    "before_summer_121_330",
+    "before_winter_121_330",
+    "after_summer_121_330",
+    "after_winter_121_330",
+    "summer_increase_121_330",
+    "winter_increase_121_330",
+    "before_summer_331_500",
+    "before_winter_331_500",
+    "after_summer_331_500",
+    "after_winter_331_500",
+    "summer_increase_331_500",
+    "winter_increase_331_500",
+    "before_summer_501_700",
+    "before_winter_501_700",
+    "after_summer_501_700",
+    "after_winter_501_700",
+    "summer_increase_501_700",
+    "winter_increase_501_700",
+    "before_summer_701_1000",
+    "before_winter_701_1000",
+    "after_summer_701_1000",
+    "after_winter_701_1000",
+    "summer_increase_701_1000",
+    "winter_increase_701_1000",
+    "before_summer_1000_above",
+    "before_winter_1000_above",
+    "after_summer_1000_above",
+    "after_winter_1000_above",
+    "summer_increase_1000_above",
+    "winter_increase_1000_above"
+];
+
+// 迴圈生成變數並加入列表
+for (let i = 0; i < ids.length; i += 1) {
+    const textContent = document.getElementById(ids[i]).textContent;
+    const number = parseFloat(textContent);
+    const data = number.toFixed(2);
+
+    if (ids[i].includes("before_summer")){
+        before_summer_list.push(data);
+    }
+    if (ids[i].includes("after_summer")){
+        after_summer_list.push(data);
+    }
+    if (ids[i].includes("before_winter")){
+        before_winter_list.push(data);
+    }
+    if (ids[i].includes("after_winter")){
+        after_winter_list.push(data);
+    }
+   }
+
+const billingCycleSelect = document.getElementById('billingCycle');
+const monthSelect = document.getElementById('select_month');
+const electricityUsageInput = document.getElementById('electricityUsage');
+
+const increasePercent = document.getElementById('increasePercent');
+const beforeBillPrice = document.getElementById('billBefore');
+const afterBillPrice = document.getElementById('billAfter');
+const averagePrice = document.getElementById('averagePrice');
+
+// 監聽用戶輸入事件，更新結果
+billingCycleSelect.addEventListener('change', updateElectricityBill);
+monthSelect.addEventListener('change', updateElectricityBill);
+electricityUsageInput.addEventListener('input', updateElectricityBill);
+
+function countBillResult(cycle, usage, data_list) {
+    const bill_range = [120, 330, 500, 700, 1000];
+    let sum = 0;
+    let result = 0;
+    let prior_range = 0;
+    console.log(cycle, usage, data_list);
+    if (usage) {
+        if (cycle === "每月") {
+            for (let i = 0; i < bill_range.length; i++) {
+
+                if (i != 0){
+                    prior_range = bill_range[i-1];
+                }
+                sum += bill_range[i];
+                if (sum >= usage){
+                    result += data_list[i] * (usage-prior_range);
+                    break;
+                } else {
+                    result += data_list[i] * (bill_range[i]-prior_range);
+                }
+                console.log(result, bill_range[i], data_list[i]);
+            }
+        } else {
+            for (let i = 0; i < bill_range.length; i++) {
+                console.log(result, bill_range[i], data_list[i]);
+                if (i != 0){
+                    prior_range = bill_range[i-1];
+                }
+                sum += bill_range[i]*2;
+                if (sum >= (usage/2)){
+                    result += data_list[i] * (usage-(prior_range*2));
+                    break;
+                } else {
+                    result += data_list[i] * (bill_range[i]-prior_range)*2;
+                }
+            }
+        }
+    }
+
+    return result;
+}
+
+// 更新電費計算結果
+function updateElectricityBill() {
+    // 計算電費
+    const cycle = billingCycleSelect.value;
+    const month_type = monthSelect.value;
+    const usage = parseFloat(electricityUsageInput.value);
+    let before_result = 0;
+    let after_result = 0;
+    if (month_type === "非夏月") {
+        before_result = countBillResult(cycle, usage, before_winter_list);
+        after_result = countBillResult(cycle, usage, after_winter_list);
+    } else {
+        before_result = countBillResult(cycle, usage, before_summer_list);
+        after_result = countBillResult(cycle, usage, after_summer_list);
+    }
+    console.log(before_result, after_result);
+    billBefore.textContent = before_result.toFixed(0) + " 台幣";
+    billAfter.textContent = after_result.toFixed(0) + " 台幣";
+
+    if (usage) {
+        // 計算漲幅
+        increase_value = (after_result/before_result - 1)* 100;
+        increasePercent.textContent = increase_value.toFixed(2) + " %";
+
+        // 計算均價
+        average_value = after_result/usage;
+        averagePrice.textContent = average_value.toFixed(2) + " 台幣";
+    }
+}