第一个TS小项目--计算器

看过typescript官网的5分钟上手之后，觉得语法上像极了JS，相比JS，TS更注重于 'type' （这样一看JS真的是垃圾，很垃圾），于是动动手写了一个计算器(jsbin在线)体验了一下。

github

预览

typescript：

class Calculate {
    private n1: string = '';
    private n2: string = '';
    private option: string = '';
    private result: string = '';
    private keys: Array<Array<string>> = [
      ['Clear', '÷'],
      ['7', '8', '9', '×'],
      ['4', '5', '6', '-'],
      ['1', '2', '3', '+'],
      ['0', '.', '=']
    ];
    public bottomBar: HTMLDivElement;
    public top: HTMLDivElement;
    public wrap: HTMLDivElement;
    constructor(){
      this.createTopScreen();
      this.createBottomBar();
      this.createWrap();
      this.createAllButton();
      this.bindEvents();
    }
    createSingleButton(text: string, wrap: HTMLElement, className: string): HTMLButtonElement {
      let button: HTMLButtonElement = document.createElement('button');
      button.textContent = text;
      button.classList.add('button');
      button.classList.add(className?className:'');
      wrap.appendChild(button);
      return button;
    }
    createTopScreen(): void {
      let top:HTMLDivElement = document.createElement('div');
      top.classList.add('top-screen');
      top.textContent = '0';
      this.top = top;
    }
    createBottomBar(): void {
      let bottom:HTMLDivElement = document.createElement('div');
      bottom.classList.add('bottom-bar');
      this.bottomBar = bottom;
    }
    createWrap(): void {
      let wrap:HTMLDivElement = document.createElement('div');
      document.body.appendChild(wrap);
      wrap.classList.add('calc-wrap');
      wrap.appendChild(this.top);
      wrap.appendChild(this.bottomBar);
      this.wrap = wrap;
    }
    createAllButton(): void {
      this.keys.map((v1:Array<string>): void => {
        let div:HTMLDivElement = document.createElement('div');
        div.classList.add('button-bar');
        v1.map((v2: string): void => {
          this.createSingleButton(v2, div, `button-${v2}`);
        })
        this.bottomBar.appendChild(div);
      })
    }
    checkNumber(num: string, text: string): void{
      if(text === '.' && this[num].indexOf('.') >= 0){
        this.top.textContent = this[num];
        return;
      }
      this[num] += text;
      this.top.textContent = this[num];
    }
    updateNumber(text: string): void {
      if(this.option){
        this.checkNumber('n2', text);
      } else {
        this.checkNumber('n1', text);
      }
    }
    updateOption(text: string):void {
      if(this.n1 === ''){
        this.n1 = this.result;
      }
      this.option = text;
    }
    updateResult(): void {
      if(this.n1 === '' && this.n2 === '' && this.option === ''){
        this.top.textContent = this.result;
        return;
      }
      let result: number;
      if(this.option === '+') result = Number(this.n1) + Number(this.n2);
      if(this.option === '-') result = Number(this.n1) - Number(this.n2);
      if(this.option === '×') result = Number(this.n1) * Number(this.n2);
      if(this.option === '÷') result = Number(this.n1) / Number(this.n2);
      this.top.textContent = this.result = result.toString();
      if(result.toString().length > 9){
        this.top.textContent = this.result = result.toPrecision(9).toString().replace(/0+$/,'');
      }
      if(this.n2 === '0') this.top.textContent = '不是数字';
      this.n1 = '';
      this.n2 = '';
      this.option = '';
      
    }
    updateNumberAndOption(text: string): void{
      if('0123456789.'.indexOf(text) >= 0){
        this.updateNumber(text);
      } else if('+-×÷'.indexOf(text) >= 0){
        this.updateOption(text)
      } else if('='.indexOf(text) >= 0){
        this.updateResult();
      } else if('Clear' === text){
        this.n1 = '';
        this.n2 = '';
        this.option = '';
        this.top.textContent = this.result = '0';
      }
      console.log(this.n1, this.option, this.n2, this.result);
    }
    bindEvents(): void {
      this.wrap.addEventListener('click', (event): void => {
        if(event.target instanceof HTMLButtonElement){
          let button: HTMLButtonElement = event.target;
          let text: string = button.textContent;
          this.updateNumberAndOption(text);
        }
      })
    }
  }
  
  new Calculate()

编译过后的JS：

var Calculate = /** @class */ (function () {
        function Calculate() {
            this.n1 = '';
            this.n2 = '';
            this.option = '';
            this.result = '';
            this.keys = [
                ['Clear', '÷'],
                ['7', '8', '9', '×'],
                ['4', '5', '6', '-'],
                ['1', '2', '3', '+'],
                ['0', '.', '=']
            ];
            this.createTopScreen();
            this.createBottomBar();
            this.createWrap();
            this.createAllButton();
            this.bindEvents();
        }
        Calculate.prototype.createSingleButton = function (text, wrap, className) {
            var button = document.createElement('button');
            button.textContent = text;
            button.classList.add('button');
            button.classList.add(className ? className : '');
            wrap.appendChild(button);
            return button;
        };
        Calculate.prototype.createTopScreen = function () {
            var top = document.createElement('div');
            top.classList.add('top-screen');
            top.textContent = '0';
            this.top = top;
        };
        Calculate.prototype.createBottomBar = function () {
            var bottom = document.createElement('div');
            bottom.classList.add('bottom-bar');
            this.bottomBar = bottom;
        };
        Calculate.prototype.createWrap = function () {
            var wrap = document.createElement('div');
            document.body.appendChild(wrap);
            wrap.classList.add('calc-wrap');
            wrap.appendChild(this.top);
            wrap.appendChild(this.bottomBar);
            this.wrap = wrap;
        };
        Calculate.prototype.createAllButton = function () {
            var _this = this;
            this.keys.map(function (v1) {
                var div = document.createElement('div');
                div.classList.add('button-bar');
                v1.map(function (v2) {
                    _this.createSingleButton(v2, div, "button-" + v2);
                });
                _this.bottomBar.appendChild(div);
            });
        };
        Calculate.prototype.checkNumber = function (num, text) {
            if (text === '.' && this[num].indexOf('.') >= 0) {
                this.top.textContent = this[num];
                return;
            }
            this[num] += text;
            this.top.textContent = this[num];
        };
        Calculate.prototype.updateNumber = function (text) {
            if (this.option) {
                this.checkNumber('n2', text);
            }
            else {
                this.checkNumber('n1', text);
            }
        };
        Calculate.prototype.updateOption = function (text) {
            if (this.n1 === '') {
                this.n1 = this.result;
            }
            this.option = text;
        };
        Calculate.prototype.updateResult = function () {
            if (this.n1 === '' && this.n2 === '' && this.option === '') {
                this.top.textContent = this.result;
                return;
            }
            var result;
            if (this.option === '+')
                result = Number(this.n1) + Number(this.n2);
            if (this.option === '-')
                result = Number(this.n1) - Number(this.n2);
            if (this.option === '×')
                result = Number(this.n1) * Number(this.n2);
            if (this.option === '÷')
                result = Number(this.n1) / Number(this.n2);
            this.top.textContent = this.result = result.toString();
            if (result.toString().length > 9) {
                this.top.textContent = this.result = result.toPrecision(9).toString().replace(/0+$/, '');
            }
            if (this.n2 === '0')
                this.top.textContent = '不是数字';
            this.n1 = '';
            this.n2 = '';
            this.option = '';
        };
        Calculate.prototype.updateNumberAndOption = function (text) {
            if ('0123456789.'.indexOf(text) >= 0) {
                this.updateNumber(text);
            }
            else if ('+-×÷'.indexOf(text) >= 0) {
                this.updateOption(text);
            }
            else if ('='.indexOf(text) >= 0) {
                this.updateResult();
            }
            else if ('Clear' === text) {
                this.n1 = '';
                this.n2 = '';
                this.option = '';
                this.top.textContent = this.result = '0';
            }
            console.log(this.n1, this.option, this.n2, this.result);
        };
        Calculate.prototype.bindEvents = function () {
            var _this = this;
            this.wrap.addEventListener('click', function (event) {
                if (event.target instanceof HTMLButtonElement) {
                    var button = event.target;
                    var text = button.textContent;
                    _this.updateNumberAndOption(text);
                }
            });
        };
        return Calculate;
    }());
    new Calculate();

html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>calc</title>
  <style>
    :root{
      --em3: 3em;
    }
    .calc-wrap {
      display: inline-block;
    }
    .top-screen {
      height: 6rem;
      line-height: 6rem;
      background: rgb(42,40,42);
      text-align: right;
      color: #fff;
      font-size: 4.4em;
      padding-right: 1rem;
      border-top: 1.2rem solid rgb(42,40,42);
    }
    .button {
      height: var(--em3);
      width: var(--em3);
    }
    .button.button-Clear {
      width: 9em;
    }
    .button.button-0 {
      width: 6em;
    }
    .button-bar .button {
      background: rgb(226,224,226);
      background: linear-gradient(rgb(245,240,245), rgb(226,224,226));
      border-color: rgb(226,224,226);
      font-weight: bold;
      font-size: 40px;
    }
    .button-bar .button:last-child {
      background: rgb(255,151,58);
      background: linear-gradient(rgb(247,167,96), rgb(255,151,58));
      border-color: rgb(255,151,58);
      border-image: rgb(255,151,58);
      color: #fff;
    }
  </style>
</head>
<body>
  <script src="1.js"></script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,076评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,658评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,732评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,493评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,591评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,598评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,601评论 3赞 415
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,348评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,797评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,114评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,278评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,953评论 5赞 339
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,585评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,202评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,180评论 2赞 367
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,139评论 2赞 352