Js6利用class創建類

本文轉載自查看原文 2017-11-07 20:41 2439 JavaScript

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <h1>結算程序</h1>
 9         <p>
10             <input type="text" placeholder="原價" id="money" />
11         </p>
12         <p>
13             <select id="level">
14                 <option value="0">普通顧客</option>
15                 <option value="1">VIP會員</option>
16                 <option value="2">金卡會員</option>
17                 <option value="3">磚石會員</option>
18             </select>
19         </p>
20         <p>
21             <input type="button"id="btn" value="結算" />
22         </p>
23         <p id="result"></p>
24         <script src="test_3es6.js" type="text/javascript" charset="utf-8"></script>
25     </body>
26 </html>

 1 /*
 2 //定義類
 3 class Plane{
 4     constructor(speed) {
 5         this.speed=speed;//變量放在構造器中
 6     }
 7     fly(){
 8         console.log("飛行速度"+this.speed);
 9     }
10 }
11 var plane=new Plane(800);
12 plane.fly();
13 //類繼承
14 class FightPlane extends Plane{
15     fly(){
16         console.log("戰斗機速度"+this.speed);
17     }
18 }
19 plane =new FightPlane(2000);//多態
20 plane.fly();
21 */
22 
23 /*
24  *正常情況下普通顧客不享受打折優惠，VIP會員享受9.6折優惠，金卡會員享受9.2折優惠，磚石會員享受8.5折優惠。
25  *     雙十一當天，普通顧客享受滿200返50代金券；
26  *     VIP會員享受9折優惠，購物滿500，贈送100元餐券；
27  *     金卡會員享受8.5折優惠，購物滿300元，贈送100元代金券；
28  *     磚石會員享受8折優惠，購物滿200贈送100代金券。
29  */
30 class Calculator {
31     handle(money, level) { //處理
32         if(level == 0) {
33             return money;
34         } else if(level == 1) {
35             return money * 0.96;
36         } else if(level == 2) {
37             return money * 0.92;
38         } else if(level == 3) {
39             return money * 0.85;
40         } else {
41             throw "會員等級錯誤";
42         }
43     }
44 }
45 
46 class DoubleElevenCalculator extends Calculator {
47     handle(money, level) { //處理
48         if(level == 0) {
49             var num = Math.floor(money / 200);
50             return `實際需支付${money}元,贈送${num}張50元代金券`;
51         } else if(level == 1) {
52             var num = Math.floor(money / 500);
53             return `實際需支付${money*0.9}元,贈送${num}張100元餐券`
54         } else if(level == 2) {
55             var num = Math.floor(money / 300);
56             return `實際需支付${money*0.85}元,贈送${num}張100元代金券`;
57         } else if(level == 3) {
58             var num = Math.floor(money / 200);
59             return `實際需支付${money*0.8}元,贈送${num}張100元代金券`;
60         } else {
61             throw "會員等級錯誤";
62         }
63     }
64 
65 }
66 
67 var btn = document.querySelector("#btn");
68 btn.addEventListener("click", function() {
69     //var calculator = new Calculator();
70     var calculator = new DoubleElevenCalculator();
71     var money = document.querySelector("#money").value;
72     money = new Number(money);
73     var level = document.querySelector("#level").value;
74     level = new Number(level);
75     var temp = calculator.handle(money, level);
76     document.querySelector("#result").innerHTML = temp;
77 });

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS 中 Class - 類創建 js 用Class.create方法來創建類利用js添加class JS類—class JS CLass類 ios動態創建類Class js之ES6的Class類 js class類名操作 class_alias--為一個類創建別名 UML建模—EA創建Class(類圖)