A Pen by Tristan Huang.

EAxpd.markdown

EAxpd

A Pen by Tristan Huang on CodePen.

License.

index.html

<div class="container">
  <div class="row">
    <div class="col-xs-10">
      <textarea id="input-line" rows="2" rols="16" readonly="true">0</textarea>
    </div>
    <div class="col-xs-2">
      <button type="button" class="btn" id="btn-backspace">⌫</button>
    </div>
  </div>
  <div class="row">
    <div class="ical-numbers col-xs-8">
      <div class="row text-center">
        <div class="col-xs-4">
          <button type="button" class="btn btn-numbers btn-box">7</button>
        </div>
        <div class="col-xs-4">
          <button type="button" class="btn btn-numbers btn-box">8</button>
        </div>
        <div class="col-xs-4">
          <button type="button" class="btn btn-numbers btn-box">9</button>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-xs-4">
          <button type="button" class="btn btn-numbers btn-box">4</button>
        </div>
        <div class="col-xs-4">
          <button type="button" class="btn btn-numbers btn-box">5</button>
        </div>
        <div class="col-xs-4">
          <button type="button" class="btn btn-numbers btn-box">6</button>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-xs-4">
          <button type="button" class="btn btn-numbers btn-box">1</button>
        </div>
        <div class="col-xs-4">
          <button type="button" class="btn btn-numbers btn-box">2</button>
        </div>
        <div class="col-xs-4">
          <button type="button" class="btn btn-numbers btn-box">3</button>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-xs-4">
          <button type="button" class="btn btn-numbers btn-box">0</button>
        </div>
        <div class="col-xs-4">
          <button type="button" class="btn btn-numbers btn-box">00</button>
        </div>
        <div class="col-xs-4">
          <button type="button" class="btn btn-numbers btn-box">.</button>
        </div>
      </div>
    </div>
    <div class="ical-controls col-xs-4">
      <div class="col-xs-6">
        <button type="button" class="btn btn-controls btn-box">+</button>
        <button type="button" class="btn btn-controls btn-box">-</button>
        <button type="button" class="btn btn-controls btn-box">*</button>
        <button type="button" class="btn btn-controls btn-box">/</button>
      </div>
      <div class="col-xs-6">
        <button type="button" class="btn btn-controls btn-box">%</button>
        <button type="button" class="btn btn-controls btn-box">(</button>
        <button type="button" class="btn btn-controls btn-box">)</button>
        <button type="button" class="btn btn-info btn-box">=</button>
      </div>
    </div>
  </div>
</div>

script.js

var start_p = true;
var input_string = "0";
var alone_keys = ['+', '-', '*', '/', '%'];
var alone_keys_and_dot = ['+', '-', '*', '/', '%', '.'];
var number_end_keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', ')'];

function change_input_line (str) {
	var input_line = document.getElementById('input-line');
	if (input_string.length > 10) {
		input_line.style.fontSize = "44px";
		input_line.style.lineHeight = "46px";
	} else {
		input_line.style.fontSize = "64px";
		input_line.style.lineHeight = "91px";
	}
	input_line.value = str;
}

function input_sth (btn) {
	value = btn.firstChild.data;
	last_value = input_string.slice(-1);
	console.log(input_string.length);
	if (input_string.length > 31) {
		// 忽略长度超过10的表达式
		return -1;
	}
	if (alone_keys_and_dot.indexOf(last_value) != -1 && alone_keys_and_dot.indexOf(value) != -1) {
		// 忽略重复输入运算符
		return -1;
	}
	if (start_p && alone_keys.indexOf(value) == -1) {
		// 初始清除输入框
		input_string = value;
	} else if (value == '(' && number_end_keys.indexOf(last_value) != -1) {
		// 自动补全括号前面的乘号
		input_string = input_string + '*' + value;
	} else {
		input_string += value;		
	}
	input_string = input_string.slice(0, 32);
	change_input_line(input_string);
	start_p = false;
	return 1;
}

function compute_result () {
	var r;
	try {
		r = eval(input_string);
	} catch(err) {
		console.log('error');
	}
	if (r === undefined) {
		r = 'error';
	}
	if (String(r).length > 30) {
		r = r.toExponential();
	}
	change_input_line(r);
	input_string = r.toString();
	start_p = true;
}

function backspace () {
	if (input_string.length == 1) {
		clear_all();
	} else {
		input_string = input_string.slice(0,-1);		
		change_input_line(input_string);
	}
}

function clear_all () {
	input_string = "0"
	change_input_line(input_string);
	start_p = true;
}

window.onload = function () {
	btns = document.getElementsByClassName('btn');
	for (var i=0; i<btns.length; i++) {
		var current_btn = btns[i];
		if (current_btn.firstChild.data === "=") {
			current_btn.onclick = compute_result;
		} else if (current_btn.firstChild.data === "⌫") {
			current_btn.onclick = backspace;
		} else {
			current_btn.onclick = function () {
				input_sth(this);
			};			
		}
	}
};

style.css

body {
  font-family: 'Open Sans Condensed', sans-serif;
	background-color: #eee;
}

.container {
	margin-left: auto;
	margin-right: auto;
	max-width: 400px;
}

.row { height: 100px; }

#input-line {
	font-size: 64px;
	padding-left: 25px;
	padding-right: 25px;
	text-align: right;
	resize: none;
	border-style: none;
	width: 100%;
	height: 100px;
	color: white;
	background-color: black;
}

#btn-backspace,
.btn-box {
	font-size: 32px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	margin: 0px,0px,0px,0px;
	display: block;
	width: 100%;
	height: 100px;
}

.btn-box { 	border-color: #f3f3f3; }

#btn-backspace {
	color: white;
	background-color: black;
}

#btn-backspace:hover { background-color: #222; }

.btn-numbers { background-color: #fefefe; }

.btn-numbers:hover {
	background-color: #20C2E2;
	border-color: #20C2E2;
	color: white;
}

.btn-controls { background-color: #fafafa; }

.btn-controls:hover {
	background-color: #00B1D8;
	border-color: #00B1D8;
	color: white;
}

.btn-info { border-color: #20C2E2; }

.btn-info:hover { border-color: #00B1D8; }

.col-xs-4,
.col-xs-6,
.col-xs-3,
.col-xs-2,
.col-xs-10 {
	padding-left: 0px;
	padding-right: 0px;
  margin-bottom: 0px;
}