简易的移动端计算器代码

使用方法：

1、head引入css文件

<style>
* {
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

html, body {
	height: 100%;
	overflow: hidden;
}

.kiner-calc-container {
	width: 100%;
	margin: 0 auto;
	border-left: 1px solid #e6e6e6;
	border-top: 1px solid #e6e6e6;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	flex-flow: column;
	height: 100%;
	zoom: 1;
	max-width: 750px;
}

.result-panel {
	flex: 1;
	background: #f0f0f0;
	box-sizing: border-box;
	border: 5px #f2f3f7 solid;
	text-align: right;
	font-size: 56px;
	color: #999;
	box-shadow: inset 0 0 5px #aaa;
	position: relative;
	overflow: hidden;
}

.result-panel .data {
	display: inline-block;
	transform-origin: right center;
	transition: all 300ms;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%) scale(1);
	padding-right: 10px;
	word-break: keep-all;
	height: fit-content;
}

.calc-container {
	width: 100%;
	display: flex;
	flex-flow: column;
	flex: 5;
}

.calc-container .row {
	display: flex;
	flex: 1;
	border-top: 1px solid #e6e6e6;
	justify-content: center;
	box-sizing: border-box;
}

.row .key {
	flex: 1;
	text-align: center;
	border-right: 1px solid #e6e6e6;
	background: radial-gradient(#dddddd, #f2f3f7);
	cursor: pointer;
	font-size: 32px;
	color: #333333;
	user-select: none;
	box-sizing: border-box;
	transition: 100ms;
}

.row .key:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}

.row .key span {
	display: inline-block;
	vertical-align: middle;
}

.row .key.active {
	transform: scale(.9);
	box-shadow: 0 0 5px #333;
}

.row .special {
	background: radial-gradient(orangered, #cf3800);
	color: #FFFFFF;
}
</style>

2、body引入HTML代码

<div class="kiner-calc-container">
    <div class="result-panel">
        <span class="data"></span>
    </div>
    <div class="calc-container">
        <div class="row">
            <div class="key" data-key="("><span>(</span></div>
            <div class="key" data-key=")"><span>)</span></div>
            <div class="key" data-key="delAll"><span>CE</span></div>
            <div class="key" data-key="/"><span>÷</span></div>
        </div>
        <div class="row">
            <div class="key" data-key="7"><span>7</span></div>
            <div class="key" data-key="8"><span>8</span></div>
            <div class="key" data-key="9"><span>9</span></div>
            <div class="key" data-key="*"><span>×</span></div>
        </div>
        <div class="row">
            <div class="key" data-key="4"><span>4</span></div>
            <div class="key" data-key="5"><span>5</span></div>
            <div class="key" data-key="6"><span>6</span></div>
            <div class="key" data-key="-"><span>-</span></div>
        </div>
        <div class="row">
            <div class="key" data-key="1"><span>1</span></div>
            <div class="key" data-key="2"><span>2</span></div>
            <div class="key" data-key="3"><span>3</span></div>
            <div class="key" data-key="+"><span>+</span></div>
        </div>
        <div class="row">
            <div class="key" data-key="."><span>.</span></div>
            <div class="key" data-key="0"><span>0</span></div>
            <div class="key" data-key="del"><span>del</span></div>
            <div class="key special" data-key="eq"><span>=</span></div>
        </div>
    </div>
</div>


<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/kiner-calc.js"></script>
<script type="text/javascript">

  // 完美解决 ios10 及以上 Safari 无法禁止缩放的问题
  window.onload = function () {
    // 阻止双击放大
    var lastTouchEnd = 0;
    document.addEventListener('touchstart', function (event) {
      if (event.touches.length > 1) {
        event.preventDefault();
      }
    });
    document.addEventListener('touchend', function (event) {
      var now = (new Date()).getTime();
      if (now - lastTouchEnd <= 300) {
        event.preventDefault();
      }
      lastTouchEnd = now;
    }, false);

    // 阻止双指放大
    document.addEventListener('gesturestart', function (event) {
      event.preventDefault();
    });
  }


  var kinerCalc = new KinerCalc();
  var resultPanel = $('.result-panel .data');

  function calcFontSize(panelWidth, dataWidth) {
    var rate = 1;
    if (panelWidth < dataWidth) {
      rate = panelWidth / (dataWidth + 40);

      console.log(rate);

      return rate;
    } else {
      return rate;
    }

  }

  var isMobile = "ontouchend" in document ? true : false;

  $('.calc-container').on(isMobile?'touchend':'click', '.key', function () {

    var key = $(this).data('key');
    var val = resultPanel.text();
    $(this).addClass('active');
    var _this = this;
    setTimeout(function () {
      $(_this).removeClass('active');
    }, 100);

    if (["+", "-", "*", "/"].indexOf(key) >= 0 && ["+", "-", "*", "/"].indexOf(val[val.length - 1]) >= 0) {
      return false;
    }

    if (key === "eq") {
      var txt = resultPanel.text();
      if (txt.length === 0) {
        return false;
      }
      var res = kinerCalc.calc(txt);
      resultPanel.text(res);
    } else if (key === "del") {

      resultPanel.text(val.substring(0, val.length - 1));
    } else if (key === "delAll") {
      resultPanel.text('');
    } else if (key === "(") {
      if (["(", ")"].indexOf(val[val.length - 1]) >= 0) {
        return false;
      }
      resultPanel.append(key);
    } else if (key === ")") {
      if (["(", ")"].indexOf(val[val.length - 1]) >= 0) {
        return false;
      }
      resultPanel.append(key)
    } else {
      resultPanel.append(key);
    }

    resultPanel.css({
      transform: 'translateY(-50%) scale(' + calcFontSize($('.result-panel').width(), resultPanel.width()) + ')'
    });

  });


</script>