TypeScript（三） 做一個計算器

yuyunzhi.github.io

源碼鏈接：

yuyunzhi/typescript-demo?

github.com

關鍵詞：typescript及ES6中的class，實現了加減乘除功能。

一、知識點

• TS類型檢查：string、boolean、HTMLDivElement、HTMLSpanElement、Array<Array<string | number>>
• class語法

class Calculator{//聲明變數 public n1: string = ;constructor(){}//定義方法createContainer(){}}new Calculator() //創建實例

二、代碼邏輯

1、聲明變數

public n1: string = ; public n2: string = ; public result: string = ; public operator: string = ; public equal:boolean=true; public container:HTMLDivElement; public span: HTMLSpanElement; public textLists: Array<Array<string | number>> = [ [c, ÷], [7, 8, 9, ×], [4, 5, 6, -], [1, 2, 3, +], [0, ., =], ];

2、執行代碼包括4個方面

constructor(){ this.createContainer() this.createOutput() this.createButtons() this.bindEvents()}

3、createContainer

createContainer(){ let calc = document.createElement(div); calc.classList.add(calc); document.body.appendChild(calc); this.container = calc; }

4、createOutput

createOutput(){ let output = document.createElement(div); output.classList.add(output); let span = document.createElement(span); output.appendChild(span); span.textContent = 0; this.span = span; this.container.appendChild(output); }

5、createButtons

createButton(text:string|number,container: HTMLElement, className?: string){ let button = document.createElement(button); button.textContent = text.toString(); //className && button.classList.add(className); button.classList.add(className); container.appendChild(button); }

6、bindEvents

bindEvents(){ this.container.addEventListener(click, event => { if (event.target instanceof HTMLButtonElement) { const text = event.target.textContent; if (0123456789..indexOf(text) >= 0) { if (this.operator) { this.n2 += text; this.span.textContent = this.n2; } else { this.result = ; this.n1 += text; this.span.textContent = this.n1; } } else if (+-×÷.indexOf(text) >= 0) { if (this.result) { this.n1 = this.result; this.result = ; } this.operator = text; } else if (=.indexOf(text) >= 0) { if(this.result){ // }else{ this.result = this.removeZero(this.getResult(this.n1, this.n2, this.operator)); console.log(this.result) this.span.textContent = this.result; this.n1 = ; this.n2 = ; this.operator = ; this.equal=false; } } else if (text === c) { this.n1 = ; this.n2 = ; this.operator = ; this.result = ; this.span.textContent = 0; } console.log(this.n1, this.operator, this.n2); } }); }

推薦閱讀：